C# 如何在ASP MVC中处理重复表单字段

我有一个表格，要求用户提供他们的个人信息和家庭成员。
“家庭成员”部分的字段重复。
我的问题是，处理此类重复表单的最佳实践是什么？
我目前使用AJAX重复表单，但如何从这些重复字段收集数据？

因为有人问我如何重复表格，我是这样做的： AJAX调用

$(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");
}

---

解决方案之一是将隐藏字段和控件名组合起来

步骤：

使用隐藏字段将计数保留为行数

创建名为text\u relationship\u 1（第一行）和text\u relationship\u 2（第二行）的控件，依此类推

以相同的方式生成其他控件

增加和减少隐藏字段值，以便在发布值时可以知道用户添加的行数

在您的操作中，使用

FormCollection

循环隐藏字段编号，并从

FormCollection

假设我创建了3行，那么我可以创建一个如下所示的操作

public ActionResult SomeActionMethod(FormCollection formCollection, string hid)
{
    for(int i=1;i<hid;i++)
    {
        var relationId="text_relation_"+i;
        var firstrealtion=formCollection[relationId];
        ...
    }
}

public ActionResult SomeActionMethod（FormCollection-FormCollection，string-hid）
{
对于（inti=1；i这是一些关于如何在MVC中使用适当的模型绑定的框架代码。您需要编写一些JS来删除/添加新行

模型

看法

您不需要任何额外的Ajax请求，因为您可以使用已有的和标准的
特性

只需将
[]
附加到所添加表单的名称中，表单提交后，您的HTTP请求中就会出现一个数组，而不是一个值：

<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />



在本例中，您将得到一个数组
关系
和一个数组
全名
，这两个数组都包含您的数据集。
您可以分享您的代码吗？如何重复表单字段？我搜索了这个确切的问题，但没有找到解决方案。您是如何处理这个问题的，使用javascript还是在每次新创建时发帖？如果您使用javascript，您会这样做吗您使用jQuery？请查看。大多数答案都很接近，但它们都对许多事情做出了假设。如果您发布您的模型，最重要的是发布您的视图（main和
addfamilyform
），这将非常有帮助。除了你不知道与哪个全名匹配的关系。你确定吗？我希望它们按照它们出现的相同顺序被填写。但即使如此，你也可以只添加实际索引而不是空括号。它们确实会按照它们出现的顺序被添加到帖子中。但是我认为依赖于它是危险的考虑到模型绑定器并不能保证这种排序。啊，好吧，这是一个重要的注意事项，因为我只在静态HTML和PHP中使用了它。这是最接近解决方案的答案。我认为如果你能提供一些关于“模板”的详细信息，会有很大帮助用于添加新的家庭成员。我曾经处理web表单。对于MVC上的复杂内容，我们仍然需要做一些回避的事情。还要感谢您提供的解决方案。这太棒了！IMO的最佳解决方案
<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>
    }
}

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>"));
});

<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />