Friday, July 3, 2009

Paging and Sorting ListViews with ASP.NET MVC and jQuery


This article provides a simple example of using jQuery along with the jQuery tablesorter and tablesorter.pager plug-ins to provide sorting and paging support for a listview within the context of an ASP.NET MVC application. JQuery has partnered with Microsoft and is now integrated within the IDE to include the availability of intellisense support. The article uses a C# MVC application as an example but all changes made to the example project were strictly limited to writing the markup and are as applicable to a VB.NET based MVC application as they are to C#.

Figure 1: the NerdDinner MVC Application Modified with jQuery's Tablesorter and Pager

Figure 2: The live NerdDinner website with the original list of upcoming dinners

I used the NerdDinner tutorial project as the basis for this project: The original code and a preview of the pending MVC book authored by Hanselman, Guthrie, et al is available for download if you’d care to have a look; at present there does not appear to be a VB version of the project for those interested in that; even through the sample application is in C#, the only added code used on this project is in HTML so, if you are working on a VB based based MVC application, the actual markup discussed in this article is equally applicable to VB:

The source code is located here:
The free e-book is available here:

The original version of this project used the paged list approach to providing table paging; the original project did not include column sorting. In modifying the project, I left in the existing code so that you can comment out or expose the original for comparison.

Rather than using the paged list approach, this example uses jQuery along with the tablesorter and the tablesorter.pager plug-ins. They both may be downloaded from this location: jQuery itself, along with the documentation file needed to support intellisense, may be downloaded from here:

As for MVC, it and a growing number of sample applications and tutorials are available here:

Getting Started

The download includes the modified NerdDinner MVC application; that MVC application is described in detail within the free e-book mentioned earlier. Most of the implementation details with regards to creating a table that may be both paged and sorted with jQuery are pretty simple, one really need only add references to the JavaScript files, the style sheet, and the graphics and add a little JavaScript to put it all together.

See full detail:

No comments: