Question

I’ve been evaluating a number of JQuery table plugins to handle my paging and sorting needs. I am looking for something that allows be to page and sort my tables with an AJAX call.

The problem that I am having is that all the plugins that I have found expect the Ajax call to return JSON. This is perfect for simple scenarios but falls down when I want to apply complex formatting to my tables, as soon as I want my table to include links or icons or other complex rendering I am faced with reproducing server side code that generates these links or chooses the appropriate icon as client side code to do the same thing.

What I would like to do is return the new table data as an html table and have the plugin replace the existing table with the returned table (either directly or by copying cells, the specifics are not important). Are there any reccomendations for the best way to do this?

Answer 1

I think your best option will be to create a controller action that returns a partial view which contains your table. The partial view can contain any JavaScript based table/grid you want. This solution has no dependency at all on any specific grid/table implementation.

For instance, let’s say you have a strongly typed partial view of type ViewUserControl<IEnumerable<Foo>> named FooList.ascx

You would then define some action in your controller that rendered this partial

// For paging support, you would probably need to modify this action to accept
// a parameter that could be used to tell which records to retrieve.
// This would also require the appropriate route. However, this is beyond
// the scope of this example.
public PartialViewResult List()
{
  // get the collection of stuff that you want to display
  var items = this.itemRepository.GetItems();

  // return the partial
  return PartialView("FooList", items);
}

In your view where this partial is going to be used, you will want to have something like the following…

<!-- this <div> will contain the partial, which we will be able to update via AJAX -->
<div id="FooList">
    <%-- this assumes a collection of "items" is available in Model.Items --%>
    <% Html.RenderPartial("FooList", Model.Items); %>
</div>

<!-- use an AJAX ActionLink to update the table -->
<%=
    Ajax.ActionLink
    (
        "Click Me to Update the Table using AJAX!",
        "List",
        new AjaxOptions()
        {
            HttpMethod = "GET",
            LoadingElementId = "FooList"
        }
    )
%>

All we’re doing here is using the ASP.NET MVC AJAX Helper to create a link that will generate an AJAX GET request to the List action in your controller. Also, by defining the LoadingElementId property in the AjaxOptions object, we have told the helper that we want to replace the inner contents of <div id=”FooList”> with the results of the AJAX request.

When a user clicks that link, an AJAX request will cause your List action to be invoked. Your list action simply returns the rendered contents of the partial view FooList.ascx. The existing contents of the div with id=”FooList” will be replaced by the contents that were retrieved from the AJAX request. In the above example, the controller action will always select the same data, which is not really what you want. In a real scenario, you would have to modify the controller action to retrieve the appropriate data for your partial view. I couldn’t suggest an effective way for you to handle that without knowing the details for your implementation.

If you don’t want to use a link, then just look at the HTML and JavaScript that is generated by the Ajax.ActionLink helper and adapt it to your own needs. For instance, build your own custom helper, or just manually write out the JavaScript.

Lastly, don’t forget to include the MVC AJAX JavaScript source files. I recommend including them in your master page. For example:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>