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
- 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:
- 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" />
- 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);
- 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 =
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">
- 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 AccessKey
s 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
- December 2007
- Added
GridView
support. - Page range logic improved.