我有一个可以包含多个值的表单。
例如:
Please list your dependants.
我有一个包含三个字段的字段集
- 名字,
- 姓氏,
- 出生日期
以及“添加”按钮。
我的添加按钮触发 jQuery ajax 请求,成功后将表行添加到表中
伪代码:
$.ajax({
url: myUrl,
data: myData,
success: function(){
var row = $("<tr id='...'>");
row.append("<td>").text(txtFirstName.val());
row.append("<td>").text(txtLastName.val());
row.append("<td>").text(dteDateOfBirth.val());
row.appendTo($("#myDependantsTable"));
}
...
});
这很好用。但是,现在我在两个不同的地方定义了 HTML,我的 javascript 和我的 View
IE:
<tr>
<td>@Model.FirstName</td>
<td>@Model.LastName</td>
<td>@Model.DateOfBirth</td>
</tr>
当我开始修改这些时,问题就出现了,比如在日期列上添加一个类,我需要修改代码两次。
有办法解决这个问题吗?
我想要:
- 无需回发即可“ajaxy”添加行
- 一致的布局,我只需在一处进行更改
最佳答案
您可以使用 AJAX 请求调用 Controller 操作来返回包含行的部分 View 。生成表时将使用相同的部分。因此,无需使用 javascript 操作 HTML,只需将返回的部分内容附加到表中即可:
$.ajax({
url: myUrl,
data: {
// That's to bind to the view model that the controller
// action you are invoking with the AJAX request takes
// as parameter
firstName: txtFirstName.val(),
lastName: txtLastName.val(),
dob: dteDateOfBirth.val()
}
success: function(result) {
$("#myDependantsTable").append(result);
}
...
});
并在您的标记中:
<table id="myDependantsTable">
@foreach(var item in Model)
{
@Html.Partial("_Row", item)
}
</table>
现在您的 Controller 操作将返回相同的部分:
public ActionResult SomeActionInvokedWithAjax(MyViewModel model)
{
return PartialView("_Row", model);
}
关于jquery - 使用 MVC 和 JQuery 动态且一致地将值添加到表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11939761/