如何在发送POST请求后在同一MVC视图上显示Http响应消息？

Question

我有一个简单的问题。net MVC应用程序，从我的视图中获取firstname和lastname，并将POST请求提交给web api，该api创建用户并将响应作为HttpResponseMessage发送回。

当FirstMessage成功地收到“我的帐户名”和“我的回复”时，它会返回“FirstMessage”，并在本例中返回“我的帐户名”和“我的回复”。满足于字符串和响应。地位现在，在我提交后的浏览器上，我离开了我所在的视图，看到了带有响应的空白白页。显示内容字符串。

我想做的是获取响应并将其显示在我所在的同一视图上。关于如何做到这一点有什么想法吗？

My controller
Controllers/HomeController.cs
public class HomeController : Controller
{
  public ActionResult Index()
        {
            return View();
        }
}

Razor View content
Views/Home/Index.cshtml

        <form name="createtestuserinput" action="api/createuser" method="POST">
            FirstName
            <input type="text" id="firstname" name="firstname">
            Lastname
            <input type="text" id="lastname" name="lastname">
            <input type="submit" id="createAccount" value="Create Account" />
        </form>

Web Api snippet
    public class Createuser : ApiController
    {
           public HttpResponseMessage Post(HttpRequestMessage request)
            {
               var response = new HttpResponseMessage();
              //some logic happens here
              response.Content = new StringContent("Successfully created user account");
               response.StatusCode = HttpStatusCode.OK;
             return response;
             }
    }

Answer 1

如果您没有理由创建ApicController，以下是它在MVC中工作的一般方式：

在您的HomeController中：

[HttpPost]
public ActionResult CreateUser(string firstname, string lastname)
{
    // some logic here... 
    ViewBag.Message = "Successfully created user account";
    return View("Index");
}

在视图/首页/我ndex.cshtml

    <form name="createtestuserinput" action="CreateUser" method="POST">
        FirstName
        <input type="text" id="firstname" name="firstname">
        Lastname
        <input type="text" id="lastname" name="lastname">
        <input type="submit" id="createAccount" value="Create Account" />

        @ViewBag.Message
    </form>

更新：以下代码可以提交到您的web api请求：

<form id="createtestuserinput">
    FirstName
    <input type="text" id="firstname" name="firstname">
    Lastname
    <input type="text" id="lastname" name="lastname">
    <input type="submit" id="createAccount" value="Create Account" />

    <div id="message"></div>
</form>

<script src="/Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function () {
        $("#createtestuserinput").submit(function () {
            var options = {
                url: "/api/createuser",
                type: "POST",
                data: $('#createtestuserinput').serialize()
            };

            $.ajax(options).done(function (data) {
                $("#message").html(data);
            });

            return false;
        });
    });
</script>