JQuery ajax call to MVC action always returns an error when there isn't one

Question

This is an MVC3 app. I have the following javascript call to my action:

 function editDescription(docId,fileName, fileDescription) {
    $.ajax({
         type: "POST",
         url: "/OrderDetail/LoadModelData",
         contentType: "application/json; charset=utf-8",
         data: "{'id': '"+docId +"', 'filename': '"+fileName+"', 'description': '"+fileDescription+"'}",
         dataType: "json",
         success: function (result) {
         alert("ok: "+ result.d);
         },
         error: function (result) {
             alert('Oh no: '+ result.responseText);
         }
     });

Heres my action:

    [HttpPost]
    public string LoadModelData(string id, string filename, string description)
    {
        return filename;
    }

I run the code, the action gets called with the parameters, nothing is null, but the error function gets called every time. So the alert box with 'Oh no' in it appears every time, but the string being returned from the action is correct. If the filename is test.pdf the error alert box says

    'Oh No: test.pdf'. 

I looked in Firebug and there are no errors. Why isn't the success function being called despite the fact there are no errors?

Answer 1

You are expecting (returning) a string value from your action method. Why do you need to specify the datatype as json then ? Remove that and see what happens. And there is no d property from the response ! so just use result in the alert.

$.ajax({
         type: "POST",
         url: "/OrderDetail/LoadModelData",
         contentType:"application/json; charset=utf-8",         
         data: JSON.stringify({ 
                             id: docId, 
                             filename: fileName, 
                             description: fileDescription 
                            }),
         success: function (result) {
         alert("ok: "+ result);
         },
         error: function (result) {
             alert('Oh no: '+ result.responseText);
         }
     });

the datatype property tells the server that what kind of content the client is expecting back as the result.

EDIT : As Darin mentioned, Please Use the JSON.stringify method to build the JSON request. Updating this answer to include correct way for future visitors.

Answer 2

Never build JSON with string manipulations:

data: "{'id': '"+docId +"', 'filename': '"+fileName+"', 'description': '"+fileDescription+"'}",

That's absolutely horrible and wrong. You are not encoding anything. Suffice a quote in the description and everything will break. Always use a JSON parser when manipulating JSON

Like this:

$.ajax({
     type: "POST",
     url: "/OrderDetail/LoadModelData",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ 
         id: docId, 
         filename: fileName, 
         description: fileDescription 
     }),
     success: function (result) {
         alert("ok: "+ result.filename);
     },
     error: function (result) {
         alert('Oh no: '+ result.responseText);
     }
 });

The JSON.stringify method is natively built-in modern browsers. If you need to support legacy browsers you could include the json2.js script

Another mistake is your controller action signature. In ASP.NET MVC controller actions must return ActionResults, not strings:

[HttpPost]
public ActionResult LoadModelData(string id, string filename, string description)
{
    return Json(new { filename = filename });
}