Question

我目前正在开发ASP.NET MVC 4.5应用程序。我希望使用List<T>在按钮单击时动态地向@Html.EditorFor添加对象，并使用表单提交将数据发送到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生成表单控件与您之前生成的相同。假设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是索引器的值）以绑定非连续索引器，如{{3}中所述}。

使用EditorFor()方法在动态添加新集合项的情况下不起作用，除非您在添加时使用javascript更新name属性中的索引器的值。

解决方案包括使用javascript MVVM框架（如Model Binding To A List），使用BeginCollectionItem()帮助程序，或使用客户端模板和javascript动态添加新表单控件。后两个选项在knockout中讨论，使用BeginCollectionItem()的更完整示例显示在this answer中。

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

1 个答案: