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

我有一个表单，其中可以有多个值

例如：

请列出你的家属

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

• 名字
• 姓
• 出生日期

以及添加按钮

我的add按钮触发jqueryajax请求，并在成功后向表中添加一个表行

伪代码：

$.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"));
    }
    ...
});

$.ajax({
url:myUrl，
数据：myData，
成功：函数（）{
变量行=$（“”）；
行。追加（“”.text（txtFirstName.val（））；
行。追加（“”.text（txtLastName.val（））；
row.append（“”.text（dteDateOfBirth.val（））；
行.附件（$）；
}
...
});

这很有效。然而，现在我在两个不同的地方定义了HTML，javascript和视图

即：

@Model.FirstName
@Model.LastName
@出生日期模型

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

这个问题有什么解决办法吗

我想：

• 要添加的行“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);
    }
    ...
});

在您的标记中：

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

---

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

---

很好，这正是我想要的。谢谢达林尼斯，这正是我想要的。谢谢你，达林