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

, 편집 및 삭제는 이미 잘 작동하고 있습니다. 지금은 거의 내가 사용하고있는 편집 JQuery와 동일하다 추가 기능을 구현하기 위해 노력하고

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

}

: 아래는 내가 편집을하는 방법이다. .append 메서드를 성공적으로 사용하지 못했습니다.

---

편집 :

나는 추가 아래의 코드를 사용하여 시도했다. 하지만 아무 것도하지 않는 것 같습니다.

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

난 그냥 온라인이 솔루션을 발견하지만 난이 일을 할 수 없습니다 : 다음과 같은

가

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

그것은 행 템플릿을 사용한다 : 아니면 내가 뭔가 잘못하고 있어요 . 나는 또한 (난 단지 내가 가지고있는 편집 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> 

행을 추가하는 jQuery 작업을 도와 준 Sir @Muhammad Adeel Zahid에게 감사드립니다. 그러나, 그것은 단지 내 테이블에 새로운 행을 추가합니다. 지금 필요한 것은 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> 

로 변경합니다 바랍니다 그리고 난 당신이 JQuery와 템플릿 엔진을 사용하여 줄 알았는데 내 대답이 그 가정에 기반

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

편집
처음처럼에서 HTML을 생성합니다. 템플릿 엔진 here을 사용하는 방법을 찾을 수 있습니다. 형식 필드도 <script type="text/x-jquery-tmpl" ...에 편집했는지 확인하십시오. jquery 템플릿 js 파일을 코드에서 가져 와서 나머지 것들은 그대로 둡니다. 그때 작동합니다.
편집 2
다른 템플릿입니다. 각 템플릿에 대해 고유 한 ID가 있어야한다는 것을 기억하십시오. 그 템플릿은 템플릿에서 자리를 ${Variable}를 추가하는 방법

<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> 

주 같을 것이다. 이제 템플릿을 사용해야 할 때 템플릿에 사용 된 변수와 일치하는 속성을 가진 json 객체가 필요합니다. 예를 들어 위의 템플릿을 사용하려면 다음과 같이 입력하십시오.

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