Click here to Skip to main content
15,860,861 members
Articles / Web Development / ASP.NET
Article

Amazon-esque Pager

Rate me:
Please Sign up or sign in to vote.
4.86/5 (19 votes)
29 Dec 2007BSD6 min read 85.5K   350   59   26
Yet another list pager, but this one can use LinkButtons or simple Hyperlinks, provides scrolling within an ASP.NET AJAX UpdatePanel, and behaves similarly to the paging found on Amazon.com.

Screenshot - PagerControl.jpg

Sections

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. Relevant files.

  3. 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:
  4. ASP.NET
    <%@ Register Src="Controls/PagerControl/PagerControl.ascx" 
        TagName="PagerControl" TagPrefix="uc1" %>

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

    ASP.NET
    <uc1:PagerControl ID="PagerControl1" runat="server" />
  5. 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.
  6. C#
    PagerControl1.ItemsPerPage = itemsPerPage;
    PagerControl1.ItemCount = itemCount;

    new 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.

    C#
    PagerControl1.DataControlAdapter = 
       new DataControlAdapter(gridView, itemCount);
  7. 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:
  8. C#
    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:

    ASP.NET
    <uc1:PagerControl id="PagerControl1" 
       runat="server" OnPageChanging="PagerControl1_OnPageChanging">
  9. 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.

Browsable Pager properties

  • 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:
  • C#
    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.

Pager Resource file.

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:

C#
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.

CSS
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.

License

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


Written By
Engineer
Switzerland Switzerland
Daniel is a former senior engineer in Technology and Research at the Office of the CTO at Microsoft, working on next generation systems.

Previously Daniel was a nine-time Microsoft MVP and co-founder of Outcoder, a Swiss software and consulting company.

Daniel is the author of Windows Phone 8 Unleashed and Windows Phone 7.5 Unleashed, both published by SAMS.

Daniel is the developer behind several acclaimed mobile apps including Surfy Browser for Android and Windows Phone. Daniel is the creator of a number of popular open-source projects, most notably Codon.

Would you like Daniel to bring value to your organisation? Please contact

Blog | Twitter


Xamarin Experts
Windows 10 Experts

Comments and Discussions

 
Questiontwo instance in same page Pin
click.ashyane27-Jul-13 11:35
click.ashyane27-Jul-13 11:35 
GeneralParse Error Message Pin
rogercute200216-Apr-09 15:19
rogercute200216-Apr-09 15:19 
GeneralPager and SqlDataSource or ObjectDataSource Pin
Dejan]29-Mar-09 2:43
Dejan]29-Mar-09 2:43 
GeneralProblem with Visual Web Developer 2008 Expr. Edition Pin
Martin Van de Moortel13-Oct-08 3:23
Martin Van de Moortel13-Oct-08 3:23 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition Pin
Daniel Vaughan13-Oct-08 4:35
Daniel Vaughan13-Oct-08 4:35 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition Pin
Martin Van de Moortel13-Oct-08 6:26
Martin Van de Moortel13-Oct-08 6:26 
QuestionProblem using control with VS 2008 Pin
lplates6-May-08 1:20
lplates6-May-08 1:20 
GeneralRe: Problem using control with VS 2008 Pin
Daniel Vaughan7-May-08 1:31
Daniel Vaughan7-May-08 1:31 
GeneralElement 'PagerControl' is not a known element [modified] Pin
gwad64525-Mar-08 15:56
gwad64525-Mar-08 15:56 
GeneralRe: Element 'PagerControl' is not a known element Pin
Daniel Vaughan25-Mar-08 23:07
Daniel Vaughan25-Mar-08 23:07 
GeneralPagerControl Doesn't load properly Pin
sassiecode24-Mar-08 10:44
sassiecode24-Mar-08 10:44 
GeneralRe: PagerControl Doesn't load properly Pin
Daniel Vaughan24-Mar-08 20:48
Daniel Vaughan24-Mar-08 20:48 
GeneralVery Nice Pin
merlin98131-Dec-07 4:06
professionalmerlin98131-Dec-07 4:06 
GeneralRe: Very Nice Pin
Daniel Vaughan31-Dec-07 4:40
Daniel Vaughan31-Dec-07 4:40 
GeneralProblem using the control Pin
DUMITRU Guraliuc20-Nov-07 5:51
DUMITRU Guraliuc20-Nov-07 5:51 
GeneralRe: Problem using the control Pin
Daniel Vaughan20-Nov-07 12:58
Daniel Vaughan20-Nov-07 12:58 
GeneralRe: Problem using the control Pin
DUMITRU Guraliuc20-Nov-07 20:26
DUMITRU Guraliuc20-Nov-07 20:26 
QuestionHow to Use with GridView Pin
thomasswilliams21-Oct-07 14:24
thomasswilliams21-Oct-07 14:24 
AnswerRe: How to Use with GridView Pin
Daniel Vaughan21-Oct-07 16:14
Daniel Vaughan21-Oct-07 16:14 
GeneralRe: How to Use with GridView Pin
thomasswilliams22-Oct-07 16:52
thomasswilliams22-Oct-07 16:52 
GeneralRe: How to Use with GridView [modified] Pin
DUMITRU Guraliuc21-Nov-07 2:33
DUMITRU Guraliuc21-Nov-07 2:33 
GeneralRe: How to Use with GridView Pin
Daniel Vaughan21-Nov-07 14:45
Daniel Vaughan21-Nov-07 14:45 
GeneralRe: How to Use with GridView Pin
Nicolai.Henriksen10-Dec-07 11:10
Nicolai.Henriksen10-Dec-07 11:10 
GeneralRe: How to Use with GridView Pin
Daniel Vaughan10-Dec-07 13:53
Daniel Vaughan10-Dec-07 13:53 
GeneralRe: How to Use with GridView Pin
Daniel Vaughan29-Dec-07 21:38
Daniel Vaughan29-Dec-07 21:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.