For the past few months (and 100+ volunteer hours!) I’ve been creating a web application for Hands on DC that calculates volunteers, gallons of paint, and materials for work projects for their annual Work-a-Thon event. After the encouragement of a few coworkers who did some initial work on the project, I committed to using ASP.NET MVC, technology which has been out over a year but just reached a production 1.0 release at Mix 09 this year.
Getting up and running with MVC wasn’t an easy task. The project was also my first foray into LINQ to SQL, and really .NET 3.5 in general, so it was a little intimidating at first! There’s not much documentation and it’s split across the many release versions of MVC. The main site will get you up doing very basic things (but is seriously lacking content), though Phil Haack’s webcast and Scott Hanselman, et. al.’s free e-Book are helpful.
In the process, I discovered some important companion pieces in MvcContrib and jQuery, including the validation plugin and the datatable plugin. I want to highlight work that I did to combine the MvcContrib data grid with the datatable for sorting, paging and filtering. This was something I struggled with for several hours, so I’m hoping there is some value in posting the full example.
Figure 1. Example of using MvcContrib with jQuery datatable plugin.
Here is a complete from-scratch example.
- Create a new ASP.NET MVC Web Application. Press F5 to make sure it runs.
- Drag and drop the “media” folder from the datatable project directory (where you unzipped the project) into the new Solution, like so:
- Add a reference to the MvcContrib.dll.
- Open the Views/Home/Index.aspx file and add the following under the page directive:
<%@ Import Namespace=”MvcContrib.UI.Grid” %>
<%@ Import Namespace=”MvcContrib.UI.Grid.ActionSyntax” %>
- Open the Views/Shared/Site.Master file and add references to jquery, jquery.dataTables and the demos.css file, like so:
- Now set up some dummy data in the HomeController.cs file like so (add to the body of the class):
- Now we have some data to work with. In the view (ViewData[“MedalWinners”]). Test that theory by adding the following code to the “indexContent” content block in Views/Home/Index.aspx:
- You should see output like this:
- Assuming that worked, we’re ready to do some grid work! Once you get the basic syntax, the MvcContrib grid makes display a cinch. This is the “action syntax” so make sure your imports are right (shown at the top of the walkthrough.
- Run the application; you should see output like so:
- That’s pretty easy, but not terribly useful yet. For fun, let’s add a Live search on the name field so we can see who these athletes are. The “Action Syntax” makes it simple to do powerful clean custom code for each cell. Pretty slick! Note that you need to specify the table cell tags or you’ll get messed up output.
- So now our output name is linked to a Live Search.
- Now we’re ready to incorporate the jquery datatable stuff. If you see in the directory that you unzipped the datatable project to, there is an “eaxmple_zero_config.html” file. Let’s steal the code from the top of that.
In order to get this to work, we need to add an id attribute to the grid, as is shown below.
Let’s also style it a little by putting it in a container. Otherwise the search box doesn’t align with the table and looks a little wonky:
- Now we can do sorting by clicking the column names, filtering by entering text in the search box, and pagination by selecting the drop-down for “show X entries”.
- And voilá!
[Download complete source code] (394KB, ZIP file)