Question

我一直在尝试按照Knockout.js的教程来在我的视图中渲染表格。我的控制器正在检索记录列表作为IEnumerable类型并发送到视图。我正在尝试让Knockout映射工作以在HTML表格中显示我的记录。

我的模型看起来像：

public class ImportItem
{
    public string LName { get; set; }
    public string FName { get; set; }
    public string HPhone { get; set; }
    public string EMailAddress { get; set; }
    public string OtherPhone { get; set; }
}

我似乎无法将IEnumerable传递给View并获得一个只显示LName和FName的简单表。有没有人有任何使用我可以查看的击倒映射的示例代码？

解决方案

在我的观点的顶部，我添加了：

@model IEnumerable<MyProject.Models.ImportItem>
@{    
    var jsonData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
}

我的javascript：

$(function () {
        var viewModelJSON = ko.mapping.fromJSON('@Html.Raw(jsonData)');

        ko.applyBindings(viewModelJSON);
    });

我的html绑定， $ data 成为引用未命名数组的关键：

<table>
  <thead><tr>
    <th>Last Name</th>
  </tr></thead>
  <tbody data-bind="foreach: $data">
    <tr>
      <td data-bind="text: LName"></td>
    </tr>    
  </tbody>
</table>

Answer 1

映射插件用于从javascript（JSON）对象进行映射。你可以做的是在控制器中，序列化你需要发送到JSON字符串的所有数据，并将其设置为你发送到视图的模型的属性：

public class MyModel
{
    public string JsonData { get; set; }
}

生成数据后，您可以使用序列化程序（许多存在，在下面的示例中我使用Json.NET）将其转换为JSON字符串。

model.JsonData = JsonConvert.SerializeObject(importItems);

然后在您的视图中，您可以使用映射插件映射您的JSON对象，使用json2.js解析字符串并将其转换为JSON。

<script type="text/javascript">
    var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(Model.JsonData)'));
    ko.applyBindings(viewModel);
</script>

或者，您可以将IEnumerable模型以与问题相同的方式发送到视图，并在执行javascript解析和映射之前在视图中（而不是在控制器中）使用Razor序列化它们。如果您想尽可能严格遵循MVC模式，这可能是更好的方法。

所以在<script>块之前，你可以打开一块剃刀代码并声明一个变量来保存序列化的IEnumerable，所以像这样：

@{
    string jsonData = JsonConvert.SerializeObject(Model);
}

然后在javascript块中：

var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(jsonData)'));

要了解要将data-bind="foreach ..."标记绑定到哪些属性，您可能需要在javascript中进行一些调试以检查viewModel对象，并查看映射插件如何映射您的IEnumerable<ImportItems>。我只用一个模型做过这个，所以我真的不确定会发生什么。

MVC 4淘汰表列表

1 个答案: