Click here to Skip to main content
11,477,007 members (75,022 online)
Click here to Skip to main content

Amazon-esque Pager

, 29 Dec 2007 BSD 50.6K 284 60
Rate this:
Please Sign up or sign in to vote.
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. <%@ 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" />
  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. 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.

    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. 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">
  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:
  • 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:

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.

License

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

Share

About the Author

Daniel Vaughan
President Outcoder
Switzerland Switzerland
Daniel Vaughan is a Microsoft MVP and co-founder of Outcoder, a Swiss software and consulting company dedicated to creating best-of-breed user experiences and leading-edge back-end solutions, using the Microsoft stack of technologies--in particular WPF, WinRT, Windows Phone, and also Xamarin.Forms.

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 Windows Phone apps including Surfy, Intellicam, and Splashbox; and is the creator of a number of popular open-source projects including Calcium SDK, and Clog.

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

Daniel's Blog | MVP profile | Follow on Twitter

Windows Phone Experts
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Questiontwo instance in same page Pin
click.ashyane27-Jul-13 12:35
memberclick.ashyane27-Jul-13 12:35 
GeneralParse Error Message Pin
Member 181694916-Apr-09 16:19
memberMember 181694916-Apr-09 16:19 
GeneralPager and SqlDataSource or ObjectDataSource Pin
Dejan]29-Mar-09 3:43
memberDejan]29-Mar-09 3:43 
GeneralProblem with Visual Web Developer 2008 Expr. Edition Pin
martinvdm13-Oct-08 4:23
membermartinvdm13-Oct-08 4:23 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition Pin
Daniel Vaughan13-Oct-08 5:35
mvpDaniel Vaughan13-Oct-08 5:35 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition Pin
martinvdm13-Oct-08 7:26
membermartinvdm13-Oct-08 7:26 
QuestionProblem using control with VS 2008 Pin
lplates6-May-08 2:20
memberlplates6-May-08 2:20 
GeneralRe: Problem using control with VS 2008 Pin
Daniel Vaughan7-May-08 2:31
mvpDaniel Vaughan7-May-08 2:31 
GeneralElement 'PagerControl' is not a known element [modified] Pin
gwad64525-Mar-08 16:56
membergwad64525-Mar-08 16:56 
Hi,

The control looks awesome and I would love to use it however I'm doing
something wrong or there is a problem with my configuration.

I am using Visual Web Developer Express 2005 (VWD) and building a wep app with a gridview.   I have placed all files as per the instructions and dragged the control file to the design surface of the form.   It shows the PagerControl tags with the red squiggle error, the error message is the subject line of this msg.

Also, a new line is shown at the top of the page source listing:

<%@ Register Src="Controls/PagerControl/PagerControl.ascx" TagName="PagerControl" TagPrefix="uc1" %>
................................
VWD error after website build states: Could not load type 'Orpius.Web.Controls.PagerControl'.  

File: PagerControl.ascx

Line: 1
.............................

Please let me know if you can help.

Thanks,
Dawg

modified on Tuesday, March 25, 2008 10:02 PM
GeneralRe: Element 'PagerControl' is not a known element Pin
Daniel Vaughan26-Mar-08 0:07
mvpDaniel Vaughan26-Mar-08 0:07 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 30 Dec 2007
Article Copyright 2007 by Daniel Vaughan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid