Introduction
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: http://www.nerddinner.com.
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: http://nerddinner.codeplex.com.
The free e-book is available here: http://tinyurl.com/aspnetmvc.
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: http://tablesorter.com/.
jQuery itself, along with the documentation file needed to support intellisense,
may be downloaded from here: http://jquery.com/.
As for MVC, it and a growing number of sample applications and
tutorials are available here: http://www.asp.net/mvc/.
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.
Figure 3: Added images and style sheets are placed in the
Content Folder
I am not going to go into any details as to how the NerdDinner
sample application works; that again is addressed in the e-book. The controller
and model code were not modified in anyway; all of the changes made to the
original were made to the view used to show upcoming dinners.
Figure 4: Added JavaScript and Visual Studio Documentation Files
JQuery version 1.3.2 and the documentation file needed to support
intellisense were added but are not necessary; the tablesorter and pager
controls are added through the two JavaScript files shown in Figure 4
(jquery.tablesorter.js and jquery.tablesorter.pager.js); these files are
necessary.
Figure 5 shows the overall NerdDinner solution; this solution is
described in great detail in the free e-book mentioned at the beginning of this
article.
Figure 5: Solution Explorer showing NerdDinner
The Code
There were no modifications to the NerdDinner solution code; all
of the code necessary to support the addition of the tablesorter and pager
plug-in was made within the markup and through the addition of the related
JavaScript.
Code: The Master Page.
In order to make use of the tablesorter and pager jQuery
plug-ins, we need to reference the scripts in the master page; to that end, the
following two lines were added to Site.Master.
<%--Added
for Tablesorter and Pager--%>
<script src="/Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.pager.js"
type="text/javascript"></script>
We also need to add the style sheet to the Site.Master:
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
Aside from the addition of these three lines, the Site.Master
master page is in the original format as provided with the NerdDinner tutorial
project.
Code: The Index Page
(index.aspx).
The index page is used to display the list of upcoming dinners
within the context of the original NerdDinner project. The entire content
contained within the index page was left intact but commented out. If you
wanted to compare the two versions running, you can do so by commenting out the
tablesorter related sections and by removing the commenting from the original
parts.
The first bit to add to the index page was the JavaScript used to
configure the tablesorter and pager plug-ins. The annotation describes the
settings used but in short I set the table to initially sort by sorting the
first and seconds columns, both ascending. The sortList argument is set to
initially sort on one or more columns. Column and direction are specified in a
pair where the first value is the column and the second is the sort direction.
Specifying [0, 0] will result in an initial table sort based upon sorting column
0 in an ascending direction. Specifying [ [ 0,0 ], [ 1,0 ]] will sort on the
first and second columns, both in an ascending direction.
It should also be noted that the pager always defaults to show a
page size of ten rows; since for work purposes I was interested in showing only
five rows at a time and so I decided to set this table up to only show five rows
upon display. That is done with the pager's pagesize value (val) property and
by calling change on the page size after setting the value (row count) argument.
The positionFixed property was set to false; this allows the
pager to float such that it is always glued to the bottom of the table; if this
is not set, the pager will appear in a fixed location regardless of the row
count (e.g., with position fixed set to false, if the last page contains less
rows, the pager will move up to the bottom of the table).
<%--Configure
Tablesorter and pager - script added to orginal
NOTES:
sortList:
call tells sorter to initially sort on one or more
columns
[column,descending/ascending]
in
this example, we are telling it to sort the
first
column ascending and the second column ascending
positionFixed:
false keeps the pager locked to the bottom of
the
table regardless of the number of rows
.pagesize:
sets the number of rows visible. If
not set it will
always
default to ten rows (if we set the selected rows option to
a
lesser or greater value in the HTML. In
this case I changed it
to
5 rows and then called change on it such that whenever the page
loads
it will initially only show five rows.
#ListViewDinners
is the list view control on this page; when rendered
to
the page it will be as a table and so we can control it with
the
tablesorter and pager through the assigned ID
--%>
<script type="text/javascript">
$(document).ready(function()
{
$("#ListViewDinners").tablesorter({
widthFixed: true,
sortList:
[[0,0],
[1,0]], widgets: ['zebra']
})
.tablesorterPager({
container: $("#pager"),
positionFixed: false });
$(".pagesize").val("5");
$(".pagesize").change();
});
</script>
The next section of the markup creates a listview control and
also binds the listview to an IQueryable collection of upcoming dinner dates.
You would likely not bind in this manner but would more likely create an object
that we can bind the listview to in code and then add that object to the model.
Even though the listview is a server control and this is an MVC
application, we can still use it. When the control is rendered to the page it
is provided as a normal table; we can still user the pager and tablesorter
against it since the client-side JavaScript will operate on the rendered table;
the only requirement is that the table ID matches that setup for the
tablesorter. Each section of the listview definition is described in the
annotation but in general the objective is to define the table appearance, setup
the table headers as anchors (so the tablesorter can pick off the column to sort
on), and then to define the pager as the table footer.
<%--Replacement
list based on the user of jquery, tablesorter and tablesorter.pager plugins
Since the tablesorter and pager operate on tables, you can use it against a
listview control since the output is written out to the page as a table. Just
keep the ID synced with the ID passed to the table sorter and pager
Since we can bind the listview control, I, for this example, just bound the
listview to the results returned by the dinner repository class
FindUpcomingDinners call. You
could set it to a bindable set of results added to the model (in fact that is
more likely what you will do in an
MVC application.
--%>
<%
NerdDinner.Models.DinnerRepository dr
= new
NerdDinner.Models.DinnerRepository();
ListViewDinners.DataSource
= dr.FindUpcomingDinners();
ListViewDinners.DataBind();
%>
<%--Define
the table headers to work with the tablesorter
By defining the with an anchor tag and setting the column name
--%>
<asp:ListView runat="server" ID="ListViewDinners">
<LayoutTemplate>
<table id="ListViewDinners" class="tablesorter">
<thead>
<tr>
<th>
<a href="#">Title</a>
</th>
<th>
<a href="#">Date</a>
</th>
<th>
<a href="#">Time</a>
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<%--Define
the pager within the table footer, set the button images and the
page size options (the number of rows to show in the table). When
setting the selected option, be sure to set the page size in the
tablesorter related javascript - refer to the notes in the script block; if you
don't set the value there, then regardless of what is placed into the selected
pagesize option, the initial display of the grid will contain ten rows
--%>
<tfoot>
<tr id="pager">
<td colspan="7" style="border-right: solid 3px
#7f7f7f;">
<img src="../../Content/first.png"
class="first" alt="First"/>
<img src="../../Content/prev.png"
class="prev" alt="Next"/>
<input type="text" class="pagedisplay"/>
<img src="../../Content/next.png"
class="next" alt="Next"/>
<img src="../../Content/last.png"
class="last" alt="Last"/>
<select class="pagesize">
<option selected="selected"
value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<%--An
Html.ActionLink does not work here in this context because of the
Evals (to get the dinner ID in this case), so roll your own hyperlink
pointing the correct controller and action
--%>
<td><asp:HyperLink NavigateUrl='<%#"/Dinners/Details/"
+ Eval("DinnerID").ToString() %>'ID="hl1" runat="server"><%#Eval("Title") %></asp:HyperLink></td>
<td><%# Convert.ToDateTime(Eval("EventDate")).ToShortDateString()%></td>
<td><%# Convert.ToDateTime(Eval("EventDate")).ToShortTimeString()%></td>
</tr>
</ItemTemplate>
</asp:ListView>
That is all there is to it; we can build and run the MVC
application now and when we select the option to view upcoming dinners, those
dinners will be presented within a listview control rendered to the page as a
table. Naturally we may also define standard tables and do the same sort of
thing through the use of the plug-ins; likewise we can use other data sources
including those loaded into the Model data.
Summary.
The article shows an alternative approach to providing paging and
sorting capabilities for a table within the context of an MVC application; the
original version did not supply a sort option and it implemented a paged list to
support paging through the controller and model code; this alternative provides
both paging and sorting on the client-side.
The example was built upon the NerdDinner tutorial MVC application and it was
implemented without changing any of the code contained in that application.
This article demonstrates only two of the numerous plug-ins available through
the use of jQuery within an MVC or standard ASP.NET website.
As Microsoft has partnered with the folks at jQuery and as a
result of that partnership, jQuery is now incorporated into Visual Studio along
with intellisense documentation.