动态插入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);        
     } 
});