In this article I will explain with an example, how to implement paging in Repeater control in ASP.Net using C# and VB.Net.
Repeater control by default does not have paging (pagination) enabled, hence custom paging in Repeater control will be implemented with the help of Stored Procedure in ASP.Net using C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Stored Procedure for Paging
The following Stored Procedure makes use of ROW_NUMBER function to fetch records Page Wise from SQL Server Database Table.
The PageIndex and PageSize values are passed as parameter and the Stored Procedure returns the Total records of the Table using the RecordCount Output parameter.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
CREATE PROCEDURE GetCustomersPageWise
@PageIndex INT = 1
,@PageSize INT = 10
,@RecordCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
ORDER BY [CustomerID] ASC
)AS RowNumber
,[CustomerID]
,[CompanyName]
,[ContactName]
INTO #Results
FROM [Customers]
SELECT @RecordCount = COUNT(*)
FROM #Results
SELECT * FROM #Results
WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
DROP TABLE #Results
END
GO
HTML Markup
The following HTML Markup consists of an HTML Table and two ASP.Net Repeater controls.
One Repeater is used for populating the Customer records and another Repeater will be used for populating the pager control.
The Repeater control consists of an ItemTemplate. The content of this template will be repeated for each record present in its DataSource.
Repeater for populating records
The Repeater control is wrapped inside an HTML Table so that the records can be populated as a Grid.
<table class="Repeater" cellspacing="0" rules="all" border="1">
<tr>
<th scope="col" style="width: 80px">
Customer Id
</th>
<th scope="col" style="width: 150px">
Customer Name
</th>
<th scope="col" style="width: 150px">
Company Name
</th>
</tr>
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' />
</td>
<td>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="lblCompanyName" runat="server" Text='<%# Eval("CompanyName") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
Repeater for pager
The following Repeater control is used for populating the Pager.
The HTML Markup has some C# and VB.Net code to swap the CSS style classes for the Current Page and the remaining pages, so that the Current Page is viewed distinguished from others.
C#
<asp:Repeater ID="rptPager" runat="server">
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>'CommandArgument='<%# Eval("Value") %>'
CssClass='<%#Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
VB.Net
<asp:Repeater ID="rptPager" runat="server">
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
CssClass='<%#If(Convert.ToBoolean(Eval("Enabled")), "page_enabled", "page_disabled")%>'
OnClick="Page_Changed" OnClientClick='<%#If(NotConvert.ToBoolean(Eval("Enabled")), "return false;", "") %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Binding the Repeater with Customized Paged Data
Inside the Page Load event, the GetCustomersPageWise function is called with PageIndex parameter value as 1.
Inside the function, the Stored Procedure is executed and it fetches the records based on PageIndex and PageSize from Customers Table of the Northwind database using DataReader.
Finally, the DataReader is used to populate the Repeater control.
After execution of DataReader, the Total Record Count value is fetched using the RecordCount Output parameter.
Finally, the Total Record Count value is passed to the PopulatePager method along with the PageIndex.
C#
private int PageSize = 10;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.GetCustomersPageWise(1);
}
}
private void GetCustomersPageWise(int pageIndex)
{
string constring = ConfigurationManager.ConnectionStrings["constring"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("GetCustomersPageWise", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", PageSize);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
con.Open();
IDataReader idr = cmd.ExecuteReader();
rptCustomers.DataSource = idr;
rptCustomers.DataBind();
idr.Close();
con.Close();
int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
this.PopulatePager(recordCount, pageIndex);
}
}
}
VB.Net
Private PageSize As Integer = 10
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.GetCustomersPageWise(1)
End If
End Sub
Private Sub GetCustomersPageWise(pageIndex As Integer)
Dim constring As String = ConfigurationManager.ConnectionStrings("constring").ConnectionString
Using con As New SqlConnection(constring)
Using cmd As New SqlCommand("GetCustomersPageWise", con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", PageSize)
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4)
cmd.Parameters("@RecordCount").Direction = ParameterDirection.Output
con.Open()
Dim idr As IDataReader = cmd.ExecuteReader()
rptCustomers.DataSource = idr
rptCustomers.DataBind()
idr.Close()
con.Close()
Dim recordCount As Integer = Convert.ToInt32(cmd.Parameters("@RecordCount").Value)
Me.PopulatePager(recordCount, pageIndex)
End Using
End Using
End Sub
Populating the Pager control
The PopulatePager method accepts the count of the total records present in the Table and the current PageIndex.
Then, some calculations are done to find the first and the last page of the pager and the using a loop a List of Pages are populated and finally, are bound to the Repeater control for populating the Pager.
C#
private void PopulatePager(int recordCount, int currentPage)
{
double dblPageCount = (double)((decimal)recordCount / Convert.ToDecimal(PageSize));
int pageCount = (int)Math.Ceiling(dblPageCount);
List<ListItem> pages = new List<ListItem>();
if (pageCount > 0)
{
for (int i = 1; i <= pageCount; i++)
{
pages.Add(new ListItem(i.ToString(), i.ToString(), i != currentPage));
}
}
rptPager.DataSource = pages;
rptPager.DataBind();
}
VB.Net
Private Sub PopulatePager(recordCount As Integer, currentPage As Integer)
Dim dblPageCount As Double = CDbl(CDec(recordCount) / Convert.ToDecimal(PageSize))
Dim pageCount As Integer = CInt(Math.Ceiling(dblPageCount))
Dim pages As New List(Of ListItem)()
If pageCount > 0 Then
For i As Integer = 1 To pageCount
pages.Add(New ListItem(i.ToString(), i.ToString(), i <> currentPage))
Next
End If
rptPager.DataSource = pages
rptPager.DataBind()
End Sub
Binding the Repeater on Pager LinkButton Click
Following event handler is executed, when the Page Number LinkButton is clicked.
Inside this event handler, the PageIndex is referenced using LinkButton CommandArgument property.
Finally, GetCustomersPageWise method is called by passing the PageIndex value to it.
C#
protected void Page_Changed(object sender, EventArgs e)
{
int pageIndex = int.Parse((sender as LinkButton).CommandArgument);
this.GetCustomersPageWise(pageIndex);
}
VB.Net
Protected Sub Page_Changed(sender As Object, e As EventArgs)
Dim pageIndex As Integer = Integer.Parse(TryCast(sender, LinkButton).CommandArgument)
Me.GetCustomersPageWise(pageIndex)
End Sub
Screenshot
Demo
Downloads