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

Download the full sample from my downloads page.

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.