Im using knockout with MVC. Im trying to pass an observable array of objects from knockout back to my MVC controller action for saving to the database. If I pass the Array from knockout over to my controller action via ko.toJSON(viewModel.ArrayName) it es back as null in my controller parameter. If I try to pass it to MVC via ko.toJS(viewModel.ArrayName) it has the correct number of items but the data is null for some reason. Any help on how to do this would be greeatly appreciated. Thanks!

My JQuery Data Retrieval Method:

var dataService = {};
var viewModel;

$(document).ready(function () {
    dataService.getAccessLevelList();
})

dataService.getAccessLevelList = function () {
    $.post('/DataService/GetAccessLevelList', null, function (data) {
        viewModel = ko.mapping.fromJS(data); 
        ko.applyBindings(viewModel);
    });
}

This is the problem method:

updateAccessLevels = function () {
    $.post('/DataService/UpdateAccessLevels', { accessLevels: ko.toJSON(viewModel.AccessLevels) }, function (status) {
        alert(status);
    });
}

My MVC Controller Data Retrieval action:

    [HttpPost]
    public ActionResult GetAccessLevelList()
    {
        FacilityAccessViewModel viewModel = new FacilityAccessViewModel();
        viewModel.AccessLevels = unitOfWork.AccessLevelRepository.Get().ToList();
        return Json(viewModel);
    }

The parameter is ing back NULL or with NULL data when trying to pass it in from Knockout on this controller method.

    [HttpPost]
    public ActionResult UpdateAccessLevels(List<AccessLevel> accessLevels)
    {
        try
        {
            foreach (AccessLevel record in accessLevels)
            {
                unitOfWork.AccessLevelRepository.Update(record);
            }

            unitOfWork.Save();
            return Json("SUCCESS");
        }
        catch (Exception ex)
        {
            return Json(ex.ToString());
        }
    }

Below is the JSON data shown via fiddler thats being posted to my MVC controller action when i pass in { accessLevels: ko.toJSON(viewModel.AccessLevels) } the controller parameter is ing in null using this

[{"Access":[],"Id":1,"AccessLevelDesc":"TEST222"},{"Access":[],"Id":2,"AccessLevelDesc":"TEST222"}]

Below is the JS data shown via fiddler thats being posted to my MVC controller action when i pass in { accessLevels: ko.toJS(viewModel.AccessLevels) }, in this case the list has two members as expected, but the data is all null in the properties

accessLevels[0][Id] 1
accessLevels[0][AccessLevelDesc]    TEST222
accessLevels[1][Id] 2
accessLevels[1][AccessLevelDesc]    TEST222

If I pass in a single object to my controller it works just fine, but I cant seem to figure out the proper way to post an array of objects to my controller from an obervablearray back to a POCO entity.

Im using knockout with MVC. Im trying to pass an observable array of objects from knockout back to my MVC controller action for saving to the database. If I pass the Array from knockout over to my controller action via ko.toJSON(viewModel.ArrayName) it es back as null in my controller parameter. If I try to pass it to MVC via ko.toJS(viewModel.ArrayName) it has the correct number of items but the data is null for some reason. Any help on how to do this would be greeatly appreciated. Thanks!

My JQuery Data Retrieval Method:

var dataService = {};
var viewModel;

$(document).ready(function () {
    dataService.getAccessLevelList();
})

dataService.getAccessLevelList = function () {
    $.post('/DataService/GetAccessLevelList', null, function (data) {
        viewModel = ko.mapping.fromJS(data); 
        ko.applyBindings(viewModel);
    });
}

This is the problem method:

updateAccessLevels = function () {
    $.post('/DataService/UpdateAccessLevels', { accessLevels: ko.toJSON(viewModel.AccessLevels) }, function (status) {
        alert(status);
    });
}

My MVC Controller Data Retrieval action:

    [HttpPost]
    public ActionResult GetAccessLevelList()
    {
        FacilityAccessViewModel viewModel = new FacilityAccessViewModel();
        viewModel.AccessLevels = unitOfWork.AccessLevelRepository.Get().ToList();
        return Json(viewModel);
    }

The parameter is ing back NULL or with NULL data when trying to pass it in from Knockout on this controller method.

    [HttpPost]
    public ActionResult UpdateAccessLevels(List<AccessLevel> accessLevels)
    {
        try
        {
            foreach (AccessLevel record in accessLevels)
            {
                unitOfWork.AccessLevelRepository.Update(record);
            }

            unitOfWork.Save();
            return Json("SUCCESS");
        }
        catch (Exception ex)
        {
            return Json(ex.ToString());
        }
    }

Below is the JSON data shown via fiddler thats being posted to my MVC controller action when i pass in { accessLevels: ko.toJSON(viewModel.AccessLevels) } the controller parameter is ing in null using this

[{"Access":[],"Id":1,"AccessLevelDesc":"TEST222"},{"Access":[],"Id":2,"AccessLevelDesc":"TEST222"}]

Below is the JS data shown via fiddler thats being posted to my MVC controller action when i pass in { accessLevels: ko.toJS(viewModel.AccessLevels) }, in this case the list has two members as expected, but the data is all null in the properties

accessLevels[0][Id] 1
accessLevels[0][AccessLevelDesc]    TEST222
accessLevels[1][Id] 2
accessLevels[1][AccessLevelDesc]    TEST222

If I pass in a single object to my controller it works just fine, but I cant seem to figure out the proper way to post an array of objects to my controller from an obervablearray back to a POCO entity.

• javascript
• jquery
• asp-mvc
• knockout.js

• 1 What is the shape of the JSON that is being posted? Either use the debugger to get this or use Fiddler to capture it, then update your post with this information. Thanks! – Brian Ball Commented Oct 11, 2012 at 19:09
• Edited my questions above with the requested information. – ccorrin Commented Oct 11, 2012 at 22:15
• I don't know how ASP handles the mappings but you are passing in a string to your post (ko.toJSON() returns a string). Shouldn't that be an array? Shouldn't you be using ko.toJS()? – Jeff Mercado Commented Oct 12, 2012 at 0:21
• Have you tried IEnumerable<AccessLevel> accessLevels? – Kyeotic Commented Oct 12, 2012 at 2:50
• If I use ko.toKS the correct number of items e through in the parameter of the MVC action, however their members are all null for some reason. – ccorrin Commented Oct 12, 2012 at 16:40

1 Answer 1

Try sending it as a JSON request by specifying the correct request Content-Type header:

updateAccessLevels = function () {
    $.ajax({
        url: '/DataService/UpdateAccessLevels', 
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: ko.toJSON(viewModel.AccessLevels),
        success: function(status) {
            alert(status);
        }
    });
};