Question

I have a table of server-generated content using MVC HTML helpers, like so:

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

I want to be able to use jQuery to add, change, and delete rows to the server-generated table, but how am I supposed to know the HTML content generated by the HTML helpers? I have already written actions on the controller that return Json, but I need to know how to format it on the client side. It seems pretty bad practice to duplicate the HTML template in my JavaScript code.

Answer 1

You can put your table in a partial view.Define an Action that returns the partial view.

and you can call the action that returns partial view by jquery after deleting function.

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