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:

[code lang=”js”]
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
});
[/code]

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

[code lang=”csharp”]
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);
}
[/code]

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:

[code language=”csharp”]
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);
}
}
[/code]

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:

[code lang=”csharp”]
[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);
}
[/code]

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:

[code lang=”js”]
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.’);
}
});
[/code]

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:

[code lang=”javascript”]
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
});
[/code]

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:

[code lang=”csharp”]
public class PagedRecords
{
public int TotalRecords { get; set; }
public dynamic Records { get; set; }
}
[/code]

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:

[code lang=”csharp”]
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);

}
[/code]

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

[code lang=”csharp”]
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;
}
[/code]

What do you think?