如何使用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將智能地確定您將其傳遞給集合並為集合中的每個項目呈現編輯器模板。 此外，重要的是，它將具有集合的完整上下文，因此它將使用適當的名稱前綴，以便所有內容在帖子上正確綁定。