Amazon-esque Pager

• Download source code - 31.4 KB

Sections

• Introduction
• Overview
• Background
• Using the Code
• Pager Browsable Properties
• Localised Resources
• Points of Interest
• Control Base Class
• AccesKeys
• CSS and Enabled = false
• Conclusion
• History

Introduction

There are quite a few pager controls out there. I haven't, however, found any that gives the choice to use either postbacks or plain hyperlinks. This control was born out of a wish to have paging that uses the traditional ASP.NET postback model on one page, and on another uses URL rewriting and caching. I also wanted chunking of page ranges, similar to the paging found on Amazon.com. This is my first article on CodeProject.

Overview

• C# 2.0 UserControl.
• Works with IE 6 and Firefox. Yet to be tested with other browsers.
• Choose between LinkButton or Hyperlink rendering.
• LinkButton mode allows for cancelation of page change during postback.
• Supports multiple pagers on a single page.
• Supports jumping to named anchors when using an ASP.NET AJAX UpdatePanel.
• Supports string formatting of URLs in hyperlinks (URL rewriter friendly).
• Customizable with CSS.

Background

In the past, I believe, ASP.NET has favoured rapid development over maintainability. The reason I mention this is that recently, there appears to be a shift within Microsoft towards a less ViewState/Postback oriented model. Whether this will render many of the postback dependent controls obsolete remains to be seen. This pager works happily in both situations: postback and non-postback. As an aside, I was disappointed to find that WF doesn't play well with ASP.NET. Without a hack, the back button breaks it (UIPAB anybody?). Could this be a missing feature/flaw to encourage the move to WPF? Who knows...

Like many, I have spent much time struggling with automagic controls; trying to bend them to my will. Frequently, I find that by using a Repeater rather than, say, a GridView, I am able to get what I want faster. With that in mind, this control is just UI. What I mean by that is that I haven't built any facility into this pager to allow for it to be databound, or coupled to a databound control such as a GridView. It is, however, easy to setup for use in conjunction with a data bound control.

Using the Code

1. Copy the PagerControl's files from the provided web application project to your own web application project. The relevant files are those contained in the Controls subdirectory of the DemoWebsite project, and can be seen in the following image:



2. Open or create a WebForm where you would like to place the pager, and drag PagerControl.ascx onto the page design surface. This will add a control source tag similar to the one shown below:

<%@ Register Src="Controls/PagerControl/PagerControl.ascx" 
    TagName="PagerControl" TagPrefix="uc1" %>

A PagerControl element will be added to your WebForm, like so:

<uc1:PagerControl ID="PagerControl1" runat="server" />

3. Set the ItemCount and ItemsPerPage properties of the PagerControl instance in the code-behind. Ordinarily, this will be done when data-binding or reading data from your data source.

PagerControl1.ItemsPerPage = itemsPerPage;
PagerControl1.ItemCount = itemCount;

Alternatively, if you wish to use the pager with a GridView, simply assign it a DataControlAdapter in the page Load handler. There is an example of how to do this in the GridViewDemo.aspx in the download. Once this is done, the pager will happily synchronize itself with the GridView instance.

PagerControl1.DataControlAdapter = 
   new DataControlAdapter(gridView, itemCount);

4. If using the PagerControl in LinkButton mode, which is the default, create an event handler for the PageChanged event, such as the following code example demonstrates:

protected void PagerControl1_OnPageChanging(object sender, PageChangeEventArgs e)
{
    int dataIndex = e.PageIndex * PagerControl1.ItemsPerPage;
    Repeater_DummyData.DataSource = 
      /* Get data using dataIndex and PagerControl1.ItemsPerPage*/

    Repeater_DummyData.DataBind();
}

And, wire it up to the PagerControl instance on the WebForm, like so:

<uc1:PagerControl id="PagerControl1" 
   runat="server" OnPageChanging="PagerControl1_OnPageChanging">

5. To use the PagerControl in Hyperlink mode, set the Mode property of the PagerControl instance in the designer. If the UrlFormat property has not been set in the designer, then the page index will be passed in the query string as a parameter named Page. The PagerControl keeps track of the current page index. We only need to load and bind the correct data to, e.g., a Repeater. For further information regarding the UrlFormat property and how it can be used with URL rewriting, please see Pager Properties.

N.B. The control will not be visible if the ItemCount property is less than 1.

Pager Browsable Properties

For the sake of simplicity, I have tried to limit the number of the pager's browsable properties. It is, after all, a User Control, and can be customised directly when it is copied to a project.

• Anchor: The anchor that, when in LinkButton mode, will affect a jump to the anchor on the page. This property is intended to be used when the control is within an AJAX UpdatePanel.
• Mode: Gets or sets the manner in which the PagerControl will be displayed. If the mode is LinkButton, then the pager will use postbacks to indicate that the page has changed. When the Hyperlink is used, all navigation will be done using hyperlinks, and the PageChanged event will not fire.
• UrlFormat: The link URL format. An example value is http://www.example.com/Catalog/Products/{0}, where the format {0} parameter will be replaced by a page index value. If this value is not set, it will be defined as:

UrlFormat = string.Format("{0}?Page={{0}}", Request.Url.AbsolutePath);

where the current page index will be passed as a QueryString parameter called Page.

Localised Resources

PagerControl uses a Global resource file Site.resx. This is how I tend to do localisation. I find that creating a local resource file for a page or a control ends up being more difficult to manage. The following image shows the text values that can be customised/localised.

Points of Interest

Control Base Class

The PagerControl class extends UserControlBase. UserControlBase provides some auxiliary methods, such as for retrieving values from the ViewState and the Request QueryString instance. As you will see, many of these methods are overloaded. You may choose to remove the PagerControl's dependency on the base class if it is does not match your current class hierarchy. The following is an example of one such method:

public int GetViewStateValue(string stateKey, int defaultValue)
{
    object stateValue = ViewState[stateKey];
    int result;
    if (stateValue == null)
    {
        result = defaultValue;
    }
    else

    {
        result = int.Parse(stateValue.ToString());
    }
    return result;
}

AccesKeys

I was keen to add some page shortcuts for the next and previous navigation. Unfortunately the AccessKey attribute of an element does work too well. Well, it didn't for me anyway in IE 6 and FF 2. We will leave a JavaScript solution to a later iteration. For now, next and previous are assigned the AccessKeys 2 and 1 respectively.

CSS and Enabled = false

When testing the control in IE and Firefox, I quickly realised that the two browsers display anchors differently when the disabled attribute is used. As it turns out, IE ignores some styles such as color when a link is disabled. Firefox, on the other hand, does not. So, it was necessary to create a style for disabled links.

a.PagerDisabled
{
    border:none;

    color:Gray;
    background: transparent;
    padding:6px;

}

Conclusion

Well, I hope you find this control useful. If so, then you may like to rate it and/or leave feedback below.

History

• October 2007
• First release.
• December 2007
• Added GridView support.
• Page range logic improved.

This article, along with any associated source code and files, is licensed under The BSD License