5

我试图掌握Knockout (2.2.0)背后的概念。
由于我正在使用ASP.NET MVC 4，我想我可以遵循一个具有“复杂”视图模型（主细节）的示例。

我唯一能找到的是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 中找到的相同解决方案。
如果您查看第 49 行Rob 尝试序列化 FORM：

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

并发布到控制器：

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

我似乎无法使此代码与我的视图模型一起使用。我的控制器：

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

似乎无法反序列化孩子，如果调试客户端，我可以看到该seralize方法也无法序列化它们。

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

您认为该解决方案（MvcMusicStore）是否正确地做事，还是我应该遵循其他模式？

任何帮助，将不胜感激。

更新

我想我已经找到了解决方案，但我必须做更多的测试。
如果我使用toJSON KO 方法：

var data = ko.toJSON(model);

我可以正确序列化整个视图模型；然后我必须使用 $.ajax 发布数据

$.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 为我提供了有用的信息，我还编写了一个简单的应用程序，以防其他人感兴趣。

4

2 回答 2

5

问题是在表格内您的input元素没有name属性。

您可以使用attr 绑定设置名称，因为 MVC 在模型绑定集合时需要特殊的名称格式，您需要编写：

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

请注意，在这种情况下您不能使用$.post，因为您需要将其指定contentType为“application/json”。

但我认为没有推荐的方法来做到这一点。$("#orderForm").serialize()（使用我提到的正确输入名称）和作品都ko.toJSON(model)有效，因为区别仅在于如何为 ajax 请求准备/编码数据。

我认为这更像是个人喜好使用哪个。在这种特殊情况下，这样做ko.toJSON(model)似乎更好，因为您不必处理 ASP.NET MVC 的特殊输入名称的生成。您可以将视图模型原样发送到服务器。并且在使用淘汰赛时感觉更自然。

于 2013-01-03T18:36:06.927 回答
1

我会选择 nemesv 的第二个选项。发布序列化的视图模型，而不是尝试使用 jQuery 序列化表单。

因为您的数据类型很复杂，并且 Asp.net MVC 无法将其转换为视图模型，所以您还需要使用此页面$.toDictionary()上解释的插件。

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

//...

$.post("/orders/edit", $.toDictionary(ko.toJS(model)), callback, "json");
于 2013-01-03T19:52:21.560 回答