使用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");