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

你可以把你的表放在一个局部视图中。定义一个返回局部视图的动作。

并且您可以在删除函数后调用通过jquery返回部分视图的操作。

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