AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions

Asp.net Repeater Control With DataPager Example

By: Mayank Modi | Folls In: Asp.net, C#, VB | Last Updated: Oct 07, 2014

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.

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.

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 it as DataPagerRepeater which provide you that functionality with ease. You don’t need to do more changes in your existing project except following steps.

Step1: 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.

Step2: 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.

Note: You need to click “Show All Files” button from the top bar of the “Solution Explorer” to view this file.

If you are using C# project, use 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>
Note: I used Method2 here in this sample code and commented Method1 for better understandings, but you can use one of them as per your need.

Step3: 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 perdistent during paging or postbacks.

Bind Asp.net Repeater Control using 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 like to see, follow the below article.

You may also like, how to bind asp.net repeater control here.

Example Result

Custom DataPagerRepeater: Asp.net Repeater Control With DataPager Example

Download Example

Icon
Custom DataPagerRepeater: Asp.net Repeater Control With DataPager Example 37.28 KB
Download This Example

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

About Mayank Modi

Mayank is a web developer and designer who specializes in back-end as well as front-end development. He's a Founder & Chief Editor of AspnetO. If you'd like to connect with him, follow him on Twitter as @immayankmodi.

Comments

  1. Prafull K says

    Aug 05, 2015 at 6:00 PM

    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?

    Reply

Share Your Comments & Feedback Cancel reply

Note: To post any code in comment, use <pre>your code</pre>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social Connections

  • 0 Fans
  • 3,360 Followers
  • 21 Followers
  • 49 Followers
  • 1,559 Subscribers

Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Tooltip: Show Hide Hint Help Text Example in CSS3 Transition
  • Parser Error While Deploying Website to Server in Asp.net
  • How to split string into Array of Day, Month, Year in Asp.net Using C# Vb.net
  • Get Selected Text Value from DropDownList in Asp.net using JavaScript

Find by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Software Engineer and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 2500+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about Asp.net website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

Alexa Traffic Rank

Hot on AspnetO

Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 7036 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6067 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6061 downloads 39.76 KB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2883 downloads 1.01 MB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2852 downloads 1.01 MB
Download This Example

Copyright © 2014 - 2019 · All Rights Reserved.

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous Get QueryString Value in jQuery from Client-side in Asp.net
Next Bind Asp.net Repeater Control in C# or Vb.net Example