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.');
    }
});