使用MVC和JQuery动态地,一致地向表中添加值

我有一个表格,里面可以有多个值。

例如:

请列出您的家属。

我有一个包含我的三个字段的字段集

  • 名字,
  • 姓,
  • 出生日期

以及添加按钮。

我的添加按钮触发了jQuery ajax请求,并在成功时向表中添加了一个表行

伪代码:

$.ajax({ url: myUrl, data: myData, success: function(){ var row = $(""); row.append("").text(txtFirstName.val()); row.append("").text(txtLastName.val()); row.append("").text(dteDateOfBirth.val()); row.appendTo($("#myDependantsTable")); } ... }); 

这很好用。 但是,现在我在两个不同的地方定义了我的HTML,我的javascript和我的视图

IE:

  @Model.FirstName @Model.LastName @Model.DateOfBirth  

当我开始修改这些问题时会出现问题,例如,在日期列上添加一个类,我需要修改代码两次。

反正这个问题呢?

我想要:

  • 在没有回发的情况下添加“ajaxy”的行
  • 一致的布局,我只需要在一个地方进行更改

您可以使用AJAX请求调用控制器操作以返回包含行的局部视图。 生成表时使用的部分相同。 因此,不要使用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); } ... }); 

在你的标记中:

  @foreach(var item in Model) { @Html.Partial("_Row", item) } 

现在你的控制器动作将返回相同的部分:

 public ActionResult SomeActionInvokedWithAjax(MyViewModel model) { return PartialView("_Row", model); }