Model binding is binding my json array, but not the values

Question

I am using ASP.NET MVC 3 and I'm trying to model bind a simple json array to a List<JsonPositions> . JsonPositions is a custom object with the same properties as the json objects in the array.

Here is what my array looks like on the client:

var widgetPositions = [
    { col: 5, row: 1, id: 2 },
    { col: 4, row: 5: id: 40 }
];

$.ajax({
    url: 'the url',
    data: { positions: widgetPositions },
    success: function () {
        alert('Save successful.');
    },
    error: function () {
        alert('An error occurred while trying to update the widget positions.');
    }
});

This code appears to be working correctly when the request is examined in Chrome.

In the controller we have the following action method:

public void UpdatePositions(List<JsonPosition> positions)
{
    // debugging here
}

When I examine the widgetPositions list it does have two items just like the json array, but the objects' properties do not match the values from the objects on the client. Here is what the object JsonPosition looks like:

public class JsonPosition
{
    public int id { get; set; }
    public int col { get; set; }
    public int row { get; set; }
}

Thanks for any help you can offer :)

Answer 1

I think you may need to add the content-type:

$.ajax({
    url: 'the url',
    data: JSON.stringify({ positions: widgetPositions }),
    contentType: 'application/json',
    success: function () {
        alert('Save successful.');
    },
    error: function () {
        alert('An error occurred while trying to update the widget positions.');
    }
});

Also you're not specifying a request type, so it will do a GET by default, do you mean to be doing a POST? That would make it

$.ajax({
    url: 'the url',
    type: 'POST',
    data: JSON.stringify({ positions: widgetPositions }),
    contentType: 'application/json',
    success: function () {
        alert('Save successful.');
    },
    error: function () {
        alert('An error occurred while trying to update the widget positions.');
    }
});

Answer 2

You could send them as a JSON object:

var widgetPositions = [
    { col: 5, row: 1, id: 2 },
    { col: 4, row: 5: id: 40 }
];

$.ajax({
    url: 'the url',
    data: JSON.stringify({ positions: widgetPositions }),
    contentType: 'application/json',
    success: function () {
        alert('Save successful.');
    },
    error: function () {
        alert('An error occurred while trying to update the widget positions.');
    }
});

Things to notice that you hadn't in your code and which will make it work:

• contentType: 'application/json', - set the proper request content type header
• data: JSON.stringify({ positions: widgetPositions }) - send a JSON request

Now you will happily get all you need here:

public void UpdatePositions(List<JsonPosition> positions)
{
    // debugging here
}

Remark: The JSON.stringify method is natively defined in all modern browsers (even in IE8, even if this is far from being a modern browser). But if you need to support some prehistoric browsers you could include the json2.js script to your page which will check whether the browser natively supports this method and if not provide an implementation.