The MVCContrib project(at http://www.codeplex.com/MVCContrib ) provides a nice Grid ‘control’(and a lot more of course…) for use with MVC framework. Currently it does not support some what magical generation of javascript. so that you can have a ajaxified grid control. but with jQuery its pretty easy to ajaxify it. Today i finished ajaxifiying the paging of the grid, with a little bit of jQuery. So this is how i did it. i am sure that there must be betters ways of doing it. but this is what i came up with 
Structure
First of all for this to work you will need some ‘structure’ in your app. let’s take a little example. if you want to display a list of People in your application using a grid. you will have a controller for people: PeopleController. this would have a two actions. one would be List. while the other one would be ListForGrid. List action would be a plain action that will just return a normal view: List.aspx. while ListForGrid would return a asp ‘control’ or a partial view: ListForGrid.ascx. ListForGrid.ascx would know how to render a grid. it will use the normal Grid helpers to render a grid that displays people. List.aspx will contain an empty div:grid_holder and some java script that would add the Ajax goodness.
How it works
when a user asks for the People/List. the List.aspx would be rendered. and upon the document.ready() it would call ListForGrid action via ajax and load the resulting html in to the page. ListForGrid uses the ListForGrid.ascx to render the grid. ListForGrid action will also accept the necessary parameters to support Grid’s pagination(ListForGrid(int? page)).
this is all good. but still we have not archived our main goal. the rendered grid will have pagination links that would take us back to theListForGrid action directly. so if we click on them we would go to that resulting view with out any ajax ‘magic’. to get the grid to render them with ajax we are going to have to use jQuery to ‘hook’ in to the click event’s of the pagination related links( first | prev | next | last) that are in the rendered grid. and we will ‘intercept’ any events(clicks) and load the grid through ajax as necessary. so if you click on the next link in the grid we will stop the page from going to the relevant page, we will ‘read’ what ‘location’ that he is trying to take us to and we will load that through ajax.
now if you don’t understand what i am trying to tell you, please take a look at the source code bellow. i am sure you will understand that 
relavant JS/jQuery source code
$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";
//load the grid when the document loads. this code will run only once
$(document).ready(function() {
$($gridHolder).load($ListForGridURL, null, function() {
//now the grid is loaded call ajazPaging,
//this will hook on to the click events
ajaxPaging();
});
});
//hook on to the click events(in a recursive way) of all pagination
//related links, and when clicked load the updated grid through AJAX
function ajaxPaging() {
//this will zero in on the needed <a> elements in the Grid
$(".paginationRight > a")
.click(function(event) {
//stop the browser from going to the relevant URL
event.preventDefault();
//this.href will give us the href value of the current
//element, which have the URL from which we should update our grid
$($gridHolder).load(this.href, null, function() {
//call the function recursively so that the same code would
//run when the user click on the pagination links after the loading happens
ajaxPaging();
});
});
}
Update: with the release of jQuery 1.3 you can write this in a more simpler way using the live(). more info
Live Events
jQuery now supports “live events” – events that can be bound to all current – and future – elements. Using event delegation, and a seamless jQuery-style API, the result is both easy to use and very fast.
$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";
//load the grid when the document loads. this code will run only once
$(document).ready(function() {
$($gridHolder).load($ListForGridURL, null, function() {
//now the grid is loaded call ajazPaging,
//this will hook on to the click events
//hook on to the click events of all pagination
//related links, and when clicked load the updated grid through AJAX
//this will zero in on the needed <a> elements in the Grid
$(".paginationRight > a")
.live("click", function(event) {
//stop the browser from going to the relevant URL
event.preventDefault();
//this.href will give us the href value of the current
//element, which have the URL from which we should update our grid
$($gridHolder).load(this.href);
});
});
});
rest of the sample source code(controller, actions and views…)
<em>PeopleController </em>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MvcContrib.Pagination;
using MvcContrib;
namespace MvcLocalization.Controllers
{
public class PeopleController : Controller
{
public ActionResult List()
{
return View();
}
public ActionResult ListForGrid(int? page)
{
ViewData["people"] = GetListOfPeopel().AsPagination(page ?? 1, 1);
return View("UserListGrid");
}
}
}
<em>
List.aspx</em>
<h2>People</h2>
<div id="grid_holder"></div>
$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";
//load the grid when the document loads. this code will run only once
$(document).ready(function() {
$($gridHolder).load($ListForGridURL, null, function() {
//now the grid is loaded call ajazPaging, this will hook on to the click events
ajaxPaging();
});
});
//hook on to the click events(in a recursive way) of all pagination
related links, and when clicked load the updated grid through AJAX
function ajaxPaging() {
//this will zero in on the needed <a> elements in the Grid
$(".paginationRight > a")
.click(function(event) {
//stop the browser from going to the relevant URL
event.preventDefault();
//this.href will give us the href value of the current <a> element, which have the URL from which we should update our grid
$($gridHolder).load(this.href, null, function() {
//call the function recursively so that the same code would run when the user click on the pagination links after the loading happens
ajaxPaging();
});
});
}
<em>ListForGrid.ascx</em>
<%
Html.Grid(
"people",
column =>
{
column.For(p => p.Name);
column.For(p => p.Age);
column.For(p => p.Address);
}
);
%>
Aha! that’s it. jQuery rocks eh!
hope this will be useful to someone/myself.
Note 1: if you are completely new to MVCContrib Grid, you might want to read this
Note 2: a article on “Using MVCContrib Grid in a Web 2.0 World with jquery and AJAX” (btw this article does not cover implementing paging through ajax…)
