Another simple example of how to use Ext JS with ASP.NET MVC. This time I am going to display a number of fictitious movies using an Ext JS GridPanel. The movies list will be served by an ASP.NET MVC application.
The View
As I explained in my previous Ext JS with ASP.NET MVC example, in a model-view-controller scenario the View renders entities from the Model into a form suitable for interaction.
The View in this example is the html page containing the Movies grid. The ExtJS components I use in this page are a JsonStore and a GridPanel:
Ext.onReady(function () {
var filmsStore = new Ext.data.JsonStore({
url: 'http://localhost/MvcApp/Films',
root: 'Films',
idProperty: 'Id',
totalProperty: 'count',
fields: ['Id', 'Title', 'ReleaseYear', 'Rating'],
remoteSort: true,
autoDestroy:true,
autoLoad:true
});
var filmsGrid = new Ext.grid.GridPanel({
title: 'Movies',
store: filmsStore,
columns: [
{ id: 'title-col', header: "Title", width: 180, dataIndex: 'Title', sortable: true },
{ header: "Rating", width: 65, dataIndex: 'Rating', sortable: true, align: 'right' },
{ header: "Year", width: 75, dataIndex: 'ReleaseYear', sortable: true, align: 'right' }
],
autoExpandColumn: 'title-col',
renderTo: Ext.getBody(),
width: 400,
height: 250,
loadMask: true,
columnLines: true
});
});The Controller
Requests to the /Films route in the view are sent to FilmsController. This controller will ask the Model to produce the needed data. When a request is made to the /Films route, the Index method will be executed:
public class FilmsController : Controller
{
//
// GET: /Films/
public JsonResult Index()
{
FilmsContainer container = FilmsDataContext.GetFilms();
return Json(container,JsonRequestBehavior.AllowGet);
}
}Note that Index returns Json-encoded data in a JsonResult instance. This is the data the movies grid needs.
Building the Model
The model is the objects that represent the data and domain logic of the application. A movie will be represented by an instance of the Movie Class:
public class Film
{
public int Id { get; set; }
public string Title { get; set; }
public int ReleaseYear { get; set; }
public string Rating { get; set; }
}FilmsContainer is a Class that exposes an array of Film objects. An instance of this Class will be Json-serialized by the Index method of the FilmsController Class:
public class FilmsContainer
{
public Film[] Films { get; set; }
public int Count { get; set; }
}FilmsDataContext creates the movies data. To keep the example simple, I am hard-coding a few films:
public class FilmsDataContext
{
public static FilmsContainer GetFilms()
{
Film[] filmsArray = new Film[5];
filmsArray[0] = new Film()
{
Id = 1,
Title = "ACADEMY DINOSAUR",
ReleaseYear = 2006,
Rating = "PG"
};
filmsArray[1] = new Film()
{
Id = 1,
Title = "ACE GOLDFINGER",
ReleaseYear = 2006,
Rating = "G"
};
filmsArray[2] = new Film()
{
Id = 1,
Title = "AFFAIR PREJUDICE",
ReleaseYear = 2006,
Rating = "G"
};
filmsArray[3] = new Film()
{
Id = 1,
Title = "AGENT TRUMAN",
ReleaseYear = 2006,
Rating = "PG"
};
filmsArray[4] = new Film()
{
Id = 1,
Title = "ALICE FANTASIA",
ReleaseYear = 2006,
Rating = "NC-17"
};
FilmsContainer container = new FilmsContainer()
{
Films = filmsArray,
Count = filmsArray.Length
};
return container;
}
}Downloads
Grab the code for this article: ExtJS_With_ASP_MVC_2.zip
Want to learn more?
My Ext JS 3.0 Cookbook has more than a hundred step-by-step recipes that you can use to build your Ext JS applications. Download a sample chapter and see for yourself.
About Jorge
