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