In this article I will explain one approach you can take when you need to handle session timeouts in your ExtJS + ASP.NET MVC applications. The goal of this approach is simply to alert the user when her server session has timed out.

These are the basic steps you will follow when implementing this approach:

1. Before an AJAX request is handled on the server side, determine if the session timed out. If the session timed out, respond with a “session timed out” code. If it didn’t, proceed to handle the AJAX request.
2. Intercept the AJAX responses on the client side. When the “session timed out” code is detected, inform the user.

Intercepting ExtJS AJAX requests on the server

Suppose you have a FeesBilled and AccountsReceivable ExtJS data stores like so:

App.DetailsStore = function (config) {
    var config = config || {};
    Ext.applyIf(config, {
        fields: ['Id', 'Name', 'Amount'],
        root: 'records',
        totalProperty: 'total',
        remoteSort: true,
        sortInfo: {field:'name',direction:'asc'}
    });
    App.DetailsStore.superclass.constructor.call(this, config);
};
Ext.extend(App.DetailsStore, Ext.data.JsonStore);

var feesBilledStore = new FeesStore ({
    url: 'accounting/feesbilled
});
var accountsReceivableStore = new FeesStore ({
    url: 'accounting/accountsreceivable
});

Requests sent from these stores will be handled by the following ASP.NET MVC action methods:

public ActionResult FeesBilled(int start = 0, int limit = 0, string sort = "name", string dir = "asc")
{
    EmployeeModel empl = Session["empl"] as EmployeeModel;
    return DL.GetFeesBilled(start, limit, sort, dir, empl);
}

public ActionResult AccountsReceivable(int start = 0, int limit = 0, string sort = "name", string dir = "asc")
{
    EmployeeModel empl = Session["empl"] as EmployeeModel;
    return DL.GetAccountsReceivable(start, limit, sort, dir, empl);
}

As you can see, these action methods need an EmployeeModel instance that is stored in a session variable. And you need to guarantee that the session exists and is valid before passing the EmployeeModel instance to the data access layer of the system.

Then, how do you determine if the user’s session has timed out before these requests are processed?

You can accomplish this in ASP.NET MVC with a custom action filter. Action filters are custom attributes that allow you to perform logic either before an action method is called, or after an action method runs.

This is an action filter you can use to check for session timeouts:

public class AjaxSessionExpiredFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        HttpContext context = HttpContext.Current;
        // Check if session is supported.
        if (context.Session != null)
        {
            if (context.Session.IsNewSession)
            {
                // If this is a new session and an old session cookie exists, then old session timed out.
                string sessionCookie = context.Request.Headers["Cookie"];
                if ((null != sessionCookie) && (sessionCookie.IndexOf("ASP.NET_SessionId") > -1))
                {
                    context.Response.Write("error=sessiontimeout");
                    context.Response.End();
                }
            }
        }

        base.OnActionExecuting(filterContext);
    }
}

Notice that you need to override the filter’s OnActionExecuting method. This method is fired before the action method executes.

Armed with this custom action filter, you can simply decorate the controller methods like so:

[AjaxSessionExpiredFilter]
public ActionResult FeesBilled(int start = 0,
            int limit = 0, string sort = "name", string dir = "asc")
{
    EmployeeModel empl = Session["empl"] as EmployeeModel;

    return DL.GetFeesBilled(start, limit, sort, dir, empl);
}

[AjaxSessionExpiredFilter]
public ActionResult AccountsReceivable(int start = 0,
            int limit = 0, string sort = "name", string dir = "asc")
{
    EmployeeModel empl = Session["empl"] as EmployeeModel;

    return DL.GetAccountsReceivable(start, limit, sort, dir, empl);
}

After decorating the methods with the custom action filter, every time the methods are called and the session has timed out, the response generated will be “error:sessiontimeout”.

Your ExtJS application needs to catch and handle this response. Let’s see how it’s done.

Handling session timeout in ExtJS

In your ExtJS application, you can check for the session timeout code utilizing a handler function for the requestcomplete event of the Ext.Ajax class. As Ext.Ajax is a singleton, your requestcomplete handler will run for any AJAX requests that completed successfully.

A simplified version of the handler could look like this:

Ext.Ajax.on('requestcomplete', function (conn, response, options) {
    if (response.responseText.indexOf("error=sessiontimeout") > -1) {
        Ext.Msg.alert('Session Timeout', 'Your session has timed out. Please refresh this page to start a new session.');
    }
});

And that’s all it takes. Want to give it a try?

In this article I describe one of my favorite approaches for implementing gridpanel dataset paging in ExtJS + ASP.NET MVC projects.

Assume you have a “feesBilledStore” JsonStore instance configured like so:

var FeesStore = function (config) {
    var config = config || {};
    Ext.applyIf(config, {
        fields: ['Id', 'Name', 'Amount'],
        root: 'records',
        totalProperty: 'total'
    });
    FeesStore.superclass.constructor.call(this, config);
};
Ext.extend(FeesStore, Ext.data.JsonStore);

var feesBilledStore = new FeesStore ({
	url: 'fees/feesbilled
});

How do you feed the feesBilledStore JsonStore from an ASP.NET MVC controller?

When you use paging with your ExtJS gridpanels, along with the paged results, you need to supply your data store the actual size of the recordset. This is the value used to calculate the number of pages available, which, among other things, is displayed in your paging toolbar.

In my ExtJS + ASP.NET MVC projects, I tend to connect the server-side models with the ExtJS gridpanels with the help of a class that I name PagedRecords:

public class PagedRecords
{
	public int TotalRecords { get; set; }
    public dynamic Records { get; set; }
}

PagedRecords nicely maps my data models to the gridpanel ExtJS views I use. The Records property will store the recordset’s page to be rendered by the gridpanel, and the TotalRecords property stores the actual size of the recordset.

When converted to Json, an instance of PagedRecords results in a javascript object that will provide the data and the recordset size needed by the ExtJS gridpanel and the pagingtoolbar bound to it.

Using the PagedRecords class, the MVC Contoller method that will feed my hypothetical feesBilledStore would look like this:

public ActionResult FeesBilled(int start = 0, int limit = 15) {

	PagedRecords result = DataRepository.GetFeesBilledPaged(start, limit);

	return Json(new { total = result.TotalRecords, records = result.Records }, JsonRequestBehavior.AllowGet);

}

And my data access routine would need to return an instance of PagedRecords like so:

public static PagedRecords GetFeesBilledPaged(int startRow, int pageSize)
{
	var totalRecords = db.GetFeesBilledCount();
	var fees = from f in db.GetFeesBilled()
		select new FeesBilledModel()
		{
			Id = (int)h.employee_id,
            Name = h.employee_name,
            Amount = (decimal)h.fees_billed
        };
    PagedRecords paged = new PagedRecords() { TotalRecords = totalRecords, Records = hours.Skip(startRow).Take(pageSize).ToList() };

    return paged;
}

What do you think?

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