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?
Thank you this helps! How would you go about adding a sort column(s) and sort order?
In my sencha application we are using sencha extjs4 in the front side and .net in the back side.
can i know how to navigate one page to another page from the controller depending upon the .net responses.
can i know how to create an application as secure to prevent it from attack of hackers
Yes< you can instantiate different views depending on the server responses. Regarding security, follow the best practices for web applications.
Thanks for your reply.If you can suggest code for achieving the same?i am unable to change from one view to other in sencha extjs4 and .net in the service side.