在.Net MVC 5的同一页面中为“一对多”创建视图答案

【问题标题】：Create View for "One to many" in the same page in .Net MVC 5在.Net MVC 5的同一页面中为“一对多”创建视图
【发布时间】：2015-07-10 08:56:00
【问题描述】：

我的问题是：

假设，我有一个父模型，它有许多子模型（一对多）。

父模型

public class Parent
{
     public int ID {get; set;}
     public string Name {get; set;}
     public virtual Icollection<Child> Child {get: set:}
}

儿童模型

public class Child
{
     public int ID {get; set;}
     public string Name {get; set;}
     public int ParentID {get; set;}
     public virtual Parent parent {get: set:}
}

我有一个“创建”视图（通过 ParentController），我希望用户说明他想在同一个视图中为该特定父级创建多少个子级。（点击“添加子项”并添加子项创建局部视图。

我认为这会发生的方式是，对子视图使用部分视图，并在父/创建视图中使用 ajax 调用它，然后获取输入并将其保存在父创建（发布）视图中，但是我不知道如何准确地做到这一点。

这个链接最接近我想要的，但由于某种原因它不会为我运行。

http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html

【问题讨论】：

请发表您到目前为止所做的事情？（代码明智）

标签： jquery asp.net asp.net-mvc asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

使用 AJAX 加载部分不是处理这种情况的最佳方式。特别是，在使用集合时，您的字段名称需要以ListProperty[index].Property 的格式结束，以便模型绑定器正确解释发布数据。如果您只是为Child 的实例呈现部分表单，那么您的字段名称将只是属性，而没有关于父级或正确索引上的列表属性名称的任何上下文。渲染字段现有实例时，您可以简单地使用for 循环：

@for (var i = 0; i < Model.Child.Count(); i++)
{
    @Html.EditorFor(m => m.Child[i].Name)
    ...
}

基于m.Child[i].Name 的上下文，Razor 可以生成正确的字段名称。但是，由于您是通过 JavaScript 在客户端添加新条目，因此与 Razor 无关。

因此，更好的方法是使用某种 JS 库，该库允许与您的 UI 进行数据绑定并支持模板。在大多数情况下，我使用 Knockout.js 来处理这类东西，但 Angular 或 Backbone 之类的东西也可以工作。只要使用适合你的东西。

例如，使用 Knockout，我实际上可以为我的 MVC 视图模型的 JSON 编码版本构建客户端“视图模型”JavaScript：

var data = Html.Raw(Json.Encode(Model));

var MyViewModel = function (data) {
    var self = ko.mapping.fromJS(data);

    // additional observables, etc. 

    return self;
}

var viewModel = MyViewModel(data);
ko.applyBindings(viewModel);

这样我可以实例化一个 JS 数据结构，它实际上有一个子列表，我可以添加或删除这些子列表，以动态影响页面上的 HTML。

<div data-bind="template: { name: 'ChildTemplate', foreach: Child }"></div>

<script type="text/html" id="ChildTemplate">
    <input type="text" data-bind="value: Name, attr: { name: 'Child[' + $index() + '].Name' }">
    <!-- other fields -->
</script>

然后，Knockout 会自动为列表中的每个子项呈现该模板中的所有 HTML 集合。

在如何添加新的子项、处理子项的可观察对象等方面还有更多内容，但这在很大程度上取决于您最终使用的库。我在这里真正要做的只是说明如何使用 JavaScript 将正确索引的项目动态添加到页面，基本上使用客户端视图模型和一些模板。这将比尝试使用 AJAX 拼凑一些解决方案来获取一些呈现的 HTML 更加容易和强大。

【讨论】：