jquery - 使用 MVC 和 JQuery 动态且一致地将值添加到表中

Question

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

例如:

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”添加行
• 一致的布局，我只需在一处进行更改

Answer 1

您可以使用 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);
}