In this time CMSN Software Tutorials has decided to provide a very useful tutorial. "How to use pagination with repeater" shows you the way of integrating pagination with the asp.net Repeater control. Usually we use DataPager for pagination. But DataPager Control Can be use only with controls which implement IPageableItemContainer interface like ListView. So we decide to show you how to implement custom pagination control to support repeater.
In the previous tutorial of CMSN Software Tutorials "How to use Ajax auto complete in asp.net", we explained the implementation of Ajax auto complete in asp.net application. since it has JavaScript, Asp.net and jQuery samples, you can select whatever version suitable to you and integrate with your application.
Following sample show you how to use
our
custom pagination control.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PaginationWithRepeater.aspx.cs" Inherits="CMSN.Software.Tutorials.HowToUsePaginationWithRepeater.PaginationWithRepeater" %> <%@ Register Src="UserControls/CustomPagination.ascx" TagName="CustomPagination" TagPrefix="cmsn" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>How to use pagination with repeater</title> <style type="text/css"> .selected-page { background: #a5b8da; background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3)); border: 1px solid #6c84ab; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: bold; line-height: 1; text-align: center; padding: 3px 5px; margin: 0 1px; } .pagination-point { background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #dfdfe2 100%); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#dfdfe2)); border: 1px solid #929395; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; color: #7d7d7d; font-size: 11px; font-weight: bold; line-height: 1; text-align: center; text-decoration: none; padding: 3px 5px; margin: 0 1px; } </style> </head> <body> <form id="PaginationWithRepeaterForm" runat="server"> <div> <asp:Label ID="PaginationDisplayText" runat="server"></asp:Label> <hr /> <asp:Repeater runat="server" ID="PaginatingRepeater"> <ItemTemplate> <%# Eval("FirstColumn")%> | <%# Eval("SecondColumn")%> <br /> </ItemTemplate> </asp:Repeater> <cmsn:CustomPagination ID="RepeaterCustomPagination" runat="server" /> </div> </form> </body> </html>
First we need to register the custom pagination user control to our page. then we can add the user control to the page. If you drag & drop user control to the design view above step will automatically done by the visual studio. Then we have label to display pagination status and repeater control.
//----------------------------------------------------------------------- // <copyright file="PaginationWithRepeater.aspx.cs" company="CMSN Software"> // Copyright © 2011 CMSN Software // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // This program is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with this program. If not, see http://www.gnu.org/licenses. // </copyright> //----------------------------------------------------------------------- namespace CMSN.Software.Tutorials.HowToUsePaginationWithRepeater { using System; using System.Data; using System.Globalization; /// <summary> /// Sample page to show pagination functionality /// </summary> public partial class PaginationWithRepeater : System.Web.UI.Page { /// <summary> /// Handles the Load event of the Page control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void Page_Load(object sender, EventArgs e) { // set data source to the pagination control this.RepeaterCustomPagination.DataSource = SampleData().Tables[0].DefaultView; // set the repeater control to be paged. this.RepeaterCustomPagination.RepeaterControl = PaginatingRepeater; // set the pagination size (number of records per page). this.RepeaterCustomPagination.PaginationSize = 10; // number of pagination points. this.RepeaterCustomPagination.PaginationPointsCount = 3; // display first and last links. (default false) this.RepeaterCustomPagination.ShowFirstLast = true; // selected page style. this.RepeaterCustomPagination.SelectedPageCssClass = "selected-page"; // pagination point style this.RepeaterCustomPagination.PaginationPointCssClass = "pagination-point"; // navigation links style this.RepeaterCustomPagination.NavigationCssClass = "pagination-point"; } /// <summary> /// Handles the PreRender event of the Page control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void Page_PreRender(object sender, EventArgs e) { // set the pagination status label text. this.PaginationDisplayText.Text = "Showing " + RepeaterCustomPagination.CurrentPageText + " of " + RepeaterCustomPagination.Count; } /// <summary> /// Sample method to create dummy data. /// </summary> /// <returns>dummy dataset</returns> private static DataSet SampleData() { DataSet sampleDataSet = new DataSet(); sampleDataSet.Locale = CultureInfo.InvariantCulture; DataTable sampleDataTable = sampleDataSet.Tables.Add("SampleData"); sampleDataTable.Columns.Add("FirstColumn", typeof(string)); sampleDataTable.Columns.Add("SecondColumn", typeof(string)); DataRow sampleDataRow; for (int i = 1; i <= 49; i++) { sampleDataRow = sampleDataTable.NewRow(); sampleDataRow["FirstColumn"] = "Cell1: " + i.ToString(CultureInfo.CurrentCulture); sampleDataRow["SecondColumn"] = "Cell2: " + i.ToString(CultureInfo.CurrentCulture); sampleDataTable.Rows.Add(sampleDataRow); } return sampleDataSet; } } }
Here we use "SampleData()" CSharp method to generate dummy data. we can set all the user control properties at the Page_Load event but to get the CurrentPageText we have to access it Page_PreRender event.
Following code shows how to implement the pagination user control. The main functionality
of the control done by using
PagedDataSource control.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomPagination.ascx.cs" Inherits="CMSN.Software.CustomPagination" %> <asp:Panel ID="Pagination" runat="server"> <asp:LinkButton ID="FirstPageLink" runat="server" onclick="FirstPageLink_Click"><<</asp:LinkButton> <asp:LinkButton ID="PreviousPageLink" runat="server" OnClick="PreviousPageLink_Click"><</asp:LinkButton> <asp:Panel runat="server" ID="PaginationPoints" style="display:inline;"> </asp:Panel> <asp:LinkButton ID="NextPageLink" runat="server" OnClick="NextPageLink_Click">></asp:LinkButton> <asp:LinkButton ID="LastPageLink" runat="server" onclick="LastPageLink_Click">>></asp:LinkButton> </asp:Panel>
Here we use four LinkButton controls for the navigation controls. And pagination points will be dynamically generated based on the "PaginationPointsCount".
//----------------------------------------------------------------------- // <copyright file="CustomPagination.ascx.cs" company="CMSN Software"> // Copyright © 2011 CMSN Software // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // This program is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with this program. If not, see http://www.gnu.org/licenses. // </copyright> //----------------------------------------------------------------------- namespace CMSN.Software { using System; using System.Collections; using System.ComponentModel; using System.Globalization; using System.Web.UI.WebControls; /// <summary> /// Enumeration for pagination mode /// </summary> public enum PaginationType { /// <summary> /// range mode /// </summary> Range, /// <summary> /// numeric mode /// </summary> Numeric } /// <summary> /// pagination control for repeater /// </summary> public partial class CustomPagination : System.Web.UI.UserControl { #region Public Properties /// <summary> /// Gets or sets the pagination mode. /// pagination points text display mode( page number, page range). /// </summary> /// <value> /// The pagination mode. /// </value> [DefaultValue(PaginationType.Range)] public PaginationType PaginationMode { get; set; } /// <summary> /// Gets or sets the pagination points count(number of paginations point to display) /// </summary> /// <value> /// The pagination points count. /// </value> public int PaginationPointsCount { get; set; } /// <summary> /// Gets or sets the size of the pagination (number of records per page). /// </summary> /// <value> /// The size of the pagination. /// </value> public int PaginationSize { get; set; } /// <summary> /// Gets or sets the repeater control to be paged. /// </summary> /// <value> /// The repeater control. /// </value> public Repeater RepeaterControl { get; set; } /// <summary> /// Gets or sets the data source. /// </summary> /// <value> /// The data source. /// </value> public IEnumerable DataSource { get; set; } /// <summary> /// Gets the current page. /// </summary> public int CurrentPage { get { return ViewState["_CurrentPage"] == null ? 0 : int.Parse(ViewState["_CurrentPage"].ToString(), CultureInfo.InvariantCulture); } private set { this.ViewState["_CurrentPage"] = value; } } /// <summary> /// Gets the page count. /// </summary> public int PageCount { get { return ViewState["_PageCount"] == null ? 0 : int.Parse(ViewState["_PageCount"].ToString(), CultureInfo.InvariantCulture); } private set { ViewState["_PageCount"] = value; } } /// <summary> /// Gets the Results count. /// </summary> public int Count { get { return ViewState["_Count"] == null ? 0 : int.Parse(ViewState["_Count"].ToString(), CultureInfo.InvariantCulture); } private set { ViewState["_Count"] = value; } } /// <summary> /// Gets the current page text. /// </summary> public string CurrentPageText { get { return ViewState["_CurrentPageText"] == null ? "0" : ViewState["_CurrentPageText"].ToString(); } private set { this.ViewState["_CurrentPageText"] = value; } } /// <summary> /// Gets or sets the pagination point CSS class. /// </summary> /// <value> /// The pagination point CSS class. /// </value> public string PaginationPointCssClass { get; set; } /// <summary> /// Gets or sets the selected page CSS class. /// </summary> /// <value> /// The selected page CSS class. /// </value> public string SelectedPageCssClass { get; set; } /// <summary> /// Gets or sets the navigation CSS class. /// </summary> /// <value> /// The navigation CSS class. /// </value> public string NavigationCssClass { get; set; } /// <summary> /// Gets or sets the CSS class. /// </summary> /// <value> /// CSS class for the pagination control /// </value> public string CssClass { get; set; } /// <summary> /// Gets or sets a value indicating whether [show first last]. /// </summary> /// <value> /// <c>true</c> if [show first last]; otherwise, <c>false</c>. /// </value> [DefaultValue(false)] public bool ShowFirstLast { get; set; } /// <summary> /// Gets or sets the first page link text. /// </summary> /// <value> /// The first page link text. /// </value> [DefaultValue("<<")] public string FirstPageLinkText { get; set; } /// <summary> /// Gets or sets the last page link text. /// </summary> /// <value> /// The last page link text. /// </value> [DefaultValue(">>")] public string LastPageLinkText { get; set; } /// <summary> /// Gets or sets the previous page link text. /// </summary> /// <value> /// The previous page link text. /// </value> [DefaultValue("<")] public string PreviousPageLinkText { get; set; } /// <summary> /// Gets or sets the next page link text. /// </summary> /// <value> /// The next page link text. /// </value> [DefaultValue(">")] public string NextPageLinkText { get; set; } #endregion /// <summary> /// Handles the Load event of the Page control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void Page_Load(object sender, EventArgs e) { // display the firs page and last page links based on the user selection. this.FirstPageLink.Visible = LastPageLink.Visible = this.ShowFirstLast; // generate the pagination controls at page load. this.GeneratePagination(); // set the navigation links styles with user value. this.PreviousPageLink.CssClass = NextPageLink.CssClass = FirstPageLink.CssClass = LastPageLink.CssClass = this.NavigationCssClass; // set the first page link text if (!string.IsNullOrEmpty(this.FirstPageLinkText)) { this.FirstPageLink.Text = this.FirstPageLinkText; } // set the last page link text if (!string.IsNullOrEmpty(this.LastPageLinkText)) { this.LastPageLink.Text = this.LastPageLinkText; } // set previous page link text. if (!string.IsNullOrEmpty(this.PreviousPageLinkText)) { this.PreviousPageLink.Text = this.PreviousPageLinkText; } // set the next page link text if (!string.IsNullOrEmpty(this.NextPageLinkText)) { this.NextPageLink.Text = this.NextPageLinkText; } this.Pagination.CssClass = this.CssClass; // pagination bar style } /// <summary> /// Handles the Click event of the PaginationPoint control. /// adjust the pagination to fit selected page number. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void PaginationPoint_Click(object sender, EventArgs e) { LinkButton selectingPage = (LinkButton)sender; this.CurrentPage = int.Parse(selectingPage.CommandArgument, CultureInfo.InvariantCulture); this.GeneratePagination(); } /// <summary> /// Handles the Click event of the PreviousPageLink control. /// go to the previous page /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void PreviousPageLink_Click(object sender, EventArgs e) { this.CurrentPage -= 1; this.GeneratePagination(); } /// <summary> /// Handles the Click event of the NextPageLink control. /// go to next page. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void NextPageLink_Click(object sender, EventArgs e) { this.CurrentPage += 1; this.GeneratePagination(); } /// <summary> /// Handles the Click event of the FirstPageLink control. /// move to first page /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void FirstPageLink_Click(object sender, EventArgs e) { this.CurrentPage = 0; this.GeneratePagination(); } /// <summary> /// Handles the Click event of the LastPageLink control. /// move to last page /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void LastPageLink_Click(object sender, EventArgs e) { this.CurrentPage = this.PageCount - 1; this.GeneratePagination(); } /// <summary> /// Creates the pagination point. /// </summary> /// <param name="title">title of the pagination point</param> /// <param name="index">index of the pagination point</param> /// <returns>Pagination point link</returns> private LinkButton CreatePaginationPoint(string title, int index) { LinkButton paginationPoint = new LinkButton(); paginationPoint.ID = index.ToString(CultureInfo.InvariantCulture); paginationPoint.Text = title; paginationPoint.CssClass = this.PaginationPointCssClass; paginationPoint.CommandArgument = index.ToString(CultureInfo.InvariantCulture); paginationPoint.Click += new EventHandler(this.PaginationPoint_Click); return paginationPoint; } /// <summary> /// Generates the pagination. /// </summary> private void GeneratePagination() { PagedDataSource pagedDatasource = new PagedDataSource(); pagedDatasource.DataSource = this.DataSource; // set the data source pagedDatasource.AllowPaging = true; // enable pagination pagedDatasource.PageSize = this.PaginationSize; // set the pagination size. pagedDatasource.CurrentPageIndex = this.CurrentPage; // set the current page. this.PageCount = pagedDatasource.PageCount; // set the number of pages this.Count = pagedDatasource.DataSourceCount; // set the result count // set the max value of the pagination range when page size not define this.PaginationSize = (this.PaginationSize == 0) ? pagedDatasource.DataSourceCount : this.PaginationSize; // hide previous page link on first page. this.PreviousPageLink.Visible = !pagedDatasource.IsFirstPage; // hide next page link on last page. this.NextPageLink.Visible = !pagedDatasource.IsLastPage; // set the first and last link visibility based on user selection. if (this.ShowFirstLast) { // hide first page link on first page. this.FirstPageLink.Visible = !pagedDatasource.IsFirstPage; // hide last page link on last page. this.LastPageLink.Visible = !pagedDatasource.IsLastPage; } this.PaginationPoints.Controls.Clear(); // clear old pagination points. // pagination start index. int startIndex = this.CurrentPage - (this.PaginationPointsCount / 2); startIndex = startIndex < 0 ? 0 : startIndex; // minimum value must be 0. // last index of pagination points int endIndex = this.PaginationPointsCount + startIndex; // display value of pagination point. string paginationPointText; for (int i = startIndex; i < endIndex; i++) { if (this.PaginationMode == PaginationType.Numeric) { // display page number as pagination point text. paginationPointText = (i + 1).ToString(CultureInfo.CurrentCulture); } else { // display page number as range. // start number of the range. int startNumber = ((i + 1) * this.PaginationSize) + 1 - this.PaginationSize; // end value of range. if the range grater than maximum number, display max number. int endNumber = (i + 1) * this.PaginationSize > pagedDatasource.DataSourceCount ? pagedDatasource.DataSourceCount : (i + 1) * this.PaginationSize; paginationPointText = startNumber + " - " + endNumber; } // selected page as a label and rest as links. if (i == this.CurrentPage) { // set the selected page text. this.CurrentPageText = paginationPointText; using (Label selectedPage = new Label()) { selectedPage.Text = paginationPointText; selectedPage.CssClass = this.SelectedPageCssClass; this.PaginationPoints.Controls.Add(selectedPage); } } else if (i < pagedDatasource.PageCount) { this.PaginationPoints.Controls.Add(this.CreatePaginationPoint(paginationPointText, i)); } } // bind paged data to repeater this.RepeaterControl.DataSource = pagedDatasource; this.RepeaterControl.DataBind(); } } }
This code containing the tricky part of pagination. You can understand the logic by going through the above code.
Download tutorial
0 comments:
Post a Comment