Question

我有一张表格，要求用户提供个人信息及其家人。
家庭成员部分的领域正在重复我的问题是处理这些重复形式的最佳做法是什么？我目前使用AJAX重复表单，但如何从这些重复字段中收集数据？ enter image description here

既然有人问我怎么重复形式，我这样做： 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");
}

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

Answer 2

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

步骤：

使用隐藏字段将计数保持为行数。
为第一行创建名称为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];
        ...
    }
}

Answer 3

您不需要任何额外的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都包含数据集。

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

3 个答案: