使用MVC和JQuery動態地和一致地向表中添加值

Question

我有一個可以有多個值的表單。

例如：

請列出您的家屬。

我有一個包含一個字段我的三個領域

• 名字，
• 姓，出生

的

日期以及一個Add按鈕。

我在成功的一個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); 
}