使用jQuery添加表格行 - MVC 4

Question

我目前正在嘗試爲我的頁面實現添加功能。目前，添加功能已經正常工作，但我必須刷新頁面才能使新添加的行出現在表格中。

請參閱我下面的代碼：

這是我如何生成我的表：

<table class="webGrid" id="ProductsTable"> 
<tr> 
    <td><strong><span>ProductID</span></strong></td> 
    <td><strong><span>ProductName</span></strong></td> 
    <td><strong><span>Price</span></strong></td> 
    <td colspan="2"><strong><span>Action</span></strong></td> 
</tr> 

@foreach (var item in repository.GetAllProducts(ViewData["BranchCode"].ToString())) 
{ 
<tr> 
    <td><span class="ProductID">@item.ProductID</span></td> 
    <td><span class="ProductName">@item.ProductName</span></td> 
    <td><span class="Price">@item.Price</span></td> 
    <td>@Html.ActionLink("Edit", "Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</td> 
    <td>@Html.ActionLink("Delete", "Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</td> 
</tr> 
} 

目前，編輯和刪除已運作良好。下面是我該怎麼辦編輯：

function update(data) { 
if (data.Success == true) { 
    var parent = linkObj.closest("tr"); 

    parent.find(".ProductID").html(data.Object.ProductID); 
    parent.find(".ProductName").html(data.Object.ProductName); 
    parent.find(".Price").html(data.Object.Price); 
} 
else { 
    $("#update-message").html(data.ErrorMessage); 
    $("#update-message").show(); 
} 

}

現在我想實現的功能添加這幾乎是相同的，因爲我使用jQuery的編輯。我曾嘗試使用.append方法失敗。

---

編輯：

我曾嘗試使用下面的代碼爲補充嘗試。但它似乎沒有做任何事情。也許我做錯了什麼：

function add(data) { 
    if (data.Success == true) { 

     var rowTemplate = $("#rowTemplate").html(); 
     var tbl = document.getElementById("ProductsTable"); 
     var counter = $("#ProductsTable tr").length; 
     data.Counter = counter; 
     $("#ProductsTable").append(applyTemplate(rowTemplate, data)); 

    } 
    else { 
     $("#update-message").html(data.ErrorMessage); 
     $("#update-message").show(); 
    } 
} 

function applyTemplate(template, data) { 
    var str = template; 
    if ($.isPlainObject(data)) { 
     $.each(data, function (index, value) { 
      var find = new RegExp("\\$1" + index, "ig"); 
      str = str.replace(/\$/g, "\$1"); 
      str = str.replace(find, value); 
     }); 
    } 
    return str; 
} 

它使用一排模板，如下列：

<script type="text/x-template" id="rowTemplate"> 
     <tr><td><input type="text" id="txtName_$Counter" value="" /></td></tr> 
    </script> 

我剛剛發現這個解決方案在線，但我不能讓它工作。我也試過下面的代碼（我只是做了基於編輯的jQuery我有）：

function add(data) { 
    if (data.Success == true) { 
     var parent = linkObj.closest("tr"); 
     parent.find(".ProductID").append(data.Object.ProductID); 
     parent.find(".ProductName").append(data.Object.ProductName); 
     parent.find(".Price").append(data.Object.Price); 
    } 
    else { 
     $("#update-message").html(data.ErrorMessage); 
     $("#update-message").show(); 
    } 
} 

---

編輯：

現在，這是我的jQuery的樣子：

function add(data) { 
    if (data.Success == true) { 
     data = { Counter: 3 }; 
     $("#rowTemplate").tmpl(data).appendTo("#ProductsTable"); 
     $('#updateDialog').dialog('close'); 
    } 
    else { 
     $("#update-message").html(data.ErrorMessage); 
     $("#update-message").show(); 
    } 
} 

，這是我的模板：

<script type="text/x-template" id="rowTemplate"> 
    <tr> 
     <td><span class="ProductID"></span></td> 
     <td><span class="ProductName"></span></td> 
     <td><span class="Price"></span></td> 
     <td>@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })</td> 
     <td>@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })</td> 
    </tr> 
</script> 

感謝Sir @Muhammad Adeel Zahid幫助我讓jQuery工作來添加行。但是，它只在我的表格中添加了一個新行。我現在需要的是將它添加到我在jQuery的add function中的data對象中。

我試過從THIS LINK以下教程，但我似乎無法使其工作。我的代碼如下：

function add(data) { 
    if (data.Success == true) { 
     var prod = $.map(data.results, function (obj, index) { 
      return { 
       ProductID: obj.text, 
       ProductName: obj.text, 
       Price: obj.text 
      }; 
     }); 

     prod = { Counter: 3 }; 
     $("#rowTemplate").tmpl(prod).appendTo("#ProductsTable"); 
     $('#updateDialog').dialog('close'); 
    } 
    else { 
     $("#update-message").html(data.ErrorMessage); 
     $("#update-message").show(); 
    } 
} 

非常感謝您的幫助！

Answer 1

我認爲你的模板代碼有問題。請嘗試將其更改爲

<script type="text/x-jquery-tmpl" id="rowTemplate"> 
     <tr><td><input type="text" id="txtName_${Counter}" value="" /></td></tr> 
    </script> 

，然後從它生成的HTML像

var obj = {Counter:3}; 
$("#rowTemplate").tmpl(obj).appendTo("#ProductsTable"); 

編輯
首先，我以爲你使用jQuery模板引擎，我的答案是基於這樣的假設。你可以找到如何使用模板引擎here。請參閱我還編輯了<script type="text/x-jquery-tmpl" ...中的類型字段。在你的代碼中導入jquery模板js文件，並保持原樣。它應該工作。
編輯2
好的，這是一個不同的模板。請記住，您必須爲每個模板都有唯一的ID。該模板看起來像

<script type="text/x-jquery-tmpl" id="rowTemplate2"> 
    <tr> 
     <td><span class="ProductID">${ProductId}</span></td> 
     <td><span class="ProductName">${ProductName}</span></td> 
     <td><span class="Price">${Price}</span></td> 
     <td>@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })</td> 
     <td>@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })</td> 
    </tr> 
</script> 

注意你如何在模板中添加佔位符${Variable}。現在，當您需要使用該模板時，您將需要一個json對象，其中的屬性與模板中使用的變量相匹配。例如，要使用上述模板，我會做類似

var obj2 = {ProductId:2,ProductName:'First Product', Price: 323};//note the properties of json and template vars match. 
$("#rowTemplate2").tmpl(obj2).appendTo("#somecontainer");