Monday, February 28, 2011

Creating a simple Pager user control with ASP.NET and C#

The following is a simple user control that will display a Pager functionality for any type of web page that deals with large amount of data that need to be segmented in pages.

This is part of a larger project and perhaps in the future I will present the finished project, but for now this user control can help us organize our data with a data list.

  1. Create a new web site project in Visual Studio
  2. Add a new Web User control named Pager.
  3. In Source View (Asp.Net) write the following code
  4. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Pager.ascx.cs" Inherits="UserControls_Pager" %>
    <asp:Label ID="currentPageLabel" runat="server" />
    <asp:Label ID="howManyPagesLabel" runat="server" />

    <asp:HyperLink ID="previousLink" runat="server">Previous</asp:HyperLink>

    <asp:Repeater ID="pagesRepeater" runat="server">
            <asp:HyperLink ID="hyperlink" runat="server" Text='<%#Eval("Page") %>' NavigateUrl='<%#Eval("Url") %>' />
    <asp:HyperLink ID="nextLink" runat="server">Next</asp:HyperLink>

  5. Switch to design view and you should see the following:
  6. Code to the code behind file and write the following code:
  7. Note: I have created a simple struct called PageUrl to create an association between the page number and the Url of the link button. In other words, each time we need to go to the next page, we need to know the page number and url for that page.
  8. using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    //Struct that represents a page number and url association
    public struct PageUrl
        private string page;
        private string url;

        public string Page
            get { return page; }

        public string Url
            get { return url; }

        public PageUrl(string page, string url)
   = page;
            this.url = url;

    public partial class UserControls_Pager : System.Web.UI.UserControl

        //show the pager
        public void Show(int currentPage, int howManyPages, string firstPageUrl, string pageUrlFormat, bool showPages)
            //Display pagin controls
            if (howManyPages > 1)
                //Make pager visible
                this.Visible = true;

                //Display the current page
                currentPageLabel.Text = currentPage.ToString();
                howManyPagesLabel.Text = howManyPages.ToString();

                //Create the "previous" link
                if (currentPage == 1)
                    previousLink.Enabled = false;
                    previousLink.NavigateUrl = (currentPage == 2) ? firstPageUrl : String.Format(pageUrlFormat, currentPage - 1);

                //Create the "Next" link
                if (currentPage == howManyPages)
                    nextLink.Enabled = false;
                    nextLink.NavigateUrl = String.Format(pageUrlFormat, currentPage + 1);

                //Create the page links
                if (showPages)
                    //Set the list of pages and their Urls as an array
                    PageUrl[] pages = new PageUrl[howManyPages];

                    //Create page Url and page elements in the array
                    pages[0] = new PageUrl("1", firstPageUrl);
                    for (int i = 2; i <= howManyPages; i++)
                        pages[i - 1] = new PageUrl(i.ToString(), String.Format(pageUrlFormat, i));

                    //If this is the current page, don't create a link
                    pages[currentPage - 1] = new PageUrl((currentPage).ToString(), "");

                    //set the repeater
                    pagesRepeater.DataSource = pages;

        protected void Page_Load(object sender, EventArgs e)

 Probably for some of you this does not make a lot of sense. The idea is that you can drop this control to any web page that needs a custom repeater that can go on top and/or at the bottom of the pages you need to present data.

No comments:

Post a Comment

Thank you for your thoughts. Your comment will appear in my blog shortly after review.

Have a great day!