1

我有一个可以有多个值的表单。

例如：

请列出您的家属。

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

  • 名，
  • 姓，
  • 出生日期

以及添加按钮。

我的添加按钮触发 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 和我的视图

IE： 

<tr>
    <td>@Model.FirstName</td>
    <td>@Model.LastName</td>
    <td>@Model.DateOfBirth</td>
</tr>

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

反正有这个问题吗？

我想：

  • 无需回发即可添加“ajaxy”的行
  • 一致的布局，我只需要在一个地方进行更改
4

1 回答 1

4

您可以让通过 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);
    }
    ...
});

并在您的标记中：

<table id="myDependantsTable">
    @foreach(var item in Model)
    {
        @Html.Partial("_Row", item)
    }
</table>

现在您的控制器操作将返回相同的部分：

public ActionResult SomeActionInvokedWithAjax(MyViewModel model)
{
    return PartialView("_Row", model);
}
于 2012-08-13T18:05:16.063 回答