Implement an ASP.NET repeater with paging capability

ASP.NET Repeaters are handy controls that allow a developer to display a list of items without needing to do a whole lot of code. For example, our code library index page is built off a repeater that hits a database to load the results. You'll notice that we use paging in the repeater to page results. We anticipate this library to grow substantially over the next few years, so it makes complete sense to paginate the results to avoid user frustration while scanning the article index. I mean, really, who would want to scroll through a long list of hundreds of entries at naueseam? Not many.

Paging in a repeater is really simple, as is this example provided.

User Control with Repeater

Here is what our repeater will look like on the HTML side of things. Nothing too impressive or too much out of the ordinary. The only things worth mentioning are the Previous and Next buttons. You can page your repeater any way you like, but I've chosen Previous and Next for simplicity and because they make sense for my control. Oh, and I almost forgot to mention that this HTML is embedded in a User Control rather than a page. User controls give you more flexibility and allows for some neat coupling of code to the functionality required.

<asp:Panel id="pnlResults" runat="server" Visible="true">
    <asp:label id="lblCurrentPage" runat="server"></asp:label>
    <br /><br />
    <asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
        <HeaderTemplate>
            <ul class="list bordered">
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <asp:HyperLink ID="hlnkTitle" runat="server"><b>[www.loremipsum.com]</b></asp:HyperLink>
                <p><asp:Label id="lblSummary" runat="server">[desc...]</asp:Label></p>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
    <br /><br />
    <asp:LinkButton ID="lnkPreviousPage" runat=server CssClass="o6" OnClick="lnkPreviousPage_Click">Previous Page</asp:LinkButton>
  
    <asp:LinkButton ID="lnkNextPage" runat=server CssClass="o6" OnClick="lnkNextPage_Click">Next Page</asp:LinkButton>
</asp:Panel>

<asp:Panel ID="pnlNoResults" runat="server" Visible="false">
    <div>
        There are currently no items available.
    </div>
</asp:Panel>


Namespaces required

using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;


Repeater code-behind

Some really simple stuff here for the most part. The main component that will allow us to page the repeater is the handy PagedDataSource object, which is part of the .NET framework. Also, my apologies for lack of inline documentation. I felt the code is simplistic enough to be self-explanatory and really doesn't warrant any level of intense commenting.

#region Initializations
protected void Page_Load(object sender, EventArgs e)
{
}
#endregion

#region Data Loading
public void BindData()
{
    pnlResults.Visible = false;
    pnlNoResults.Visible = true;

    DataTable DTArticles = Articles.GetArticles();

    PagedDataSource objPDS = new PagedDataSource();
    objPDS.AllowPaging = true;
    objPDS.PageSize = 10;

    //Set datasource
    objPDS.DataSource = DTArticles.DefaultView;

    if objPDS.Count > 0)
    {
        pnlResults.Visible = true;
        pnlNoResults.Visible = false;

        // Set the PagedDataSource's current page
        objPDS.CurrentPageIndex = CurrentPage; //- 1;

        lblCurrentPage.Text = "Page: " + (CurrentPage + 1).ToString() + " of "
                                       + objPDS.PageCount.ToString();

        // Disable Prev or Next buttons if necessary
        lnkPreviousPage.Enabled = !objPDS.IsFirstPage;
        lnkNextPage.Enabled = !objPDS.IsLastPage;

        rptData.DataSource = objPDS;
        rptData.DataBind();
    }
}
#endregion

#region Repeater Events
protected void rptData_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        //Unimportant Code Ommitted
    }
}
#endregion

#region Control Evnets
protected void lnkNextPage_Click(object sender, EventArgs e)
{
    //Set viewstate variable to the next page
    CurrentPage += 1;

    //Reload control
    BindData();
}

protected void lnkPreviousPage_Click(object sender, EventArgs e)
{
    //Set viewstate variable to the previous page
    CurrentPage -= 1;

    //Reload control
    BindData();
}
#endregion

#region Properties
public CodeType ArticleType
{
    get
    {
        if (ViewState["v_ArticleType"] == null)
        {
            ViewState["v_ArticleType"] = CodeType.WEBORWIN;
        }
        return (CodeType)ViewState["v_ArticleType"];
    }
    set
    {
        ViewState["v_ArticleType"] = value;
    }
}

public int CurrentPage
{
    get
    {
        //Look for current page in ViewState
        object o = this.ViewState["_CurrentPage"];
        if (o == null)
            return 0; // default page index of 0
        else
            return (int)o;
    }
    set
    {
        this.ViewState["_CurrentPage"] = value;
    }
}
#endregion


That's all there is to it. All you need to do is call the public BindData method from the container page, maybe pass in a variable or two for filtering, and you've got a paged repeater ready for use.

More information

---

David Nicolosi
Drop-In Code Back to index