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, Mar 27 '14 at 19:12
It is a mix of webapi and mvc4 web application on the same project. But yes I have to capture httpresponsemessage. — DoodleKana, Mar 27 '14 at 19:35

caspian · Accepted Answer · 2014-03-28T18:43:43.720

1

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>

edited Mar 28 '14 at 18:43

answered Mar 27 '14 at 19:22

caspian

1,689
12
13

I need to use my web api. I am aware of [HttpPost], But I believe web response will not be captured here, but only post method requests. But thanks for the quick reply. – DoodleKana Mar 27 '14 at 19:34
Ok - the only way I know to do what you're suggesting then is to use an ajax call. Are you looking for the post to be asynchronous or do you want the whole page to refresh? – caspian Mar 27 '14 at 19:41
The following answer may point you in the correct direction: http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form – caspian Mar 27 '14 at 19:51
I am okay with both. But I guess jquery ajax could work. I was just interested in somehow in my home controller I can capture httpresponse message from an api. – DoodleKana Mar 27 '14 at 19:53
2

No. If you're utilizing a web api, through a browser, you need to do so via AJAX. If you just post to the web api, the user will be sent there, and abandoned basically, because they don't know how to issue a new request. If you don't want to use AJAX, then post to a normal action, and connect to the web api *through that action*. – Chris Pratt Mar 27 '14 at 20:51
@ChrisPratt I think you are right. I am now torn between whether to use ajax or to post it to normal action and have that connect to web api. Thank you both for your answers and contributions. – DoodleKana Mar 27 '14 at 21:30
1

MVC is really great in being flexible. You can also set up partial views that can call an action within a page - this might be something more like what you're trying to do. – caspian Mar 28 '14 at 00:47
I tried above jscript and it works as expected. The only thing is it does not replace #message with data after the first response. I can see in chrome dev tab that each request is getting correct reply. Just that data is not being replaced for some reason. – DoodleKana Mar 28 '14 at 17:24
Sorry, change the "replaceWith" to "html". essentially it can't find the div the second time you click, because it was replaced. I updated the answer to reflect this. – caspian Mar 28 '14 at 18:42

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

1 Answers1