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

【问题标题】：How to handle repeating form fields in ASP MVC如何处理 ASP MVC 中的重复表单字段
【发布时间】：2014-10-06 20:24:33
【问题描述】：

我有一个表单，要求用户提供他们的个人信息和他们的家庭成员。
家庭成员部分的字段正在重复。
我的问题是处理这些重复表格的最佳做法是什么？
我目前使用 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");
}

【问题讨论】：

你能分享你的代码如何重复表单字段吗？我搜索了这个确切的问题，但没有找到解决方案
您是如何处理的，使用 javascript 还是在每次新创建时回帖？如果你使用 javascript，你会使用 jQuery 吗？
查看this post from Phil Haack。
大部分答案都很接近，但他们都对很多事情做出假设。如果你能发布你的模型，最重要的是，你的观点（主要和addfamilyform），将会有很大帮助。

标签： c# asp.net asp.net-mvc asp.net-mvc-4

【解决方案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>"));
});

【讨论】：

这是最接近解决方案的答案。如果您能提供一些用于添加新家庭成员的“模板”的详细信息，我认为会很有帮助。
我曾经在网络表单上工作。仍然对于 MVC 上的复杂内容，我们必须做一些躲避的事情才能绕过。也谢谢你的解决方案
这太棒了！围绕 IMO 的最佳解决方案

【解决方案2】：

您不需要任何额外的 Ajax 请求，因为您可以使用已建立的标准 <form> 功能。

只需将[] 附加到添加的表单的名称后，一旦提交表单，您将在 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[]" />

在此示例中，您最终会得到一个数组 relation 和一个数组 fullname，两者都包含您的数据集。

【讨论】：

除非你不知道关系匹配哪个全名。
你确定吗？我希望它们按照它们出现的顺序被填写。但即使那样，你也可以只添加实际的索引而不是空括号。
它们确实按照它们出现的顺序添加到 POST 中。但是考虑到模型绑定器不能保证这种顺序，我认为依赖这种机制是危险的。
啊，好吧，那是一个重要的注意事项，因为我只将它用于静态 HTML 和 PHP。

【解决方案3】：

其中一个解决方案可以是隐藏字段和控件名称的组合。

步骤：

使用隐藏字段来记录行数。
为第一行创建名称为 text_relation_1 的控件，为第二行创建名称为 text_relation_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];
        ...
    }
}

【讨论】：