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

Question

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

例如：

请列出您的家属。

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

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

以及一个添加按钮。

我的添加按钮触发了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”的行
• 一致的布局，我只需要在一个地方进行更改

Answer 1

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