Like most .NET Web Developers I was ecstatic when MVC was released. To put it plainly, I hate WebForms. However I do find myself missing some of the great WebForm controls like the DataGridView. The DataGridView was present in every WebForm application that I wrote. I really appreciated all the subtle bells and whistles that Microsoft added to the grid over the years. I wrote my own grid control for classic ASP and I know firsthand that it is a significant undertaking to make a grid control that if feature rich and flexible enough to handle complex situations. Therefore I was not crazy about taking on the task again…

Initially, I adopted jqGrid as my new de facto grid control. From a end user’s perspective, jqGrid provides a top-notch user experience. Unfortunately, the control is heavily dependent on JavaScript so its not always the best solution for Mobile websites. In addition, jqGrid does require a fair amount of plumbing. Although it’s not difficult to implement it does take time and does not provide the rapid development experience that I grew accustomed to with the DataGridView control.

For about the last 12 months I went old school. Yes, I have manually been coding my tables by looping over a enumerable list and creating rows and columns. Just like I did ten years ago! Its ridiculous. Luckily, I recently stumbled upon the MVC Contrib Grid. In approximately 10 minutes, I downloaded the library, added a reference to the assembly and fully implemented a grid with paging and sorting! You will not believe how easy it is.

Step 1: Creating the Controller Action

public ActionResult Manage()
{
    var categories = Repository.All<Category>();    
    return View(categories);
}

Step 2: Create the View Page

<%@ Import Namespace="MvcContrib.UI.Grid" %>
...
<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">    
    <%= Html.Grid(Model).Columns( column => {    
           column.For( x => x.Name );
           column.For( x => x.Description);
    })%>
</asp:Content>  

Step 3: Wait! I Need Sorting

A grid is no good unless it can sort. Time to modify the controller action and view to support sorting. First of all, you need to added a reference to MvcContib.Sorting and MvcContrib.UI.Grid. Next modify the method signature to accept a GridSortOptions object. This object contains the sorting information that was submitted from the view page.

using MvcContrib.Sorting;
using MvcContrib.UI.Grid;
...
public ActionResult Manage(GridSortOptions sort)
{
    var categories = Repository.All<Category>();
    if (sort.Column != null)            
        categories = categories.OrderBy(sort.Column, sort.Direction);            
    ViewData["sort"] = sort;
    return View(categories);
}

Ok, now we just need to modify the grid on the view page to show sortable column headers.

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">    
    <%= Html.Grid(Model).Columns( column => {    
        column.For( x => x.Name ).Sortable(true);
        column.For( x => x.Description).Sortable(true);               
        }).Sort((GridSortOptions)ViewData["sort"])%>
    <%= Html.Pager((IPagination)Model) %>
</asp:Content>

Step 4: You Want Paging? No Problem.

Paging has never been easier. Just add another argument to your controller action which takes a nullable int named “page”.

using MvcContrib.UI.Grid;

...
        
public ActionResult Manage(GridSortOptions sort, int? page)
{
    var categories = Repository.All<Category>();
    if (sort.Column != null)            
        categories = categories.OrderBy(sort.Column, sort.Direction);
    ViewData["sort"] = sort;
    return View(categories.AsPagination(page ?? 1, 10));
}

Now we need to add the paging control on the view page:

<%@ Import Namespace="MvcContrib.UI.Grid" %>
<%@ Import Namespace="MvcContrib.UI.Paging" %>

...

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">    
    <%= Html.Grid(Model).Columns( column => {    
        column.For( x => x.Name ).Sortable(true);
        column.For( x => x.Description).Sortable(true);
     }).Sort((GridSortOptions)ViewData["sort"])%>
     
    <%= Html.Pager((IPagination)Model) %>
</asp:Content>

Admittedly, the jqGrid does have a superior look and feel and provides paging and sorting without making a post back. Unfortunately, jqGrid does require a little bit of know-how and can be frustrating to implement. Not too mention it has a heavy dependency on JavaScript which can be problematic for mobile compliant websites. In contrast, the MVC Contrib Grid couldn’t be any simpler. So what are you waiting for? Try it yourself…