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

发布时间：2020-12-15 03:47:18 所属栏目：百科来源：网络整理

导读：我有一个表单要求用户的个人信息和他们的家人. 家庭成员部分的领域正在重复. 我的问题是处理这些重复表格的最佳做法是什么？我目前使用 AJAX重复表单,但是如何从这些重复字段收集数据？因为有人问我如何重复形式,我这样做： AJAX电话 $(document).on('clic

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

解决方法

这是一些关于如何在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,并且由于命名约定能够绑定到发布的模型.时间给每个添加的行一个唯一的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>"));
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!