How to show HttpResponseMessage on the same MVC view after sending POST request?

Question

I have a simple .net MVC application that takes firstname and lastname from my view and submits POST request to web api that creates user and sends response back as HttpResponseMessage.

When I provide firstname and lastname and hits submit the api receives request in POST and does its logic and then it returns HttpResponseMessage with my response(in this case "Successfully created user account" text).Content with string and response.status. Now on the browser after I submit I move away from the view I was on and I see blank white page with response.Content string displayed.

What I want to do is to take the response and display it on the same view I was on. Any ideas on how to do this?

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;
             }
    }

Do you have to return a HttpResponseMessage? Why not just return an ActionResult and create a view? — caspian
It is a mix of webapi and mvc4 web application on the same project. But yes I have to capture httpresponsemessage. — DoodleKana

caspian caspian · Accepted Answer · 2014-03-27T19:22:20

If you don't have a reason to create an ApiController, here's the general way it would work in MVC:

In your HomeController:

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

In Views/Home/Index.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>

UPDATE: The following code should work to submit to your web api request:

<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>

How to show HttpResponseMessage on the same MVC view after sending POST request?

1 Answers