javascript - 将项目动态添加到 View 中并发回 Controller (ASP.NET MVC 4)

Question

我有一个带有模型的 ASP.NET MVC 4 应用程序，其中包含和集合(IEnumerable<T> 或 IList<T>)，即:

class MyModel
{
  public int Foo { get; set; }
  public IList<Item> Bar { get; set; }
}

class Item
{
  public string Baz { get; set; }
}

然后我使用经典 @for... 渲染 View 中的数据, @Html.EditorFor...广告等等。现在需要在客户端添加动态添加新项目，然后将其发回服务器。

我正在寻找一个简单的解决方案来处理添加(在 JavaScript 中)，也就是不手动创建所有输入等。可能以某种方式从编辑器模板 View 中获取它。并添加它的方式，当表单提交回服务器时，模型绑定(bind)器将能够正确创建 IList<T>集合，也就是对输入名称的一些智能处理。我读了很多文章，但没有什么是容易和可靠地工作的(没有神奇的字符串，如集合变量名称、服务器的 AJAX 回调，...)。

到目前为止this看起来很有希望，但我宁愿依赖服务器上的渲染(预先知道的项目)。

Answer 1

我不确定“集合变量名称”是什么意思，我的解决方案可能是您注意到的一种魔法。

我的解决方案基于复制现有的元素编辑器并通过 Javascript 更改输入名称。

首先，我们需要标记我们的编辑器。这是用于收集的表单输出编辑器的代码

        @for (var i = 0; i < Model.Count; i++)
        {
            <div class="contact-card">
                @Html.LabelFor(c => Model[i].FirstName, "First Name")
                @Html.TextBoxFor(c => Model[i].FirstName)
                <br />
                @Html.LabelFor(c => Model[i].LastName, "Last Name")
                @Html.TextBoxFor(c => Model[i].LastName)
                <br />
                @Html.LabelFor(c => Model[i].Email, "Email")
                @Html.TextBoxFor(c => Model[i].Email)
                <br />
                @Html.LabelFor(c => Model[i].Phone, "Phone")
                @Html.TextBoxFor(c => Model[i].Phone)
                <hr />
            </div>

        }

我们的编辑器被放置在类 contact-card 的 div 中。在呈现时，ASP.NET MVC 给出的名称如 [0].FirstName、[0].LastName ... [22].FirstName , [22].LastName 到用作属性编辑器的输入。在提交时，Model Binder 将其转换为基于索引和属性名称的实体集合。

接下来我们创建 javascript 函数来复制最后一个编辑器并将括号中的索引增加 1。提交时它会向集合添加额外的元素:

var lastContent = $("#contact-form .contact-card").last().clone();
$("#contact-form .contact-card").last().after(lastContent);

$("#contact-form .contact-card")
    .last()
    .find("input")
    .each(function () {
        var currentName = $(this).attr("name");
        var regex = /\[([0-9])\]/;
        var newName = currentName.replace(regex, '[' + (parseInt(currentName.match(regex)[1]) + 1) + ']');
        $(this).val('');
        $(this).attr('name', newName);
    });

瞧!提交后，我们将再获得一个元素!