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

问题描述

我有要求用户输入他们的个人信息和他们的家庭成员的形式。

家庭成员部分领域在重复。

我的问题是什么是处理这些类型的重复形式的最佳做法？

我目前使用AJAX来重复形式，但如何从这些重复领域收集数据？

因为有人问我怎样重复的形式，我这样做是这样的：
AJAX呼叫

 的$（document）。在（'点击'，'.btn-添加项目，功能（E）{
    亦即preventDefault（）;
    变量$ =结果$（'＃结果'）;
    $阿贾克斯（{
        网址：'/ AJAX / AddFamilyForm'，
        类型：'后'，
        成功：功能（数据）{
            $（数据）.appendTo（$结果）;
            afterAJAX（）;
        }
    }）;
}）;
 

C＃code

  [HttpPost]
公共PartialViewResult AddFamilyForm（）
{
    如果返回NULL（Request.IsAjaxRequest（）！）;
    返回PartialView（_ FamilyForm）;
}
 

解决方案

这是如何得到这个适当的MVC模式结合工作的一些骨架code。你需要写一些JS才能够删除/添加新行。

示范

 公共类为MyModel
{
    公共FamilyMembers [] {FamilyMembers获得;组; }
}
 

查看

 ＆LT;按钮ID =addNewFamilyMember类型=按钮＆gt;添加＆LT; /按钮＆GT;
@if（Model.FamilyMembers！= NULL）
{
    的for（int i = 0; I＆LT; Model.FamilyMembers.Length;我++）
    {
        ＆所述; TR＆GT;
            ＆所述; TD＆GT;
                ＆LT;按钮式=按钮＆GT;删除＆LT; /按钮＆GT;
                @ Html.Hidden（FamilyMembers.Index我）
            ＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                @ Html.TextBoxFor（M = GT; Model.FamilyMembers [I] .Relation）
            ＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                @ Html.TextBoxFor（M = GT; Model.FamilyMembers [I] .FullName）
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    }
}
 

下面是code增加一个新成员。它动态地创建HTML并能够绑定到，因为命名约定的发布模式。 时间给每个添加的行唯一的ID，这样所有的数据保持在一起。

JS（使用Jquery）

  VAR隐藏='@ Html.Hidden（FamilyMembers.Index，（编号））;
VAR relationHtml ='@ Html.TextBox（FamilyMembers [{ID}]关联。）';
VAR fullNameHtml ='@ Html.TextBox（FamilyMembers [{ID}]全名）';$（＃addNewFamilyMember）。在（点击，函数（）{
        无功时间= Date.now（）;        VAR deleteHtml =＆LT;按钮式='按钮'＆GT;删除＆LT; /按钮＆gt;中;        $（＃familyMembers表）。找到（TBODY）
         .append（$（＆LT; TR＆GT;＆LT; TD＆gt;中+ hidden.replace（（编号），时间）+ deleteHtml +＆LT; / TD＆gt;中+
            ＆所述; TD＆gt;中+ relationHtml.replace（（编号），时间）+＆LT; / TD＆gt;中+
            ＆所述; TD＆gt;中+ fullNameHtml.replace（（编号），时间）+＆LT; / TD＆GT;＆LT; / TR＆gt;中））;
}）;
 

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?

since some one asked for how I repeat form, I do it like this: AJAX Call

$(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# code

[HttpPost]
public PartialViewResult AddFamilyForm()
{
    if (!Request.IsAjaxRequest()) return null;
    return PartialView("_FamilyForm");
}

解决方案

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.

Model

public class MyModel
{
    public FamilyMembers[] FamilyMembers { get; set; }
}

View

<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>
    }
}

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 (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屋！