jquery ajax post with error and success message returned from the server

Question

Here is my view

 <div>
    @using ( Html.BeginForm("jQueryPost", "Home",null, FormMethod.Post, new { id="FormPost" }))
    { 
    @Html.TextBoxFor(x=> x.Name)<br />
    @Html.TextBoxFor(x => x.LastName)<br />
    @Html.TextBoxFor(x => x.Age)
    <input type=submit value="submit" />
    }
</div>

<script>

    $(document).ready(function () {
        $('#FormPost').submit(function (e) {
            //This line will prevent the form from submitting
            e.preventDefault();
            alert('ajax post here');

            $.ajax({
                type: 'POST',
                url: $('#FormPost').attr('action'),
                data: $('#FormPost').serialize(),
                accept: 'application/json',
                error: function (xhr, status, error) {
                    alert('error: ' + xhr.statusText);
                },
                success: function (response) {
                    alert('resp: ' + response.data);
                }
            });
        });


    });

 </script>

This is the Home controller's method the form posts to:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult jQueryPost(IndexVM vm)
{
    IndexVM _vm = vm;
    return Json("name posted was: " + _vm.Name);
}

When I submit the form I get a 'resp: undefined' in the alert box. How do I return the text "name posted was: .... " back to the view on a successful post?

Also for exceptions when I added this line to the action

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult jQueryPost(IndexVM vm)
{
    IndexVM _vm = vm;
    throw new Exception("custom error string from action");
    return Json("name posted was: " + _vm.Name);
}

I get the message 'error: Internal Server error'. I want to return the text of the message in the error like so: 'error: custom error string from action' what is the way to do that?

Thanks

Chamika Sandamal · Accepted Answer · 2013-06-27T06:30:34.090

2

Try changing you code like this,

error: function (xhr, status, error) {
    alert('error: ' + xhr.statusTexterror);
},
success: function (response) {
    alert('resp: ' + response);
}

Update

Following are the properties/ methods in xhr

readyState
status
statusText
responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
setRequestHeader(name, value) which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
getAllResponseHeaders()
getResponseHeader()
statusCode()
abort()

edited Jun 27 '13 at 06:30

answered Jun 26 '13 at 17:11

Chamika Sandamal

23,565
5
63
86

thanks will try that out. where can I see a list of properties available under xhr? – user20358 Jun 27 '13 at 06:20
Thanks. I am getting the response now. but the error is still not coming. I get the message undefined in the alert. – user20358 Jul 17 '13 at 15:12

score 2 · Answer 2 · edited May 23 '17 at 11:50

If you just throw exceptions in controller actions like that, there isn't a friendly way to get them come back to the front-end. If you notice, you will end up with page html from the default template for exceptions.

On another note, I don't believe this is a good practice since you are just throwing them to get a message coming back.

A good way to handle "errors" from ASP.NET MVC controllers is explained in another question.

asp-net-mvc-ajax-error-handling

jquery ajax post with error and success message returned from the server

2 Answers2