Now here in this tutorial, I’ll explain how you can use asp.net repeater control with datapager in c# as well as vb.net with example code and step-by-step guide.
In my previous tutorials, I’d explained how to bind asp.net repeater control, exporting gridview data to word excel text and pdf, print gridview data on print button click and other more cracking tutorials on Repeater, Asp.net, JavaScript, jQuery here.
As you know that Asp.net Repeater Control does not provide direct Paging feature like GridView. So, what if you want the paging functionality with repeater control?
For that, I created one Custom control named as DataPagerRepeater which provides you that functionality with ease. You don’t need to do more changes to your existing project except following steps.
1. Create DataPagerRepeater Class File – [.cs/.vb]
Create one class file and give the name to that file DataPagerRepeater.vb or DataPagerRepeater.cs as per your project type. You will get these files with example code by downloading this tutorial at the end of this post.
2. Register Custom DataPagerRepeater Control
After creating class file, you need to register the custom user defined DataPagerRepeater control. You can do this in two ways:
Method1: By using @ Register Directive at the top of your .aspx page. It is efficient when you want to use this custom control in one or two pages.
<%@ Register TagPrefix="aspRepeater" Namespace="CustomRepeaterControlWithDataPager" Assembly="CustomRepeaterControlWithDataPager" %>
If you want to get more details about @ Register Directive, check microsoft msdn help here.
Method2: By Registering in your Project AssemblyInfo and Web.config files. It is efficient when you want to use this custom control very frequently in your whole project or website.
To use Method2, You first need to add the following line at the end of your AssemblyInfo.cs or AssemblyInfo.vb as per your project type. You can find this file under YourProject Root > My Project > Find Your Assembly File.
If you are using the C# project, use the following code:
//Custom pager repeater
[assembly: TagPrefix("CustomRepeaterControlWithDataPager", "aspRepeater")]
If you are using Vb.net project, use following code:
'Custom pager repeater
<Assembly: TagPrefix("CustomRepeaterControlWithDataPager", "aspRepeater")>
Then add the following code under system.web tag of your Web.config file:
<system.web>
<pages validateRequest="false">
<controls>
<add assembly="CustomRepeaterControlWithDataPager" namespace="CustomRepeaterControlWithDataPager" tagPrefix="aspRepeater"></add>
</controls>
</pages>
</system.web>
3. Use Custom Asp.net Repeater Control With DataPager in .aspx Page
Now you are all set and ready to use our custom datapager repeater control to your .aspx pages. Following is the complete HTML markup code for RepeaterWithDataPager.aspx page that I used in this example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Custom Repeater Control With DataPager Example in Asp.net
</title>
<style type="text/css">
/*Style your Repeater Control*/
#rptCustom tr td {
text-align: center;
vertical-align: middle;
padding: 3px;
}
#rptCustom tr {
border: 1px solid #e2e2e2;
}
.rptHeader > th {
background: #ff6600;
font-weight: bold;
color: White;
width: 120px;
height: 28px;
}
.rptDataRows:nth-child(odd) {
background: #f5f5f5;
}
/*Style your DataPager Control*/
.pager {
float: left;
height: 40px;
margin-left: -5px;
margin-top: 15px;
}
.pager ul li a, .pagerbuttons, .selected {
float: left;
font-size: 12px;
font-weight: bold;
height: 18px;
margin: 0 5px;
min-width: 20px;
padding: 5px;
text-align: center;
vertical-align: middle;
color: White;
}
.pager ul li a, .pagerbuttons {
background: #ff6600;
}
.pager ul li a.active, .pager ul li a:hover, .selected, .pager a:hover {
background: #000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 10px;">
<h4>Custom Repeater Control With DataPager Example in Asp.net</h4>
<aspRepeater:DataPagerRepeater id="rptCustomRepeater" persistentdatasource="true" runat="server">
<HeaderTemplate>
<table id="rptCustom">
<tr class="rptHeader">
<th>SubjectId</th>
<th>SubjectName</th>
<th>Marks</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="rptDataRows">
<td><%# DataBinder.Eval(Container.DataItem, "SubjectId")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "SubjectName")%></td>
<td><%# DataBinder.Eval(Container.DataItem, "Marks")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</aspRepeater:DataPagerRepeater>
<asp:DataPager ID="pgrCustomRepeater" runat="server" class="pager" PageSize="4"
PagedControlID="rptCustomRepeater">
<fields>
<asp:NextPreviousPagerField RenderDisabledButtonsAsLabels="true"
ButtonCssClass="pagerbuttons" ShowFirstPageButton="false"
ShowNextPageButton="false" ShowLastPageButton="false"
ShowPreviousPageButton="true" PreviousPageText="Prev" />
<asp:NumericPagerField CurrentPageLabelCssClass="selected"
NextPreviousButtonCssClass="pagerbuttons" ButtonCount="10"
RenderNonBreakingSpacesBetweenControls="true"
NumericButtonCssClass="pagerbuttons" />
<asp:NextPreviousPagerField RenderDisabledButtonsAsLabels="true"
ButtonCssClass="pagerbuttons" ShowFirstPageButton="false"
ShowPreviousPageButton="false" ShowNextPageButton="true"
ShowLastPageButton="false" NextPageText="Next" />
</fields>
</asp:DataPager>
</div>
</form>
</body>
</html>
As you can see from above HTML Markup of .aspx page, I used PersistentDataSource=”true” property of custom DataPagerRepeater control that helps us to keep the data persistent during paging or postback.
Asp.Net Repeater Control Data Binding with C# or Vb.net Example
Here, I’ve explained only about asp.net repeater control with datapager but not how to bind repeater control. If you want to see, follow the below article.
You may also like, how to bind asp.net repeater control here.
Example Result
Download Example
Git Repo
git clone https://github.com/immayankmodi/custom-repeater-control-with-datapager.git
Hi Mayank,
First of all I would like to thank you for such a nice post on the paging of repeater. In your example I got exact solution for which I was searching and obviously it saved my lots of the time.
I am having one more query related with it. Actually I have to deal with 10 million records only with repeater so for such purpose can you please show me some way to implement custom paging in your example?