Click here to Skip to main content
Click here to Skip to main content
Go to top

Amazon-esque Pager

, 29 Dec 2007
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 Pinmemberclick.ashyane27-Jul-13 11:35 
GeneralParse Error Message PinmemberMember 181694916-Apr-09 15:19 
GeneralPager and SqlDataSource or ObjectDataSource PinmemberDejan]29-Mar-09 2:43 
GeneralProblem with Visual Web Developer 2008 Expr. Edition Pinmembermartinvdm13-Oct-08 3:23 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition PinmvpDaniel Vaughan13-Oct-08 4:35 
GeneralRe: Problem with Visual Web Developer 2008 Expr. Edition Pinmembermartinvdm13-Oct-08 6:26 
QuestionProblem using control with VS 2008 Pinmemberlplates6-May-08 1:20 
GeneralRe: Problem using control with VS 2008 PinmvpDaniel Vaughan7-May-08 1:31 
GeneralElement 'PagerControl' is not a known element [modified] Pinmembergwad64525-Mar-08 15:56 
GeneralRe: Element 'PagerControl' is not a known element PinmvpDaniel Vaughan25-Mar-08 23:07 
GeneralPagerControl Doesn't load properly Pinmembersassiecode24-Mar-08 10:44 
GeneralRe: PagerControl Doesn't load properly PinmvpDaniel Vaughan24-Mar-08 20:48 
GeneralVery Nice Pinmembermerlin98131-Dec-07 4:06 
GeneralRe: Very Nice PinmemberDaniel Vaughan31-Dec-07 4:40 
GeneralProblem using the control PinmemberDUMITRU Guraliuc20-Nov-07 5:51 
GeneralRe: Problem using the control PinmemberDaniel Vaughan20-Nov-07 12:58 
GeneralRe: Problem using the control PinmemberDUMITRU Guraliuc20-Nov-07 20:26 
QuestionHow to Use with GridView Pinmemberthomasswilliams21-Oct-07 14:24 
AnswerRe: How to Use with GridView PinmemberDaniel Vaughan21-Oct-07 16:14 
GeneralRe: How to Use with GridView Pinmemberthomasswilliams22-Oct-07 16:52 
GeneralRe: How to Use with GridView [modified] PinmemberDUMITRU Guraliuc21-Nov-07 2:33 
GeneralRe: How to Use with GridView PinmemberDaniel Vaughan21-Nov-07 14:45 
GeneralRe: How to Use with GridView Pinmembernh@zonith.com10-Dec-07 11:10 
Hi Daniel,
 
First of all, thank you very much for creating a pager that is worth (well worth) including in a product. The standard pager simply is not good enough for a professional solution in my opinion.
 
On my project I was introduced your pager after reading a bit about it. It was very easy to insert into my existing GridViews, however I had to make some modifications to make it work correctly (special cases). The first thing I had to do was the same a Dumitru, since I had some things I wanted to set up before the rendering, so I moved some code (actually all of your Page_Load(object sender, EventArgs e) content) to the OnPreRender(EventArgs e) method. This solved some of the problems.
 
One last problem remained: I am using the pager for a GridView (actually several) where you can edit/update/delete the rows "inline" so to speak. Edit/update did not pose a problem, however Delete did in the extreme (last page) case.
 
Consider the following:
You have a GridView with a page size of 2, you have a total of 3 rows to display. You navigate to the second (and last) page and view 1 row. Here you click on Delete to delete the last row. Now the pager (naturally) was very confused since I was on a page which did not exist, and the calculation was just messed up big time. It displayed "showing 3 to 4 ..." even though only 2 rows were present (and NOT shown).
 
To deal with that situation I had to make a few modifications.
 
1. Move the Page_Load(object sender, EventArgs e) content to the OnPreRender(EventArgs e) method
2. Introduce a variable, moveBackOnePage which determines if the pager should jump back one page before rendering.
3. Always set the variable moveBackOnePage to false in the Page_Load(object sender, EventArgs e)
4. Create a new method, MoveBackOnePage() which sets the moveBackOnePage variable to true.
5. At the bottom of the OnPreRender(EventArgs e) right before UpdatePager(PageIndex); I check if the moveBackOnePage variable is set, and if so I decrement the PageIndex by one. (if (moveBackOnePage) { PageIndex -= 1; }
 
That was all I had to change in your pager code. However there was still one task left to finish the job. Everytime I had to (re)display the page, I now had to check if I was currently on the last page (and NOT the first - they can be the same) and if I deleted the last entry on the page. To implement this, I simply extended on Dimitrus thoughts and ended up with the following code in my page codebehing file:
 

protected void ObjectDataSource1_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
// We might have the SelectedCount executed so we process the total number of records.
try
{
int nCount = System.Convert.ToInt32(e.ReturnValue);
PagerControl1.ItemsPerPage = TheGridView.PageSize;
PagerControl1.ItemCount = nCount;
 
// Figure out which page is the last
int lastPage = PagerControl1.ItemCount / PagerControl1.ItemsPerPage;
 
// Find the number of rows displayed on the last page
int rowsOnLastPage = PagerControl1.ItemCount % PagerControl1.ItemsPerPage;
 
// If we are on the last+ page (and not the first! - if only one page is available)
if (PagerControl1.PageIndex > 0 && PagerControl1.PageIndex >= lastPage)
{
// If we are on a page larger than the last OR we are on the last page but there are no rows
if (PagerControl1.PageIndex > lastPage || rowsOnLastPage == 0)
{
// Move the pager back one page to display the "real" last page.
PagerControl1.MoveBackOnePage();
}
}
}
catch (Exception)
{
// do nothing as nothing bad happened. This is due to 2 calls to this method
// where only one of them performs the right task, and the other throws an exception
// which we don't care about
}
}

 
As the code shows I determine in which situations it is appropriate to move the pager back one page before rendering it. As this is called after the Page_Load(object sender, EventArgs e) method of the pager but before the OnPreRender(EventArgs e) method, we can safely do it. The approach above may not be the prettiest solution, but it solved my problem. I hope it can inspire you to think about the problem, and maybe integrate a solution into your pager if possible. I think it requires some interaction between the codebehind of the page holding the pager, and the pager itself, but maybe you can figure out something neat Cool | :cool: .
 
By the way, I modified the control to work with the Theme my project is using, and doing so was very easy thanks to the CSS classes you defined, and the simple background image. Great job!
 
Thanks again for a very nice control!
 
Regards,
Nicolai
GeneralRe: How to Use with GridView PinmemberDaniel Vaughan10-Dec-07 13:53 
GeneralRe: How to Use with GridView PinmemberDaniel Vaughan29-Dec-07 21:38 

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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 30 Dec 2007
Article Copyright 2007 by Daniel Vaughan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid