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