MVC model binder issues when posting data from knockout - asp.net-mvc-4

Question

I have a knockout model that I'm trying to post to an MVC4 controller. A simplified version looks like this:
var ItemModel = function (id, name) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
};
var Entry = function () {
var self = this;
self.Id = ko.observable();
self.areas = ko.observableArray([]);
};
var EntryModel = function () {
var self = this;
self.entry = new Entry();
self.save = function () {
$.post("/Edit", ko.toJS(self.entry), function (data) {
...
})};
};
};
If I add two areas to my model, like this:
viewModel.entry.areas.push(new ItemModel(1, "A"));
viewModel.entry.areas.push(new ItemModel(2, "B"));
and post it using viewModel.save I get two areas from the model binder, but no data in them (i.e. id = 0, name = "").
After some research I found that I'm posting data like this:
id = 1
name = test
area[0][id] = 1
area[0][name] = "A"
area[1][id] = 2
area[1][name] = "B"
and that MVC expects this:
id = 1
name = test
area[0].id = 1
area[0].name = "A"
area[1].id = 2
area[1].name = "B"
How do I get this posted as expected?

Answer 1

Your model contains the array so you have to stringify your model and send the resultant string to the controller. You can try this:
var EntryModel = function () {
var self = this;
self.entry = new Entry();
//toJSON function produce the JSON string representing entry model
var dataToSend = ko.toJSON(self.entry);
self.save = function () {
$.post("/Edit", dataToSend, function (data) {
...
})};
};
};