Question

I’m aiming to build up a JSON array of mouse positions and pass them to a controller. For some reason my json is returning from the controller as undefined can anyone spot my problem?

// Attempt at declaring a JSON object
var personResults = { "answers": [] };

// Onclick I fire in values from mouse event
personResults.answers[count] = { "xpos": mouseX, "ypos": mouseY };

// AJAX Call
$.ajax({
    url: "Save",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(personResults),
    success: function (data) { alert(data.toSource()); },
    error: function (req, status, error) {
        alert("error! " + status +    error + req);
    }
});

I then receive the jsontext from my .NET MVC Controller:

public JsonResult Save(string personResults)
{
    return Json(personResults);
}

As you can see the response back to the AJAX should just be the same json I sent to it – but I’m receiving undefined values back from the server even though my json seems to be constructing Ok and I’ve tested it – it’s valid.

If I set Save to receive of type “string” I receive this alert “(new String(“”))”; if i set the save action to receive of type “JsonResult” I receive this alert:

({ContentEncoding:null, ContentType:null, Data:null, JsonRequestBehavior:1})

Am I missing something totally obvious? I just want to check that my json is being sent successfully to the controller so I can manipulate it later!

Here’s the format of my JSON:

{"answers":[
    {"xpos":293,"ypos":415},{"xpos":293,"ypos":415},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416},
    {"xpos":293,"ypos":416},{"xpos":293,"ypos":416},{"xpos":293,"ypos":416}
]}

Thanks!

Answer 1

How I understand your question you want to know how to send data (input parameters) to the action of your MVC controller which will return JsonResult back.

Your first error is that input data of the action Save should be not in JSON format. MVC in designed more to work with forms, so if you send any data to the Save action the data must be url-encoded. For example to have “Bla Bla” as input of personResults parameter of the action Save your jQuery call should be following

$.ajax({
    url: "Home/Save",
    type: "POST",
    data: "personResults=Bla+Bla",
    success: function (data) {
        alert(data); },
    error: function (req, status, error) {
        alert("error! " + status + error );
    }
});

More better not make any manual encoding of the string “Bla Bla” and use data: {personResults: "Bla Bla"} instead of data: "personResults=Bla+Bla".

If you want to send more complex data to the MVC controller you can do this but you have to convert the data to JSON and back manually. For example if you include a new action Save1:

public JsonResult Save1 (string encodedAnswers) {
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    MyData data = serializer.Deserialize<MyData> (encodedAnswers);
    return Json (data);
}

where MyData defined as

public class MyData
{
    public List<MyPosition> answers { get; set; }
}
public class MyPosition
{
    public int xpos { get; set; }
    public int ypos { get; set; }
}

(In the same way you can use DataContractJsonSerializer instead of JavaScriptSerializer.)
The corresponding JavaScript code could be following

var personResults = {"answers":[{"xpos":293, "ypos":415 },{"xpos":293, "ypos":416}]};
// or var personResults = {answers: [{xpos: 293, ypos: 415},{xpos: 293, ypos: 416}]};

$.ajax({
    url: "Home/Save1",
    type: "POST",
    data: {encodedAnswers: JSON.stringify(personResults)},
    success: function (data) {
        alert("answers[0].xpos="+data.answers[0].xpos); },
    error: function (req, status, error) {
        alert("error! " + status +    error );
    }
});