如何处理ASP MVC中的重复表单字段

Question

我有一个表格,询问用户的个人信息和他们的家庭成员.
家庭成员部分的领域正在重复.
我的问题是处理这些重复形式的最佳做法是什么？
我目前使用AJAX重复表单,但如何从这些重复字段中收集数据？

因为有人询问我如何重复形式,我这样做: AJAX Call

$(document).on('click', '.btn-add-item', function (e) {
    e.preventDefault();
    var $results = $('#results');
    $.ajax({
        url: '/AJAX/AddFamilyForm',
        type: 'post',
        success: function (data) {
            $(data).appendTo($results);
            afterAJAX();
        }
    });
});

C#代码

[HttpPost]
public PartialViewResult AddFamilyForm()
{
    if (!Request.IsAjaxRequest()) return null;
    return PartialView("_FamilyForm");
}

Answer 1

这是一些关于如何在MVC中使用正确的模型绑定的骨架代码.您需要编写一些JS才能删除/添加新行.

模型

public class MyModel
{
    public FamilyMembers[] FamilyMembers { get; set; }
}

视图

<button id="addNewFamilyMember" type="button">Add</button>
@if (Model.FamilyMembers != null)
{
    for (int i = 0; i < Model.FamilyMembers.Length; i++)
    {
        <tr>
            <td>
                <button type="button">Delete</button>
                @Html.Hidden("FamilyMembers.Index", i)
            </td>
            <td>
                @Html.TextBoxFor(m => Model.FamilyMembers[i].Relation)
            </td>
            <td>
                @Html.TextBoxFor(m => Model.FamilyMembers[i].FullName)
            </td>
        </tr>
    }
}

以下是添加新成员的代码.它动态创建html,并且由于命名约定,能够绑定到已发布的模型.time为每个添加的行提供唯一的ID,以便所有数据保持在一起.

JS(使用Jquery)

var hidden = '@Html.Hidden("FamilyMembers.Index", "{id}")';
var relationHtml = '@Html.TextBox("FamilyMembers[{id}].Relation")';
var fullNameHtml = '@Html.TextBox("FamilyMembers[{id}].FullName")';

$("#addNewFamilyMember").on("click", function () {
        var time = Date.now();

        var deleteHtml = "<button type='button'>Delete</button>";

        $("#familyMembers-table").find("tbody")
         .append($("<tr><td>" + hidden.replace("{id}", time) + deleteHtml + "</td>" +
            "<td>" + relationHtml.replace("{id}", time) + "</td>" +
            "<td>" + fullNameHtml.replace("{id}", time) + "</td></tr>"));
});