如何使用Razor在主视图viewmodel中保存部分视图viewmodel项？

Question

这可能是一个棘手的问题，但在这里。

假设我有一个主视图，我们称之为MainView.cshtml 。

现在， MainView.cshtml有一个名为MainViewModel.cs的专用ViewModel，它包含一个变量Model.ExampleItems ，它是ExampleItem类的IEnumerable。

现在让我说我也有一个名为_PartialView.cshtml的局部视图，其ViewModel只是ExampleItem 。

好的，这就是我被困住的地方。 MainView.cshtml可以动态调用_PartialView.cshtml以便用户可以创建一个新的ExampleItem 。 如何将每个用户创建的ExampleItem保存到MainViewModel的IEnumerable的ExampleItems？

这是一些示例代码

MainView.cshtml

@model Models.ViewModels.MainViewModel

@foreach (var item in Model.ExampleItems)
{
   await Html.RenderPartialAsync("_PartialView", item);
}

<button id="AddExampleItem" type="button" class="btn btn-primary">Add Example Item</button>

_PartialView.cshtml

@model Models.ExampleItem

<input asp-for="VariableOne" />
<input asp-for="VariableTwo" />
<input asp-for="VariableThree" />

如何将^^^保存到原始的Model.ExampleItems ？

Answer 1

你有两条前进的道路。 无论哪种方式，为了绑定发布的ExampleItem ，表单字段必须以ExampleItems[N].Property格式命名。 所以，要做到这一点，你可以做到：

1. 使用for循环，而不是foreach并传递HtmlFieldPrefix ：

    @foreach (var i = 0; i < Model.ExampleItems; i++) { var viewData = new ViewDataDictionary(ViewData); viewData.TemplateInfo.HtmlFieldPrefix = "ExampleItems[" + i.ToString + "]"; await Html.RenderPartialAsync("_PartialView", Model.ExampleItems[i]); } 

   您还需要使ExampleItems成为List<ExampleItem>而不是IEnumerable<ExampleItem>否则您将引发两次枚举异常（count然后for循环）。

2. 为ExampleItem创建一个编辑器模板，然后使用EditorFor 。 只需在~/Views/Shared/EditorTemplates/ExampleItem.cshtml创建一个视图，然后将部分代码放在那里。 然后在主视图中你会做：

    @Html.EditorFor(m => m.ExampleItems) 

   Razor将智能地确定您将其传递给集合并为集合中的每个项目呈现编辑器模板。 此外，重要的是，它将具有集合的完整上下文，因此它将使用适当的名称前缀，以便所有内容在帖子上正确绑定。