如何处理 ASP MVC 中的重复表单字段 [英] How to handle repeating form fields in ASP MVC

问题描述

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

I have a form which asks users for their personal info and their family members.
fields of the family members section is repeating.
my question is what is best practice to handle these kind of repeating forms?
I currently use AJAX to repeat forms but how to collect data from these repeating fields?

因为有人问我如何重复表格，我这样做: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");
}

推荐答案

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

This is some skeleton code on how to get this to work with proper model-binding in MVC. You'll need to write some JS to be able to delete/add new rows.

型号

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，以便所有数据保持在一起.

Below is the code for adding a new member. It creates html dynamically and is able to bind to the posted model because of naming conventions. time gives each added row a unique id so all the data stays together.

JS(使用 Jquery)

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

这篇关于如何处理 ASP MVC 中的重复表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！