Using Ext JS Grids with ASP.Net MVC - Basic Example
Following my post "Ext JS JsonStore and Linq to JSON Gotcha" I've had a few people asking for a more complete example of how to use Ext JS Grids and data stores (in particular the JsonStore) with ASP.Net MVC and LINQ to SQL. Since writing that blog post I've learnt a lot more about the ASP.Net MVC framework and the Ext JS framework so I thought it would be helpful to publish a complete working demo. So, here's an example that displays a simple Ext JS Grid populated from the Northwind database Products table. The example shows how to use an Ext JS Grid with a JsonStore that supports server side paging and sorting.
Download this example as a working Visual Studio 2008 MVC (Version 1.0) application.
Requirements
- ASP.Net MVC Version 1.0
- Ext JS version 3.0 (works with version 2.x also) - to keep things simple I'm using standalone Ext JS and ext-all.js library.
- Dynamic LINQ Query Library - to keep things simple I've included the source code in the project under App_Code
- Northwind sample Microsoft SQL Server database
Overview
So take a look at the code. It's very simple and straightforward! Here's what you should see when you run the project.
In brief the Index action method of the Products controller handles a vanilla HTTP GET request for the Products index page (/Products/). The view it returns is an almost empty page that simply exposes an element that we can render the Ext JS GridPanel to.
When the index page loads, the load event creates the Ext JS components needed including the JsonStore. It then renders the grid and loads the data store thus triggering an AJAX request to the same URL (this time as a POST, which is the only method supported by the JsonStore component). A different Index action method in the controller handles the POST and if it's an Ajax request it pulls the products from the database and returns JSON in a format expected by the JsonStore.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(int Skip, int Take, string SortDir, string Sort)
{
if (Request.IsAjaxRequest())
{
var products = productsRepository.GetAllProducts();
var results = (new
{
totalRecords = products.Count(),
products = products.OrderBy(Sort + " " + SortDir).Skip(Skip).Take(Take)
});
return Json(results);
}
else
{
return RedirectToAction("Index");
}
}
Some Points of Interest
Where I define the JsonStore component in the ext-lib.js file you will notice I have re-defined the default paging parameter names to match my own code behind. Also notice I am redefining some JsonReader parameters (totalProperty and root) to match the JSON data returned by the controller action method. These steps aren't strictly necessary for this example but I have included it for reference. Alternatively you could use the default Ext JS parameter names and ensure your c# code matches.
Northwind.ProductStore = function(config) {
Northwind.ProductStore.superclass.constructor.call(this, Ext.apply({
paramNames: {
"start": "Skip",
"limit": "Take",
"sort": "Sort",
"dir": "SortDir"
},
totalProperty: 'totalRecords',
root: 'products',
remoteSort: true,
autoLoad: false,
id: "ProductID",
method: "POST"
}, config));
};
The config parameter of the ProductStore constructor above is used to allow us to pass in additional, or override the existing, configuration parameters of the component.
Also in ext-lib.js file you will notice a column renderer method. This is a helper function called during grid rendering to format the data in certain columns. When the columns are specified in the ProductColumnModel you will see I have configured the Stock column to use the stockRenderer method to render the column data.
The stockRenderer method shows how you can reference the data row currently being rendered by the grid and manipulate the HTML rendered in the grid cell. Here I simply add a style to any products that have a stock level less than the reorder level and that are also discontinued.
The column renderer for the Price column uses a built in formatter to render the data as a currency.
The Discontinued column uses a special Ext JS column type to render the boolean value.
Summary
Well, I hope you have found this interesting and helpful. I'm hoping to expand on some of the concepts here and provide examples of some more advanced capabilities and features I have implemented using the ASP.Net MVC and Ext JS frameworks.
Published: Tuesday, 21 July 2009 04:48 PM by Steve
Comments: 8 Comments
