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

问题描述

这可能是一个棘手的问题，但这是可行的.

This might be a tricky question, but here it goes.

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

Let's say I have a main view and let's call it MainView.cshtml.

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

Now, MainView.cshtml has a dedicated ViewModel called MainViewModel.cs which holds a variable Model.ExampleItems which is an IEnumerable of class ExampleItem.

现在假设我还有一个名为 _PartialView.cshtml 的局部视图，其ViewModel只是 ExampleItem .

Now let's say I also have a partial view called _PartialView.cshtml whose ViewModel is just ExampleItem.

好的，这就是我要坚持的地方. MainView.cshtml 可以动态调用 _PartialView.cshtml ，以便用户可以创建新的 ExampleItem .如何将每个用户创建的 ExampleItem 保存到 MainViewModel 的IEnumerable ExampleItems?

Okay so this is where I'm stuck. MainView.cshtml can dynamically call _PartialView.cshtml so that the user can create a new ExampleItem. How do I save each user-created ExampleItem to MainViewModel's IEnumerable of 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 中?

How can I save ^^^ this into the original Model.ExampleItems?

推荐答案

此处有两条路径.无论哪种方式，为了绑定发布的 ExampleItem ，表单字段都必须以 ExampleItems [N] .Property 格式命名.因此，要做到这一点，您可以执行以下操作:

You have two paths forward here. Either way, in order to bind the posted ExampleItems, the form fields must be named in the format ExampleItems[N].Property. So, to accomplish that, you can do:

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

1. Use a for loop, rather than a foreach and pass an 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> ，否则会引发异常进行两次枚举(先计数再循环).

You'll also need to make ExampleItems a List<ExampleItem> rather than IEnumerable<ExampleItem> or you'll raise an exception for enumerating twice (count and then for loop).

为 ExampleItem 创建编辑器模板，然后使用 EditorFor .只需在〜/Views/Shared/EditorTemplates/ExampleItem.cshtml 中创建一个视图，然后在其中放置部分代码即可.然后，在您的主视图中，您只需执行以下操作:

Create an editor template for ExampleItem and then utilize EditorFor. Just create a view at ~/Views/Shared/EditorTemplates/ExampleItem.cshtml, and put your partial code there, instead. Then in your main view you would just do:

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

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

Razor will intelligently determine that you passed it a collection and render the editor template for each item in the collection. Also, importantly, it will have the full context of the collection, so it will using proper name prefixes so that everything binds correctly on post.

这篇关于如何使用Razor在主视图viewmodel中保存部分视图viewmodel项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！