Monday, February 21, 2011

ASP.NET Tip: Creating Paging for a Repeater Control

There are many ways to page data in a DataList control or Repeater control in ASP.NET. But I think the following solution is the easiest way to create a custom paging when working with a DataList or a Repeater control. You can modify to have the "Next" and "Previous" button as well as styling the current page number easily. This article is from http://itmanagement.earthweb.com and I hope it will help you sometimes!

A common question is "How do I implement paging within a Repeater?" Although the beauty of the Repeater control is its flexibility, you're on your own for building most functions. ASP.NET 2.0 has included some new controls that provide paging, as does the DataGrid in ASP.NET 1.1. However, this tip shows you how to roll your own paging for a simple data viewer.
Here's the code behind for the page this tip builds:
using System;
using System.Data;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class PagedRepeater : System.Web.UI.Page
   public int PageNumber
         if (ViewState["PageNumber"] != null)
            return Convert.ToInt32(ViewState["PageNumber"]);
            return 0;
         ViewState["PageNumber"] = value;
   protected override void OnInit(EventArgs e)
      rptPages.ItemCommand +=
         new RepeaterCommandEventHandler(rptPages_ItemCommand);
   protected void Page_Load(object sender, EventArgs e)
      if (!Page.IsPostBack)
   private void LoadData()
      SqlConnection cn = new SqlConnection("your connection goes
      SqlDataAdapter da = new SqlDataAdapter("your query goes
                                              here", cn);
      DataTable dt = new DataTable();
      PagedDataSource pgitems = new PagedDataSource();
      DataView dv = new DataView(dt);
      pgitems.DataSource = dv;
      pgitems.AllowPaging = true;
      pgitems.PageSize = 25;
      pgitems.CurrentPageIndex = PageNumber;
      if (pgitems.PageCount > 1)
         rptPages.Visible = true;
         ArrayList pages = new ArrayList();
         for (int i = 0; i < pgitems.PageCount; i++)
         pages.Add((i + 1).ToString());
         rptPages.DataSource = pages;
         rptPages.Visible = false;
      rptItems.DataSource = pgitems;
   void rptPages_ItemCommand(object source,
                             RepeaterCommandEventArgs e)
      PageNumber = Convert.ToInt32(e.CommandArgument) - 1;

This is the ASPX web page:
<%@ Page Language="C#"
         Inherits="PagedRepeater" %>
<head><title>Paged Repeater</title>
<form runat="server">
      <asp:Repeater ID="rptPages" Runat="server">
      <table cellpadding="0" cellspacing="0" border="0">
      <tr class="text">
         <asp:LinkButton ID="btnPage"
                         Container.DataItem %>"
                         Runat="server"><%# Container.DataItem %>
      <asp:Repeater ID="rptItems" runat="server">
      <li><%# Eval("pkItemID") %>: <%# Eval("Description") %></li>
The page uses one Repeater for the page numbers and a second one for the items. This example shows items from a product catalog, but any database table will do. To start, create a ViewStateproperty (see the previous tip) to store the current page number. This property also is coded to return a zero, which is the first page number (at least as far as the database is concerned).
When the page is first loaded, the code calls the LoadData routine, which gets a DataTablecontaining the records. Then, that is connected to the PagedDataSource class by way of aDataView object. The DataView also can provide sorting; this makes it easy to allow users to sort by a particular column heading. You simply create another ViewState property and store the sort field at this point.
The example has a page size of 25, which is put into the PagedDataSource object. Based on the number of rows, the PageCount property is populated with the total number of "pages" in the data source. The code forces the CurrentPageIndex to the default page number of zero, which positions it at the first record on page 0. The other bonus to the PagedDataSource object is that it will give back only 25 records, which means you don't have to keep count or manually bind it to the item list repeater. This is a nice change from the code you may have done in ASP to perform this same function.

Next, the example needs to build the page number list; the code does this with an ArrayList holding each page number as a string. Note that the example adjusts the page number up by one because the average person doesn't understand that page zero is the first page—the user will see page 1 as the first page.
The example wires up an event handler to respond to the clicks in the paging repeater next. It converts the CommandArgument and subtracts one from it because it's showing the value in the repeater as one more than the actual page number. Calling LoadDatarepositions the list to the appropriate page.
The result is a list of pages above a short item list that changes as the user selects different pages. This model can be expanded, as previously mentioned, to support a user-selectable page length or sorting options. However, if you change the page size, be aware that the number of pages will change and the previous page number may be invalid. The PagedDataSource won't generate an error if you pick a CurrentPageIndexoutside the valid range, but you should be sure to trap for this condition anyway.

About the Author

Eric Smith is the owner of Northstar Computer Systems, a web-hosting company based in Indianapolis, Indiana. He is also a MCT and MCSD who has been developing with .NET since 2001. In addition, he has written or contributed to 12 books covering .NET, ASP, and Visual Basic. Send him your questions and feedback via e-mail at questions@techniquescentral.com.

1 comment:

  1. This is a nice article..
    Its very easy to understand ..
    And this article is using to learn something about it..

    c#, dot.net, php tutorial

    Thanks a lot..!