asp.net paging control with source code

| Posted by

Hi there!

I Pramod Tripathy a .net developer by profession often scratch my head while developing, some time  because of nervousness, or because of  the excitement that this profession has to offer  . But let me tell u being a developer the more you learn the more you left behind scratching your head and at times it leads to an innovative discovery, and this is what my scratching head instinct has gifted me. Basically I develop web based applications, and one of the most important aspects that should be kept in mind is the proper utilization of resource and the two most important resources in any field of development is  time and space.

The faster your application loads or executes and the lowest it occupies the space certainly worth a big applaud.

But it was only when I was made to realize about these two valuable resources and how things could be done to utilize them at the best possible way. And this rigorous attention has brought to the creation of paging control, a user control which has been developed by our team to cut sort all the limitations that has been and is being faced by most developers that they even do not know.

In order to use this pager control you must know about the uses of user control, delegates and sql queries, do not worry if have never come across these techniques, as I had explained  in detail about their uses with codes.

Take for example the inbuilt paging system of grid view we often use to represent our database records and if some one asks where’s the paging functionality in it, and we say here it comes and simply add the tag Allow Paging=”true” as shown below which actually has some flaws which I had discussed in this blog.


<asp:GridView runat="server" ID="GrdGroup" CssClass="gridview" AutoGenerateColumns="false"

OnRowCommand="GrdGroup_RowCommand" AllowPaging="True" OnPageIndexChanging="GrdGroup_PageIndexChanging">

Actually every time the paging event of grid view is called, all the records from the database has to be fetched though we see only 10 of them on our interface, with this we can understand the amount of time and space used for no means.

This is what makes our paging control a real master piece of development in accountability of resource

effectiveness. The paging control that we use just fetches the amount of record that we require as per our programming need and it does has many more features that could be utilized for better programming. This paging control fetches the record as per the start and end index has been initialized.

So accessing the database records is very much in our control by using this control. In order to use this control you have to register it on you web page say the name of the paging control is uctlPager.ascx on the top as shown in the figure:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="testPager.ascx.cs" Inherits="include_ratingmodule_testPager" %>

<%@ Register Src="~/uctlPager.ascx" TagName="uctlPager" TagPrefix="uc1"%>

After registering the pager control you can use it on you web page where ever you like for example I want to associate this pager control with the grid view records there fore I had initialized the user control just below the grid view:

<asp:GridView ID="grdTest" runat="server">

</asp:GridView>

<uc1:uctlPager ID="UctlPager1" runat="server" p_ContainerCSS="pager" p_SelectedButtonCSS="pagerselected" />

In the above user control uctlPager we have initialized two pager control properties p_ContainesCSS and

p_SelectedButtonCSS with a css class to give a better look to our pager control.

There are three places where we have to work on in order to make this pager control work

  1. On the web .aspx page (front end).
  2. On the web page. cs file(code behind).

The first step has been done and there are many more properties that can be added as per the need, that I will explain as it comes forward.

Now let us come to second point where we initialize the pager control to generate pager and this is how it is done.

public partial class products : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

InitializePager();

}

private void InitializePager()

{

UctlPager1.p_ExtractDataMethodName = getMainCategories;

//UctlPager1 is the user control ID that we have defined in our page.

//p_ExtractDataMethodName is a delegate property is getting set by a delegate method

//getMainCategories.

UctlPager1.p_AssociatedControl = GrdTest;

UctlPager1.p_PageSize = 2;

//the above two statements initializes two more properties of the pager control which

//could be understood by the name it has been given.

}

private void getMainCategories(double argStartIndex, double argEndIndex)

{

double lTotalRecords = 0;

getMainCategory(argStartIndex, argEndIndex, out lTotalRecords);

CHandler = null;

UctlPager1.p_TotalRecords = lTotalRecords;

// p_TotalRecords is the public property defined in our pager control.

PopulateMainCategory(lCollection);

}

Do not get panic seeing at the code, this is just an example where I had used this pager control. The important things required for using this control are:

protected void Page_Load(object sender, EventArgs e)

{

InitializePager();

}

private void InitializePager()

{

UctlPager1.p_ExtractDataMethodName = getMainCategories;

UctlPager1.p_AssociatedControl = GrdTest;

UctlPager1.p_PageSize = 2;

}

Initializing your pagerUser control in the pageload event as I have done above with InitailizePager() method.

In this method what you have to do is actually initailizing the delegate property of the user control whose name is p_ExtractDataMethodName. Therefore you should have a method in your webpage pageload event  itself that sets  the  p_ExtractDataMethodName property which is of Delegate Type ExtractData. Therefore the method we define to set the delegate property should be having a delegate signature, that is it should have two arguments startIndex and EndIndex of type double and have a return type void. which in this example is getMainCategories.

Which definition is given below.


private void getMainCategories(double argStartIndex, double argEndIndex)

{

double lTotalRecords = 0;

Dataset ds =  getMainCategory(argStartIndex, argEndIndex, out lTotalRecords);

UctlPager1.p_TotalRecords = lTotalRecords;

PopulateMainCategory(ds);

}

In the delegate method getMainCategories we actually call the data access function which actually return records as per our set index. First let me explain what actually the above function doing. The above function In addition with indexed records as per our sql query also return us the Total no of records in the table. Which should be set the pager controls  p_TotalRecords property.

And the collection which is returned from the query can be assigned to the gridview datasource or to the div inner html no matter by which control the records are represented the paging control works with all of them we just have to do the basics which I have discussing.

Now the collection which is returned can either be be assigned the grid view or with the div .In this blog I have taken gridview as a example:


private void PopulateMainCategory(Dataset ds)

{

grdTest.DataSource = ds;

grdTest.DataBind();

}

As the same collection can be either populated with grid view or the div the pager control is going to work any way.

Now let us talk about the function where we actually write our customized query for this pager control I am showing you a example given below

#region Gets the category collection

public DataSet getMainCategory(double argStartIndex, double argEndIndex, out double argTotalRecords)

{

argTotalRecords = 0;

Sqlconnection con=new sqlconnection (“Data Source=your server name;Initial     Catalog= your database name;User ID=”your database userid”;pwd=”your password” ");

Sqldataadapter adapter;

adapter.SelectCommand.Parameters.Add (new SqlParameter ("@Start Index", argstartIndex));
adapter.SelectCommand.Parameters.Add (new SqlParameter ("@End Index", argEndIndex));

adapter = new sqldataadapter ("Select * from (Select *, ROW_NUMBER() OVER (Order By CreateDate   DESC) AS RowNumber from CategoryMaster AS CategoryMaster Where RowNumber >= @StartIndex AND RowNumber <= @EndIndex; Select Count(CategoryID) AS TotalRecords from eCommerce_CategoryMaster", con);

Dataset ds = new dataset ();

adapter. fill (ds);

return ds;

}

In this point we will discuss about the customized function with a customized query shown above that actually let the pagercontrol work. Firstly the function that we define should have these three arguments  a) startIndex  and EndIndex of type double   whose value are by default passed from the pagercontrol itself and based on this Index only the required records are fetched.

public DataSet getMainCategory(ActiveStatus argActiveStatus, double argStartIndex, double argEndIndex, out double argTotalRecords)

In addition with the indexed records Your function should also  return the Total number of records the particular table contains and for this to happen your function should have the third argument of type double with reference keyword out. So that TotalRecords could be returned with the collection. Now let me explain about customized query we are using:

The first part of the query uses sql ROW_NUMBER() to fetch records with an addition coloumn RowNumber from our table CategoryMaster and based on this rownumber only the parameters startIndex and Index actually fetches the records (shown below). Let me remind you if you are using SQL SERVER 2005 only that this function ROW_NUMBER() is available to you.

For other versions or other database there are other options that could be replaced by this function.

("Select * from (Select *, ROW_NUMBER() OVER (Order By CreateDate DESC) AS RowNumber from CategoryMaster AS CategoryMaster Where RowNumber >= @StartIndex AND RowNumber <= @EndIndex;

The second part of the query actullay returns the total no of records which is used by the pagercontrol to initialize its p_TotalRecords property which we did in our delegate method above.

Select Count(CategoryID) AS TotalRecords from eCommerce_CategoryMaster"

Let me show you  the printscreen of the output page:

As I had initialized p_PageSize property of the pager control with 2, we are seeing only two records at a time.

And as we had initialized the p_SelectedButtonCSS property with a particular css the selected button 1 is highlighted.

With this I conclude my blog I hope I had given u something new that could help you in better programming.

Do give your feedback and comments on this blog.

You can download this pager control from this given link: Download asp.net custom paging control

 

One thought on “asp.net paging control with source code

Leave a Reply

Your email address will not be published. Required fields are marked *