We've been looking for a nice Ajaxy grid for our web applications at work to replace a very slow and ugly system that made obscene usage of UpdatePanels, GridViews, and some controls from the Ajax Control Toolkit (I'm talking viewstates that were over 500k being sent back and forth across the wire!).

We did our research and tried out a few products, and we really liked the Nitobi grid since it offered ASP.NET integration and seemed pretty flexible. However there were some nagging issues and when we ran into an issue that was at least 7 months old and still not resolved with no further company response, we abandoned it.

A month later, we decided to tackle the finding a grid again and this time found a gem of a JavaScript library - Ext JS. What I love about this library versus Scriptaculous, jQuery, and other competing libraries are the number of usable, high quality built-in UI widgets, in particular the grid.

As a low risk proof of concept, I was given the green light to go ahead and implement the grid on a project I was ahead of schedule on. After overcoming a bit of a learning curve, I came away impressed with how flexible and well documented the library was. The forums were also a huge help as I was able to piece together what I needed from other users' posts. We released the new application for user acceptance testing this week and our customers loved the look and feel of the application. I think we got a keeper!

As I worked with the library, it struck me how little of the ASP.NET WebForm model I was using. I was not doing a postback or using viewstate at all, all data was being sent back and forth via JSON to a custom .ashx handler. Since I had some downtime before starting my next project, I decided to create a spike using the Ext JS library with the upcoming ASP.NET MVC framework. This is the first code I've written with Visual Studio 2008, let alone with the MVC framework so forgive me if the code look horrendous (which it does...).

The entire solution took about a day to finish. Basically it uses the ubiquitous Northwind database, dumps a list of customers into a dropdown, you select a customer to view their orders in the top grid, then select an order to view its order details in the bottom grid. Nothing fancy, but gave me enough insight on how Ext JS (or any JavaScript library really) ties in with the MVC framework and also allowed me to play around with Linq to SQL.

I'm not terribly pleased with how my unit testing of the controllers are being handled (need to research that some more), and also not too fond of how the view (specifically the Ext JS record object) is dependent on the properties of the model object being serialized to JSON. If I add/change/remove a property on my view data transfer object in C#, I'd also have to remember to change it in the view's JavaScript... clunky at best, a violation of the DRY principle at worst.

So while I work those issues out, I've decided to go ahead and post the source code of what I have so far for public consumption. As I mentioned before, I reaped a lot of benefit from others posting their code on the Ext JS forums, so I'm paying it forward and hope someone else will find this code beneficial.

I should mention it's also pretty easy to adapt this code to an ASP.NET 2.0 solution if you came here looking for an ASP.NET 2.0 example with Ext JS.  Just replace the Linq to Sql entities with business objects hydrated from your choice of storage mechanism, and replace the controller with an .ashx handler that Response.Writes the JSON Ext JS needs.

NOTE: The source code below was created using the initial version of the ASP.NET MVC framework and so will not work with newer preview versions.  If someone wants to update the example with a newer version, I will gladly host the source code. 

To build the solution, you will need the following:

1. Visual Studio 2008
2. ASP.NET 3.5 Extensions Preview
   
3. Download Source Code for this Project