如果單個部分需要多個對象，如何從視圖中動態添加項目到我的集合？

Question

我有一個在我的視圖中顯示的項目列表。 我需要能夠通過添加按鈕從UI手動添加項目到此列表。 我知道我需要使用javascript加載局部視圖以顯示新項目。

@{var count = 0;}
@foreach (var dx in Model.Patient.DxList)
{    
    <div class="form-field">
        <label>@(++count)</label>
        @Html.HiddenFor(d => dx.DxIndex)
        @Html.TextBoxFor(d => dx.Dx, new { @class = "small" })
        <span class="description">@((dx.DxRef != null) ? dx.DxRef.Title : "")</span>
        @Html.DropDownListFor(d=> dx.Indicator, new SelectList(Model.Codes, "Value", "Description", dx.Indicator), "Please select", new { @class = "" })
    </div>
}

但是，因為我的項目包含TextBox和DropDownList（使用代碼填充），我的部分視圖是否也需要ViewModel？ 不僅要包含Dx，還要包含創建列表的相應代碼列表？

public class DxSingleViewModel
{
    public Dx Dx { get; set; }
    public List<Code> Codes { get; set; }
}

不知道這是否是一般方法，或者我是否偏離基礎。

Answer 1

你應該將一個項目的渲染分離到一個單獨的局部視圖/編輯器模板，並在foreach循環中調用它，這樣你就可以在一個地方定義一個項目的標記：

@foreach (var dx in Model.Patient.DxList)
{
    @Html.EditorFor(m => dx)
}

然后你的AddNewItem動作可以返回一個只調用@Html.EditorForModel()的局部視圖

在動態添加和刪除行時，您應該將自己的索引（例如guid字符串）嵌入到項目中以避免沖突。 看一下這篇很棒的文章，它解釋了如何使用自定義的html幫助程序來實現它： http ： //blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2 -樣式/

您的EditorTemplate將如下所示：

@using (Html.BeginCollectionItem("DxList"))
{
    @Html.TextBoxFor(d => dx.Dx, new { @class = "small" })
    ....
}

關於viewmodel是否應該包含下拉列表的問題：viewmodel應該包含呈現視圖所需的每個數據。 所以我會說是的，它是將列表傳遞給視圖的好地方。

因為你也可以在viewbag中傳遞它，但我是強類型數據包的朋友，所以我更喜歡viewmodel。

Answer 2

你可以嘗試這種方法。 它有一個缺點，你必須記住屬性的名稱（路徑），以呈現自動綁定的正確輸入名稱（因此您無法使用重構工具輕松更改它）。

視圖

@foreach (int i=0;i < Model.Patient.DxList.Count;i++)
{
    @{Html.RenderPartial("PartialDx", Model.Patient.DxList[i] ,new ViewDataDictionary() { {"count",i}});}
}

PartialView - 類型為DxSingleViewModel強類型局部視圖

@{string collectionName = string.Format("Patient.DxList[{0}].", ViewBag.count);}

<div class="form-field">
   <label>@{ViewBag.count + 1}</label>
   @Html.Hidden(collectionName+"Dx.DxIndex", Model.Dx.DxIndex)

</div>