How to call error function in $.ajax with c# MVC4?

Question

I have a project in MVC4 with C#. In this project, one of my controllers has a method to be called by an Ajax function:

[HttpPost]
public string EditPackage(int id, string newPkgName)
{
    try{
        //do logic here
        return "OK";
    }catch(Exception exc){
        return "An error occurred, please try later! " + exc.Message;
    }
}

This method is called by the following Ajax functions, using jQuery:

$.ajax({
    url: $(this).data('url'),
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    traditional: true,
    data: JSON.stringify({ id: id, newPkgName: newPkgName}),
    success: function () {
        location.reload(true);
        successNotification("Package edited successfuly!");
    },
    error: function (message) {
        errorNotification(message);
    }
});

The problem with this code, is that even if the server returns the return "An error occurred, please try later! " + exc.Message; message in the catch, the success function is the one always called.

In order words, I never run the error function no matter what I do.

To fix this I checked the official documentation:

http://api.jquery.com/jQuery.ajax/

However, since I am failry new to this I can't understand any of the parameters, nor how to use them effectively.

How can I create a good error message with all the possible information using Ajax, jQuery and my controller?

error func calling if response status not OK(200), but if you catch exception on server, then you return response with status OK(200) so, simple not catch exception — Grundy, Dec 02 '14 at 10:06

Rory McCrossan · Accepted Answer · 2014-12-02T10:42:06.640

6

The error part of the $.ajax call only fires if the returned status code is anything other than 200 OK. In your case you are returning a plaintext response which will therefore be 200. You can change this behaviour like this:

try {
    // do logic here
    return "OK";
}
catch (Exception exc) {
    return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Bad Request");
}

error: function (jqXHR, textStatus, errorThrown) {
    errorNotification(textStatus);
}

You can change the HttpStatusCode to whatever suits your need.

Alternatively, you can keep the 200 response and return JSON with a flag to indicate whether or not the request was successful:

[HttpPost]
public ActionResult EditPackage(int id, string newPkgName)
{
    try {
        //do logic here
        return Json(new { Success = true, Message = "OK"});
    }
    catch (Exception exc) {
        return Json(new { Success = false, Message = "An error occurred, please try later! " + exc.Message });
    }
}

Then you can remove the error handler, and check the state of the flag in your success handler:

success: function(response) {
    if (response.Success) {
        location.reload(true);
        successNotification("Package edited successfuly!");
    }
    else {
        errorNotification(response.Message); 
    }
},

edited Dec 02 '14 at 10:42

answered Dec 02 '14 at 10:05

Rory McCrossan

331,213
40
305
339

If I use the first approach, what changes do I need in my Ajax function ? – Flame_Phoenix Dec 02 '14 at 10:21
You don't need to make any changes to it. – Rory McCrossan Dec 02 '14 at 10:22
To display the information correctly my error function needs to be `error: function (jqXHR, textStatus, errorThrown )`. If you add this to your response, I will gladly accept it :D – Flame_Phoenix Dec 02 '14 at 10:39
You're right - sorry I completely forgot that. I've updated my answer. – Rory McCrossan Dec 02 '14 at 10:42
I used this `return Json(new { Success = false, Message = "An error occurred, please try later! " + exc.Message });` but it's still returning `500, Internal Server Error`, how can I use custom message? – Abhishek Pandey Sep 21 '18 at 05:46

score 1 · Answer 2 · answered Dec 02 '14 at 10:10

I do the following, it might not be the best approach but it works for what I try to do.

[HttpPost]
public ActionResult EditPackage(int id, string newPkgName)
{
    try{
        //do logic here
        return Json(new {Success = true, Message = "OK"});
    }catch(Exception exc){
        return Json(new {Success = false, Message =  "An error occurred, please try later! " + exc.Message});
    }
}

Then my Ajax looks as follows:

$.ajax({
    url: $(this).data('url'),
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    traditional: true,
    data: JSON.stringify({ id: id, newPkgName: newPkgName}),
    success: function (data) {
        if(data.Success)
        {
            location.reload(true);
            successNotification("Package edited successfuly!");
        }
        else
        {
            errorNotification(data.Message);
        }
    },
    error: function (message) {
        errorNotification(message);
    }
});

I do this so that you have the standard error catching http errors from the server, but it means you can pass a success or failure back in a way that is more useful. It also means that if your update fails for a validation reason or something you can pass that message back nicely.

FYI Your syntax for creating the anonymous object is incorrect. — Rory McCrossan, Dec 02 '14 at 10:11
So it is, I'll correct it, sorry was being spoken to at the same time as typing. — Pheonyx, Dec 02 '14 at 10:12

How to call error function in $.ajax with c# MVC4?

2 Answers2

Linked