Ext JS With ASP.NET MVC Sample

This is a simple example of how you can use Ext JS and ASP.NET MVC together. The scenario is the same I have used in my previous Ext JS with PHP articles: I am going to display a number of fictitious categories using an Ext JS combo box. In this case, the combo box items’ data – the categories – will be served by an ASP.NET MVC application.

The MVC application

When I create the ASP.NET MVC application, Visual Studio builds a default folder structure where the main components of the application are distributed like this:

• The Controllers folder is where you put Controller classes that handle URL requests
• The Models folder will contain classes that represent and manipulate data
• Views is the folder where you put UI template files that are responsible for rendering output
• Scripts is where you put JavaScript library files and scripts
• Content is where you put CSS and image files, and other non-dynamic/non-JavaScript content
• App_Data is where you store data files you want to read/write

Large applications will likely use multiple Visual Studio projects, but I will stick to this default structure in order to keep the example simple.

The View

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 Categories combo box.

I called this page combo.html, and the Ext JS components I use are a ComboBox and a JsonStore:

Ext.onReady(function() {

    var categoriesStore = new Ext.data.JsonStore({
        url: 'http://localhost/MvcApp/Categories',
        root: 'Categories',
        fields: ['Id', 'Name']
    });

    var combo = new Ext.form.ComboBox({
        store: categoriesStore,
        displayField: 'Name',
        valueField: 'Id',
        typeAhead: true,
        mode: 'remote',
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'Select a category...',
        selectOnFocus: true,
        applyTo: 'categories-combo'
    });
});

The Controller

To adhere to the default url routing rules in ASP.NET MVC, the Controller is named CategoriesController. This will permit that requests to the  http://localhost/MvcApp/Categories url in the view (combo.html) get routed to my Controller.

CategoriesController will handle the View requests and will ask the Model to produce the needed data:

public JsonResult Index() {

    CategoriesContainer container = CategoriesDataContext.GetCategories();

    return  this.Json(container);

}

When a request is made to the http://localhost/MvcApp/Categories url, the Index() method will be executed. Note that the return value of Index() is of type JsonResult and not ActionResult. This indicates that the method returns JSON-encoded data. The encoding is acomplished with the call to Controller.Json() .

CategoriesContainer and CategoriesDataContext are part of the Model. Let’s now take a look at them.

Building the Model

The term “model” refers to the objects that represent the data of the application, as well as the corresponding domain logic with the business rules and validation. CategoriesContainer is  a Class that exposes an array of Category objects:

public class CategoriesContainer
{
    public Category[] Categories { get; set; }
}

A key point here is that when serialized to JSON, an instance of CategoriesContainer will have the signature the View’s JsonStore is expecting.

CategoriesDataContext creates the categories data. In a real-world application this would likely be more involved than simply hard-coding the data.

public class CategoriesDataContext
{
    public static CategoriesContainer GetCategories() {
        Category[] categoriesArray = new Category[10];
        for (int i = 0; i < 10; i++) {
            Category category = new Category { Id = i, Name = "Category " + i.ToString() };
            categoriesArray[i] = category;
        }
        CategoriesContainer container = new CategoriesContainer();
        container.Categories = categoriesArray;
        return container;
    }
}

And last, the definition of a category can be something as simple as this Category Class:

public class Category
{
    public int Id {get;set;}
    public string Name {get;set;}
}

Downloads

Download the full sample: ExtJS_With_ASP_MVC.zip