Question

I’m trying to send data to the Controller from the View. I have a fairly complex object, which contains one array and one object with values. Whatever I try, it’s null in my controller. I have inspected the data with IE9s F12, and the data is there. I do not understand what I’m doing wrong.

Code in view:

    var deletedIds = [];

    $("#spara").click(function () {
        var changedInsertedData = $("#dagbok_grid").getChangedCells('all');
        var theData = { changedInserted: changedInsertedData, deleted: deletedIds };
        $.post('@Url.Action("SaveGridData")', JSON.stringify({ data: theData }), null, 'json');
    })

the Controller:

    public void SaveGridData(DagbokGridDTO data)
    {
        System.Diagnostics.Debug.WriteLine(data.ToString());
    }

The Model/DTOs

public class DagbokGridRadDTO
{
    public string Kronika { get; set; }
    public string Region { get; set; }
    public string id { get; set; }

}

public class DagbokGridDTO
{
    public DagbokGridRadDTO[] changedInserted;
    public string[] deleted;
}

The data from IE9 F12 mode:

{"data":{"changedInserted":[{"Kronika":"No","Region":"4","id":"2"}],"deleted":["5"]}}

I thought that it is supposed to work this way, but in the controller, data.changedInserted and data.deleted is null. I’ve tried several different ways, but nothing helps.

Answer 1

Instead of:

$.post('@Url.Action("SaveGridData")', JSON.stringify({ data: theData }), null, 'json');

use:

$.ajax({
    url: '@Url.Action("SaveGridData")',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ data: theData }),
    success: function(result) {

    }   
});

Notice how the $.ajax method allows you to set the request Content-Type header to application/json which is what you are sending. The $.post method doesn’t allow you to set this header and the model binder is unable to understand your request.