asp.net-mvc-4 – 将复杂的viewmodel发布到控制器

我试图掌握Knockout(2.2.0)背后的概念.
由于我正在使用ASP.NET MVC 4,我想我可以遵循一个具有“复杂”视图模型(master-details)的示例.

我唯一能找到的就是MvcMusicStore.

代码很容易阅读,我已经想出如何从服务器读取视图模型并在客户端上构建视图模型.

这是我的C#ViewModel：

public class Person
{
    public Person()
    {
        this.Phones = new List<Phone>();
    }
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Age { get; set; }

    public IList<Phone> Phones { get; set; }
}

public class Phone
{
    public string Model { get; set; }
    public string Number { get; set; }
}

我的控制器将一个填充的模型返回给视图,该视图将其转换为一个挖空视图模型：

var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
var model = ko.mapping.fromJS(data);
ko.applyBindings(model);

我使用了Rob Conery使用的相同模式,上面的代码是简化版本.

这是我的看法：

@using (@Html.BeginForm("Index","Home",FormMethod.Post))
{
    <input id="Name" name="Name" type="text" data-bind="value: Name" value="" />
    <br />
    <input id="Surname" name="Surname" type="text" data-bind="value: Surname" value="" />
    <br />
    <table>
    <tbody data-bind="foreach: Phones">
        <tr>
            <td><input type="text" data-bind='value: Model' /></td>
            <td><input type="text" data-bind='value: Number' /></td>
        </tr>
    </tbody>
    </table>
    <input type="submit" value="Send" />  
}

现在,我想提交我的FORM并在我的控制器上阅读更新的视图模型.

为了达到这个目的,我使用了与MvcMusicStore相同的解决方案.
如果你看line 49 Rob试图序列化FORM：

var data = $("#orderForm").serialize();

并POST到控制器：

$.post("/orders/edit",data,callback);

我似乎无法使这个代码与我的视图模型一起工作.
我的控制器：

[HttpPost]
public JsonResult Index(Models.Person viewModel)
{
...
}

似乎无法反序列化子进程,如果调试客户端,我可以看到seralize方法也无法序列化它们.

实际上,我不明白为什么他会尝试序列化FORM.因为我们有一个由淘汰赛管理的视图模型.
有没有其他方法我可以序列化像这样的“复杂”模型并将其发布到控制器？

你认为这个解决方案(MvcMusicStore)是正确的做事还是我应该遵循其他模式？

任何帮助,将不胜感激.

UPDATE

我想我找到了一个解决方案但我必须做更多的测试.
如果我使用toJSON KO方法：

var data = ko.toJSON(model);

我可以将整个viewmodel序列化正确;然后我必须使用$.ajax POST数据

$.ajax({
    type: 'POST',dataType: 'json',contentType: 'application/json; charset=utf-8',url: "/Home/Index",data: dataToSave,success: callback,error: function (req,status,error) {
       alert("Status: " + status + " Error: " + error);
      }
});

这样一切似乎都运行正常,但是,我仍然想知道是否有任何推荐的方法.

解

Michael Berkompas和nemesv给了我有用的信息,我已经整理了一个简单的application,以防其他人感兴趣.

<tbody data-bind="foreach: Phones">
        <tr>
            <td><input type="text" data-bind="value: Model,attr: { name: 'Phones[' + $Index() + '].Model' }" /></td>
            <td><input type="text" data-bind="value: Number,attr: { name: 'Phones[' + $Index() + '].Number' }" /></td>
        </tr>
</tbody>

var model = ko.mapping.fromJS(data);

//...

$.ajax({
    type: 'POST',url: "/orders/edit",contentType: "application/json",data: ko.mapping.toJSON(model),success: callback
});