Asp.net MVC 4.5使用EditorFor，Button Click在ViewModel中將對象添加到列表

Question

我目前正在開發ASP.NET MVC 4.5應用程序。 我希望使用@Html.EditorFor在按鈕單擊時動態地向List<T>添加對象，並使用表單提交將數據發送到Controller。

但是，我的問題是，當我提交表單時，只有填充列表的第一個元素被發送到控制器。

我在視圖中添加Elements的區域如下所示：

<div id="addTarget" data-target="@Url.Action("AddTarget", "Offer")">

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

我的控制器看起來像這樣：

...

public OfferVm NewOffer { get; set; } = new OfferVm();

[HttpGet]
public ActionResult Create()
{
    // ...here I add my first initial target to OfferVm
    NewOffer.Targets.Add(new TargetVm());

    return View(NewOffer);
}

public ActionResult AddTarget()
{
    // ...here I add a target to my NewOffer
    NewOffer.Targets.Add(new TargetVm());
    return PartialView("~/Views/Shared/EditorTemplates/TargetVm.cshtml");
}

[HttpPost]
public ActionResult Create(OfferVm offerVM)
{
   //... here only 1 target is in my offerVM
}

我的OfferVm類看起來像這樣：

public class OfferVm
{
    public OfferVm()
    {
        this.Targets = new List<TargetVm>();
    }

    public List<TargetVm> Targets { get; set; }
}

您是否知道如何在我的NewOffer.Targets列表中添加新目標，並在發布表單時獲取控制器中的數據？

Answer 1

只有您的集合中的第一個TargetVm被綁定在POST方法中的原因是，您的AddTarget()方法調用添加新項目的方法是生成表單控件，其name與您之前生成的name相同。 假設TargetVm有一個名為ID的屬性，那么你有多個元素

<input ... name="Targets[0].ID" ... />

並且DefaultModelBinder僅綁定請求中的第一個名稱/值對，並忽略任何后續重復的名稱。 為了綁定到集合，您的name屬性需要具有從零開始並且是連續的索引器。

<input ... name="Targets[0].ID" ... /> // first TargetVM
<input ... name="Targets[1].ID" ... /> // second TargetVM
<input ... name="Targets[2].ID" ... /> // third TargetVM

請注意，您還可以為集合中的每個項目添加額外輸入 - <input type="hidden" name="Targets.Index value="xx" /> （其中xx是索引器的值）綁定非連續在模型綁定到列表中討論的索引器。

在動態添加新集合項的情況下，使用EditorFor()方法將不起作用，除非您在添加時使用javascript更新name屬性中的索引器的值。

解決方案包括使用javascript MVVM框架（如knockout） ，使用BeginCollectionItem()幫助程序，或使用客戶端模板和javascript動態添加新的表單控件。 后兩個選項中討論該答案 ，並使用一個更完整的示例BeginCollectionItem()中示出這樣的回答 。