Pager Control for ASP.NET

• Download source and demo (VB + C#) project for ASP.NET 1.1 - 71.4 Kb
• Download source and demo (VB + C#) project for ASP.NET 2.0 - 42.4 Kb

Figure 1 - Paging again!

Introduction

Paging is an important thing that every web developer should know about. In ASP.NET 1.1 and 2.0, just DataGrid and GridView has built-in support for paging, and for somebody who prefers Repeater or DataList to DataGrid or GridView (like me!), it is so painful to implement paging. And as a developer, it was very painful for me. So I decided to write a pager control to simplify this problem on my web applications in a developer friendly way. First, I implemented a version of the Pager control last year. It came with some cool features, but also had two major weaknesses.

1. It wasn't suitable for more than 20 pages.
2. It used querystring to get the current pPage index, and it was annoying somehow.

and hopefully the presented version has fixed both of the above issues.

1. It has the ability to handle large size pages with something I called Smart Shortcuts, they are really cool and are shown in figure-1 in gray background cells.
2. The generated hyperlinks do more than a simple hyperlink. they cause a postback to the server, so no more query string parameter will be needed.

If you'd used the previous version of the Pager control, some part of this article may be boring for you, but bear with me and just skip the repeated contents.

Note: the prepared samples are categorized by ASP.NET versions, just download the desired version and you will have the samples (VB and C#) and the source code together.

What a paging system needs and what it is supposed to provide

Things that we should provide our paging system:

1. How many items I want to display per page (I call it "PageSize").
2. Which page am I in (I call it "CurrentPage").

Things that the paging system is supposed to provide:

1. Sort of hyperlink numbers for users to navigate through the pages (see Figure 1).
2. Items (results) which I want to show at the current page (like a DataSet or DataTable that is bindable).
3. Number of total records (it is required for the Pager control to render itself appropriately).

What parts does it consist of?

This paging system consists of the following parts and I will try to explain them:

The first part:

A stored procedure which lives in the database. It takes the two main parameters ("PageSize" and "CurrentPage") and return the results for the page that we are in.

The second part:

The Pager control which builds the numerical hyperlinks for us in a user friendly way. These hyperlinks will be used to navigate through the pages.

The last but not the least:

And finally, a web page which hosts the Pager control and calls the stored procedure to fetch the current page's data.

How to deploy and use them

I've provided source code and samples for ASP.NET 1.1(VB and C#) and ASP.NET 2.0 (VB and C#), so if you are interested to see some real code, just download the files. Otherwise if you want to continue, let's prepare our pager control to be deployed.

1. Write your own business specific stored procedure

1-1: Paging on SQL Server 2000:

OK, we are at the sweetest section, deployment! Let me start from the stored procedure. It comes with the demo project that you may have downloaded. Here is its screenshot that I have taken:

(You may change the procedure name, but don't forget to change the procedure name in the web application code.)

As you know, a stored procedure is a business specific object, and its variable names are strongly dependent on the names of your business objects. So, you ought to customize some of its variables. To make the world easy for myself and of course for you, I colorized the sections so that we have a special focus on them.

To modify the stored procedure to fit into your business, do the things below. We will start from the bottom to top:

1. The blue section (except the "RowID" statement) means the output columns that you want to show on the web page. So first of all, write your own table's columns here right after the "RowID" statement. For example, assume that you want to show the "Title", "Price", and "PubDate" columns of the "Pubs" database. The blue section will change to:

   "SELECT RowID, Title, Price, PubDate"

2. The green section means your "Select Logic". According to our example, if you have no "WHERE" statement in your query, the green section will change to:

   "SELECT Title, Price, PubDate FROM Titles"

   and if you have to use the "WHERE" statement for example, it will change to this:

   "SELECT Title, Price, PubDate FROM Titles WHERE Price > 11"

   You may use other T-SQL statements to sort the rows. As you can see, in the green section, I used an "ORDER BY" statement to sort my results. It is optional and up to you. In our example, we may want to sort our results by "Title", so we modify it to:

   "SELECT Title, Price, PubDate FROM Titles WHERE Price > 11 ORDER BY Title"

3. OK, the pink section is part of a procedure that creates a temporary table, add your blue section's (except "RowID") columns to it. In our example, the pink part would change to:

   "Title varchar(80), Price money, PubDate datetime"

4. And the last part is the yellow section. This section really relies on part 2 (the green guy!), so it will change the "FROM" and "WHERE" statements that you used in part 2 (green section). In our example if we don't use "WHERE" in the green part, the yellow section will become:

   "FROM Pubs"

   And if we use "WHERE" in the green part, it will become:

   "FROM Pubs WHERE Price > 11"

1-2: Paging on SQL Server 2005:

SQL Server 2005 supports paging internally via the ROW_NUMBER() function. So please take a look at the figure below:

Since this function has a great documentation on the Internet, I would not cover it here.

Congratulations! You did the hardest part of the deployment. Save the stored procedure in your desired database, and carry on.

2. Use the Pager Control

After creating the stored procedure, we will continue with the Pager control (the main excuse of the whole of this article!). Let's see how we can use it and how it can do its tasks in our paging system. I divided its useful properties into two main categories:

<<GlobalizationSettings>>

As the name shows, the language of the Pager control can be changed by these properties. Let's take a look at the screenshot below:

As you see, the default language is (en-us) but if you want, you can easily change this property to change the Pager control's language to your local language, even Unicode languages like Persian or Arabic. Also, there is a property, named RTL, which change the direction of the Pager control.

<<BehavoiuralSettings>>

You can change the behaviour of your Pager control here. See the figure below please:

• PageSize: it is the property which sets the count of items that every page should display. [ Default value: 15 ]
• AlternativeTextEnabled: it is a boolean property and tells the Pager control whether to generate ALT (Tooltip) text for the pager control or not. [ Default value: True ]
• ShowFirstLast: it is a boolean property and tells the Pager control whether to show the "First" and "Last" hyperlinks or not. [ Default value: False ]
• CompactedPageCount: it will set the count of items to render in compacted mode. If the user requests any page number greater than this value, the pager control will render itself in NotCompactedPageCounts count. For example, if you set CompactedPageCount=10 and NotCompactedPageCounts=20, if you are in a page lower than 10, the count of page hyperlinks will be 10; once you hit the tenth page, the pager will increase its number of items to 20.  [ Default value: 10 ]
• NotCompactedPageCounts: see the CompactedPageCount description. [ Default value: 15 ]
• EnableSmartShortCuts: a boolean property to switch smart shortcuts on/off. [ Default value: True ]
• MaxSmartShortCutCounts: set the maximum count of smart shortcuts. [ Default value: 6 ]
• SmartShortCutRatio: it will be used internally to generate smart shortcuts. [ Default value: 3 ]
• SmartShortCutThreshold: if total page count is greater than this value, smart shortcuts will be generated. otherwise no smart shorcut will be generated. [ Default value: 30 ]

3. The Hoster Web Page

OK, if everything is alright till now, let's continue and complete our paging system. As you can see in the demo project, we have a web page which hosts our controls (Repeater for repeating the results and the Pager control). Let's see what happens if a user requests that page:

    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            pager1.CurrentIndex = 1;
            BindRepeater(1);
        }
    }        

As you can see, after getting the current page index after postback (we know it as "CurrentPage"), we will pass is to our BindRepeater method. Then it calls the procedure via a SqlCommand object and fetches the results for that page.

    public void pager_Command(object sender, CommandEventArgs e) {
        int currnetPageIndx = Convert.ToInt32(e.CommandArgument);
        pager1.CurrentIndex = currnetPageIndx;
        BindRepeater(currnetPageIndx);
    }        

and finally bind the data consumer like this:

    private void BindRepeater(int pageNo) {

        SqlConnection cn = new SqlConnection(strConn);

        SqlCommand Cmd = new SqlCommand("dbo.GetPagedProducts_sql2k5", cn);
        Cmd.CommandType = CommandType.StoredProcedure;
        SqlDataReader dr;

        Cmd.Parameters.Add("@PageSize", 
            SqlDbType.Int, 4).Value = pager1.PageSize;
        Cmd.Parameters.Add("@CurrentPage", 
            SqlDbType.Int, 4).Value = pageNo;
        Cmd.Parameters.Add("@ItemCount", 
            SqlDbType.Int).Direction = ParameterDirection.Output;

        cn.Open();
        dr = Cmd.ExecuteReader();

        Repeater1.DataSource = dr;
        Repeater1.DataBind();

        dr.Close();
        cn.Close();

        Int32 _totalRecords = Convert.ToInt32(
               Cmd.Parameters["@ItemCount"].Value);
        pager1.ItemCount = _totalRecords;
    }

Colorizing the Pager control, according to your website's colors

I hope everything is okay until now. If you are done with the deployment, let's go to customize the Pager control colors. I've created two CSS stylesheets that can colorize the Pager control in two different ways.

Take a look at these screenshots please:

LightStyle.css: Provides the above style for your Pager control (recommended for light background web pages).

DarkStyle.css: Provides the above style for your Pager control (recommended for dark background web pages).

(To customize the control in your preferred way, you should manipulate the stylesheet classes in the "Styles" folder).

A little bit more about Pager control

ASP.NET controls can be created by inheriting them from the System.Web.UI.WebControl class. And after that, just override the Render operation to build your control in the way that you want. And the Pager control is built upon this theory too.

As you will see in the source, we force the HtmlTextWriter to write our desired HTML output. Take a look at the Pager control source project to get any more details.

History

• Nov 2006: second release. No more annoying querystring requirement, and with something cool I call SmartShortCuts to handle large amounts of pages. Nothing new, but useful (still looking forward to reading your useful feedbacks).
• Aug 2005: first release. With some cool features, and of course, a big weakness: unable to handle large page size situations. Thanks for the great feedbacks.

That's it, I hope this little explanation could help you deploy the Pager control appropriately. Tell me what you think about this control. Any comment would be appreciated.