MVC 4 淘汰赛表列表

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 传递给视图，甚至无法获得一个仅显示 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>。我只用一个模型做过这个，所以我真的不确定会发生什么。