使用MVC和JQuery到值动态和持续添加到表(Using MVC and JQuery to dy

我可以在它有多个值的表格。

例如：

请列出您的家属。

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

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

还有的添加按钮。

在成功的一个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"));
    }
    ...
});

这个伟大的工程。 不过，现在我已经在两个不同的地方，我的javascript定义我的HTML并以我观

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);
}

文章来源: Using MVC and JQuery to dynamically & consistently add values to a table