Click here to Skip to main content
14,037,896 members
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 29 May 2009
Licenced CPOL

Navigation Web User Control

, 29 May 2009
Rate this:
Please Sign up or sign in to vote.
Navigation Web User Control is a control which creates navigations buttons at run time so the user can navigate on the data list or any other controls.


Navigation Web User Control derived from WebControl (DLL) creates navigation buttons at run time so the user can navigate on the data list or any other controls. The developer can change the alignment and separation text between links or show and hide first, last, previous and next links. This control gets its style from its container. The developer just needs PageIndexClick event to type his/her code when the page is clicked and set paging count in page load.

What Problem Does This Control Solve?

This user control is used to navigate on data list, Repeater or any other controls that contain a list of data and don't have built in navigation like the built in navigation on data grid. When put on an Ajax panel, it will work without postback of the entire page and it will get its style from the container.

How Does this Control Help developers?

Instead of creating paging code for each data lists, just drag and drop the paging user control and handle the page click events in each page. It has many properties to be more flexible, e.g.: (ShowCount, ShowFirst, ShowLast, ShowNext, ShowPrevious, Navigation Links Count per page, Pages Count, CurrentPageIndex, Separation between pages links, Separation After and before CountText).

How to Use the Control?

1-Set Control Setting in Page Load "Layout Properties"

Example 1

if (!IsPostBack)
            PagingControl1.CountAlignment = PagingControl.Alignment.Center;
            PagingControl1.CountPosition  = PagingControl.Position.Bottom;
            PagingControl1.CurrentPageIndex = 1;
            PagingControl1.PagesCount = 20;
            PagingControl1.LinkSeparatorText = "--";
            PagingControl1.LastButtonText = ">>>>";
            PagingControl1.FirstButtonText = "<<<<";
            PagingControl1.NextButtonText = ">>";
            PagingControl1.PreviousButtonText = "<<";
            PagingControl1.NavigationLinkesCount = 20;
            PagingControl1.ShowCount = false;
            PagingControl1.ShowFirst = false;
            PagingControl1.ShowLast = false;
            PagingControl1.ShowNext = false;
            PagingControl1.ShowPrevious = false;

Example 2

if (!IsPostBack)
            PagingControl2.CountAlignment = 
            PagingControl2.AfterCountText = "***";
            PagingControl2.BeforeCountText = "***";
            PagingControl2.CountPosition = 
			CustomWebControlsLib.PagingControl.Position.Top; ;
            PagingControl2.CurrentPageIndex = 2;
            PagingControl2.PagesCount = 20;
            PagingControl2.NavigationLinkesCount = 10;

Example 3

if (!IsPostBack)
            PagingControl3.CountAlignment = 
            PagingControl3.CountPosition = 
		CustomWebControlsLib.PagingControl.Position.Left; ;
            PagingControl3.CurrentPageIndex = 3;
            PagingControl3.PagesCount = 20;
            PagingControl3.NavigationLinkesCount = 15;

Example 4

if (!IsPostBack)
           PagingControl4.CountPosition =
       CustomWebControlsLib.PagingControl.Position.Right; ;
           PagingControl4.CurrentPageIndex = 4;
           PagingControl4.PagesCount = 20;
           PagingControl4.NavigationLinkesCount = 5;

2-To get page index from this control use PagingControl1_PageIndexClick(object sender, EventArgs e) event

The Control Properties and Events


Property NamesDefault ValueDescription
LinkSeparatorText"||"The separation between pages links
PreviousButtonText"Prev"Previous Button Text
NextButtonText"Next"Next Button Text
FirstButtonText"First"First Button Text
LastButtonText"Last"Last Button Text
SeparatedCountText" Of "The separation between current page and total pages 1 of 10
BeforeCountText"("The start separation for count label
AfterCountText")"The end separation for count label
CountAlignment"Alignment.Center"The count Alignment can be Center, Right, Left
CountPosition"Position.Bottom"The count position can be Top, Bottom, Right, Left
ShowCount"true"Show/Hide Count Label
ShowFirst"true"Show/Hide First Button
ShowLast"true"Show/Hide Last Button
ShowPrevious"true"Show/Hide Previous Button
ShowNext"true"Show/Hide Next Button
CurrentPageIndex1The selected page index
PagesCount1Number of pages
NavigationLinkesCount1Number of Navigation Links Appears per page
NoRecordsPerPage1No Records Appear per Page


Event Name Description
PageIndexClickTo allow developer to handle page index click event on his/her web page.
Just get page index from PagingControl1.CurrentPageIndex property and use this event to execute the needed code on page index click.

Sample for How to Use this Control

protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            //set control settings
            PagingControl1.NoRecordsPerPage = 20;
            PagingControl1.CurrentPageIndex = 1;
            PagingControl1.NavigationLinkesCount = 12;

            //Get Items data 
            ViewState["_Items"] = GetItems();

    protected void PagingControl1_PageIndexClick(object sender, EventArgs e)
    }     #endregion
    private void ViewPage(int PageNo)
        if (ViewState["_Items"] != null)
            PagedDataSource objPds = new PagedDataSource();
            DataTable dt = (DataTable)ViewState["_Items"];
            objPds.DataSource = new DataView(dt);
            objPds.AllowPaging = true;
            objPds.PageSize = PagingControl1.NoRecordsPerPage;
            objPds.CurrentPageIndex = PageNo - 1;

            dlstItems.DataSource = objPds;

            double d = Math.Ceiling(Convert.ToDouble(dt.Rows.Count) / 
            PagingControl1.PagesCount = Convert.ToInt32(d);
            dlstItems.Visible = true;
            PagingControl1.Visible = true;
            lblResultMessage.Visible = false;
            dlstItems.Visible = false;
            lblResultMessage.Visible = true;
            PagingControl1.Visible = false;
            lblResultMessage.Text = "No Result";

    private DataTable GetItems()
        DataTable dt = new DataTable();
        for (int i = 1; i <= 400; i++)
            DataRow dr = dt.NewRow();
            dr["ItemId"] = i.ToString();
            dr["ItemName"] = "Item" + i;

        return dt;
    }    #endregion

How Does the Code Actually Work?

When setting Current Page Index and Page count, the system will automatic calculate the first page number. In the links example if I have 20 pages and links appears 5 per page, if selected index will be 12, then the first link in page will be 11 (12-(12%5) +1

if ((CurrentPageIndex % NavigationLinkesCount == 0))
_CurrentStartPage = (CurrentPageIndex - NavigationLinkesCount) + 1;

_CurrentStartPage = (CurrentPageIndex - (CurrentPageIndex % NavigationLinkesCount)) + 1;

All properties values saved in view state to get its value on postback.

On load event, the page links will be drawn on runtime according to the properties values and attach lbtn.Click += LinkedButtonClick event on each link button according to the button name the event will handle the click first will set current page to 1 and previous will subscript 1 and next add 1 and last will set it to page count and other buttons set current index to be its text. After that the controls will be repainted.

            if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnFirst") > -1))
CurrentPageIndex = 1;
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnPrevPage") > -1))
if ((CurrentPageIndex > 1))
CurrentPageIndex = CurrentPageIndex - 1;
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnNextPage") > -1))
if ((CurrentPageIndex < PagesCount))
CurrentPageIndex = CurrentPageIndex + 1;
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnLast") > -1))
CurrentPageIndex = PagesCount;
CurrentPageIndex = Convert.ToInt32(lbtn.Text);

GeneratePagingGenerate links and put it in place holder according to control properties
SelectPageUpdate the count label and disable current page index click
PaintWithoutClickSelectedIts Generate Paging links and update count table without fire PageIndexClick events calling for this method in page load
PaintWithClickSelectedIts Generate Paging links and fire Page Click Event calling for this method in Linked Button Click

Download and run the attached source for more details.


  • 29th May, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nesreen Maged
Technical Lead
Egypt Egypt
I am experienced in web development with Microsoft technologies using ASP.NET Core ,C#, ASP.NET MVC, ASP.NET Web Api, ADO.NET ,LINQ, web services. I have a working experience with Model View Controller (MVC), and have been involved in maintaining versions of source code using TFS (Team Foundation Server) 2010. I have also developed web user controls, master pages, validation controls, CSS files using technologies like AJAX Toolkit, JQuery, JavaScript, Telerik UI controls, XML, HTML ,angular 1.4., angular 2 , typescript, SPA single page application.

You may also be interested in...


Comments and Discussions

GeneralWell done! Pin
Nicholas Butler29-May-09 4:19
mentorNicholas Butler29-May-09 4:19 
GeneralRe: Well done! [modified] Pin
Nesreen Maged29-May-09 4:36
memberNesreen Maged29-May-09 4:36 
Generalneed help Pin
meraadmin16-Sep-09 23:47
membermeraadmin16-Sep-09 23:47 
GeneralRe: need help Pin
Nesreen Maged26-Sep-09 1:23
memberNesreen Maged26-Sep-09 1:23 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190425.1 | Last Updated 29 May 2009
Article Copyright 2009 by Nesreen Maged
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid