How can I bind data to two complex type parameters of Action method by Ajax POST

Question

So far I have never had the need to send data from ajax to two or more complex type parameters in the server method.

What I am trying to achieve is if I had this action on my controller:

[HttpPost]
[Authorize]
public virtual ActionResult SubmitData(Person myPerson, Chair myChair)
{
//..
}

where Person and Chair are complex types, I want to be able to send data from ajax that is going to bind properly to myPerson and myChair. Something like this:

var personData      = { 'Name': Steve, 'Age': 35};
var chairData       = {'NumberOfLegs' : 3, 'Color' : red};

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: myUrl,
        data: {'myPerson':personData, 'myChair':chairData}
    }); 

I tried so, but it just wont work. Can you help me with that? The call goes to the action but with null values for both arguments.

Answer 1

I have modified the ajax call to use JSON.stringify the parameters works well now.

var personData      = { 'Name': Steve, 'Age': 35};
var chairData       = {'NumberOfLegs' : 3, 'Color' : red};

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: myUrl,
    data: JSON.stringify({'myPerson':personData, 'myChair':chairData})
});