Passing complex objects to Action in asp.net MVC from jquery ajax - asp.net-mvc-3

Question

I have the following domain model defined:
public class myModel {
public string Prop1 {get;set;}
public string Prop2 {get;set;}
public List<myClass> ListofStuff {get;set;}
}
public myClass {
public string Id{get;set;}
public string Name{get;set;}
}
Then I have the controller action defined as follows:
[HttpPost]
public ActionResult Save(MyModel someModel )
{
//do the saving
}
I call the above action from my JS code using jquery ajax
var someModel = { Prop1: "somevalue1",
Prop2: "someothervalue",
ListofStuff: [{Id: "11", Name:"Johnny"}, {Id:"22", Name:"Jamie"}]
};
$.ajax({
contentType: 'application/json, charset=utf-8',
type: "POST",
url: "/myController/Save",
data: JSON.stringify({someModel: someModel}),
cache: false,
dataType: "json",
success: function () {
alert('success!');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
EDITED:
When I run the above code I get error handler gets executed. I tried to installed Firebug but my FF is version 8 and it couldn't install it. So I am not sure what the error is or how to see what it is for that matter.
What am I doing wrong?

Answer 1

I resolved the issue. MyClass needed to have a parameter-less constructor in order for the binding to work properly.

Answer 2

You can use following method for this purpose.
$.postifyData = function (value) {
var result = {};
var buildResult = function (object, prefix) {
for (var key in object) {
var postKey = isFinite(key)
? (prefix != "" ? prefix : "") + "[" + key + "]"
: (prefix != "" ? prefix + "." : "") + key;
switch (typeof (object[key])) {
case "number": case "string": case "boolean":
result[postKey] = object[key];
break;
case "object":
if (object[key] != null) {
if (object[key].toUTCString) result[postKey] = object[key].toUTCString().replace("UTC", "GMT");
else buildResult(object[key], postKey != "" ? postKey : key);
}
}
}
};
buildResult(value, "");
return result;
}
And after that you can pass model like.
var someModel = new Object();
someModel.Prop1 = "Pp1";
someModel.Prop2 = "PP2";
someModel.ListofStuff = new Array();
//Use for each loop to bind list like
for (var i = 0; i < 2; i++) {
var childObj = new Object();
childObj.Id = "123" + i;
childObj.Name = "Pankaj"
someModel.ListofStuff.push(childObj);
}
$.ajax({
type: "POST",
url: "/home/test",
data: $.postifyData(someModel),
cache: false,
dataType: "json",
success: function () {
alert('success!');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
i have checked it on my own and this is working fine.