Ext JS with ASP.NET MVC: GridPanel Paging

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) {
2	    var config = config || {};
3	    Ext.applyIf(config, {
4	        fields: ['Id', 'Name', 'Amount'],
5	        root: 'records',
6	        totalProperty: 'total'
7	    });
8	    FeesStore.superclass.constructor.call(this, config);
9	};
10	Ext.extend(FeesStore, Ext.data.JsonStore);
11	 
12	var feesBilledStore = new FeesStore ({
13	    url: 'fees/feesbilled
14	});

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
2	{
3	    public int TotalRecords { get; set; }
4	    public dynamic Records { get; set; }
5	}

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) {
2	 
3	    PagedRecords result = DataRepository.GetFeesBilledPaged(start, limit);
4	 
5	    return Json(new { total = result.TotalRecords, records = result.Records }, JsonRequestBehavior.AllowGet);
6	 
7	}

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

public static PagedRecords GetFeesBilledPaged(int startRow, int pageSize)
2	{
3	    var totalRecords = db.GetFeesBilledCount();
4	    var fees = from f in db.GetFeesBilled()
5	        select new FeesBilledModel()
6	        {
7	            Id = (int)h.employee_id,
8	            Name = h.employee_name,
9	            Amount = (decimal)h.fees_billed
10	        };
11	    PagedRecords paged = new PagedRecords() { TotalRecords = totalRecords, Records = hours.Skip(startRow).Take(pageSize).ToList() };
12	 
13	    return paged;
14	}

What do you think?