動態插入JSON數據到服務器生成的HTML表格

Question

我使用MVC HTML傭工的服務器生成的內容表，就像這樣：

<table> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].Description) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].StartTime) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].EndTime) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].Location) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].IsBillable) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].IsBilled) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.TimeLogEntries[0].Phase) 
      </th> 
      <th></th> 
     </tr> 


     @foreach (var item in Model.TimeLogEntries) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(model => item.Description) 
       </td> 
       <td class="no-wrap"> 
        @Html.DisplayFor(model => item.StartTime) 
       </td> 
       <td class="no-wrap"> 
        @Html.DisplayFor(model => item.EndTime) 
       </td> 
       <td> 
        @Html.DisplayFor(model => item.Location) 
       </td> 
       <td class="no-wrap"> 
        @Html.DisplayFor(model => item.IsBillable) 
       </td> 
       <td class="no-wrap"> 
        @Html.DisplayFor(model => item.IsBilled) 
       </td> 
       <td class="no-wrap"> 
        @Html.DisplayFor(model => item.Phase) 
       </td> 
       <td class="no-wrap"> 
        @Html.ActionLink("Edit", "Edit", "TimeLog", new { id = item.TimeLogEntryId }, null) | 
      @Html.ActionLink("Delete", "Delete", "TimeLog", new { id = item.TimeLogEntryId }, null) 
       </td> 
      </tr> 
     } 
    </table> 

我希望能夠使用jQuery添加，更改，並將行刪除到服務器生成的表中，但我該如何知道由HTML助手生成的HTML內容？我已經在返回Json的控制器上編寫了操作，但我需要知道如何在客戶端對其進行格式化。在我的JavaScript代碼中複製HTML模板似乎是非常糟糕的做法。

Answer 1

你可以把你的表放在局部視圖中。定義一個返回部分視圖的Action。

你可以在刪除函數後調用jquery返回部分視圖的操作。

$.ajax({ 
     url: '/ActionThatReturnsPartialView', 
     cache: false, 
     type: 'post' 
     success: function (data) { 
      $('#tableID').replaceWith(data); 
     }, 
     error: function (e) { 
      alert(e.responseText);        
     } 
});