A Basic ASP.NET Pager Control

Download source code - 3.59 KB

Introduction

This control provides a simple method for adding paging functionality to your ASP.NET site. The control itself is not "attached" to any data source; instead, that is left up to you, the developer, to take care of.

Background

I currently work for a Web development company (Thap) in Middlesbrough, UK, and was working on a project that required paging in several parts. The project was using Repeaters for displaying data that the pager would work with, but after unsuccessfully searching for existing controls that meet the project's requirements, I decided to build a paging control myself.

Thap has graciously granted me permission to release the code on to this site under the LGPL license.

Using the Code

Implementing the control is very simple: either include the files in your project, or copy and paste what you need.

To add the control to the page, include the following line at the top:

<%@ Register Src="Pager.ascx" TagName="Pager" TagPrefix="userControl" %>

Now, add this line:

<userControl:Pager ID="Pager" runat="server" Separator=" | " FirstText="First"
        PreviousText="<" NextText=">" LastText="Last" PageSize="2" NumberOfPages="3"
        ShowGoTo="True" OnChange="Pager_Changed" />

Here is a list of the properties you can set:

Separator: Specify the string that is to appear between the number links
FirstText: String to be used for the "first button". Default is "|<"
PreviousText: String to be used for the "previous button". Default is "<"
NextText: String to be used for the "next button". Default is ">"
LastText: String to be used for the "last button". Default is ">|"
PageSize: A handy place to store your page sizes, not used in the code
NumberOfPages: The number of page links to display in between the previous/next links.
ShowGoTo: Displays the GoTo functionality.

The next thing to do is take care of the code-behind by listening to the OnChange event:

protected void Page_Load(object sender, EventArgs e)
{
	/*Either populate the data using one of the lines */
	PopulateDataSource(1, this.Pager.PageSize);

	/*OR*/
	this.Page.GenerateLinks();
}

protected void Pager_Changed(object sender, PagerEventArgs e)
{
    PopulateDataSource(e.Number, e.PageSize);
}

 private void PopulateDataSource(int page, int pageSize)
{
    // This bit is purely to have some data. usually this
    // would be from a database/XML file etc.
    var data = new List<String>();

    for (int i = 0; i < 20; i++)
    {
        data.Add(i.ToString());
    }

    //Set the repeater with a "page" of data
    this.RepeaterData.DataSource =
         data.Skip((page - 1) * pageSize).Take(pageSize);
    this.RepeaterData.DataBind();

    //Calculates how many pages of a given size are required
    this.Pager.TotalPages =
         (data.Count / pageSize) + (data.Count % pageSize > 0 ? 1 : 0);

    this.Pager.GenerateLinks();
}

Pager.TotalPages: Required to correctly display the number links
Pager.GenerateLinks(): Use this to generate the links if changes are made, such as the currentPageNumber is changed (either by you, or when the OnChange event is fired)

The event arguments provided are:

First: A boolean indicating whether the "first link" has been clicked
Previous: A boolean indicating whether the "previous link" has been clicked
Next: A boolean indicating whether the "next link" has been clicked
Last: A boolean indicating whether the "last link" has been clicked
PageSize: The page size you set previously
CurrentPageNumber: The number of the current page; this auto increments/decrements when the first/last/previous/next link is clicked

Points of Interest

Currently, the pager is only a user control mainly due to the fact that there was not enough time to bundle it in a library, but this may change in the future.

The numbered links between the Previous and Next links will be generated with the CurrentPageNumber in the middle. So, if you have set NumberOfPages to 21 and CurrentPageNumber to 30, then it will display 20...30...40.

And, below is an example of how the control could look: