Click here to Skip to main content
15,860,844 members
Articles / Web Development / ASP.NET
Article

The ASP.NET Repeater Control

Rate me:
Please Sign up or sign in to vote.
1.00/5 (12 votes)
5 Feb 2008CPOL6 min read 116.4K   15   10
This is a data-bound container control that can be used to automate the display of a collection of repeated list items.

The ASP.NET Repeater Control

The Repeater control in ASP.NET is a data-bound container control that can be used to automate the display of a collection of repeated list items. These items can be bound to either of the following data sources:

  • Database Table
  • XML File

In a Repeater control, the data is rendered as DataItems that are defined using one or more templates. You can even use HTML tags such as <li>, <ul>, or <div> if required. Similar to the DataGrid, DataList, or GridView controls, the Repeater control has a DataSource property that is used to set the DataSource of this control to any ICollection, IEnumerable, or IListSource instance. Once this is set, the data from one of these types of data sources can be easily bound to the Repeater control using its DataBind() method.

However, the Repeater control by itself does not support paging or editing of data. The Repeater control is light weight and does not contain so many features as the DataGrid contains. However, it enables you to place HTML code in its templates. It is great in situations where you need to display the data quickly and format the data to be displayed easily.

Using the Repeater Control

The Repeater control is a data-bound control that uses templates to display data. It does not have any built-in support for paging, editing, or sorting of the data that is rendered through one or more of its templates. The Repeater control works by looping through the records in your data source and then repeating the rendering of one of its templates called the ItemTemplate, one that contains the records that the control needs to render.

To use this control, drag and drop the control in the design view of the web form onto a web form from the toolbox. Refer to the following screenshot:

You can also drag and drop the Repeater control from the toolbox onto the source view directly. This is shown in the following screenshot:

For customizing the behavior of this control, you have to use the built-in templates that this control comes with. These templates are actually blocks of HTML code. The Repeater control contains the following five templates:

  1. HeaderTemplate
  2. ItemTemplate SeparatorTemplate
  3. AlternatingItemTemplate
  4. FooterTemplate

The following screenshot shows how a Repeater control looks when populated with data.

Note that the templates (Header, Item, Footer, Alternate and Separator) have all been used.

The following code snippet is an example of the order in which the templates of the Repeater control are used.

When the Repeater control is bound to a data source, the data from the data source is displayed using the ItemTemplate element and any other optional elements, if used. Note that the contents of the HeaderTemplate and the FooterTemplate are rendered once for each Repeater control. The contents of the ItemTemplate are rendered for each record in the control.

You can also use the additional AlternatingItemTemplate element after the ItemTemplate element for specifying the appearance of each alternate record. You can also use the SeparatorTemplate element between each record for specifying the separators for the records.

Displaying Data Using the Repeater Control

This section discusses how we can display data using the Repeater control. As discussed earlier, the Repeater control uses templates for formatting the data that it displays. The following code snippet displays the code in an ASPX file that contains a Repeater control.

Note: we would be making use of templates and that the data would be bound to the control from the code-behind file using the DataManager class.

The Repeater control is populated with data in the Page_Load event by reusing the DataManager().

Note how the SeparatorTemplate and the AlternatingItemTemplate have been used in the previous code example. Further, the DataBinder.Eval() method has been used to display the values of the corresponding fields from the data container, (in our case, the DataSet instance) in the Repeater control. The FooterTemplate uses the Total Records variable and substitutes its value to display the total number of records displayed by the control.

The following is the output on execution.

The Header and the Footer templates of the Repeater control are still rendered even if the data source does not contain any data. If you want to suppress their display, you can use the Visible property of the Repeater control and use it to suppress the display of these templates with a simple logic. Here is how you specify the Visible property of this control in your ASPX file to achieve this:

Visible="<%# Repeater1.Items.Count > 0 %>"

When you specify the Visible property as shown here, the Repeater is made visible only if there are records in your data source.

Displaying Checkboxes in a Repeater Control

Let us now understand how we can display checkboxes in a Repeater Control and retrieve the number of checked items. We will use a Button control and a Label control in our page. When you click on the Button control, the number of checked items in the Repeater Control will be displayed in the Label control. The output on execution is similar to what is shown in the following screenshot:

Here is the code that we will use in the ASPX file to display checkboxes in a Repeater control.

The data is bound to the Repeater control in the Page_Load event as follows:

Note that we have used the Page.IsPostBack to check whether the page has posted back in the Page_Load method. If you don't bind data by checking whether the page has posted back, the Repeater control will be rebound to data once again after a postback and all the checkboxes in your web page will be reset to the unchecked state.

The source code for the click event of the Button control that we have used is as follows:

When you execute the application, the Repeater control is displayed with records from the employee table. Now you check one or more of the checkboxes and then click on the Button control just beneath the Repeater control as follows:

Note that the number of checked records is displayed in the Label Control.

Summary

This article discussed the Repeater control and how we can use it in our ASP.NET applications. Though this control does not support all the functionalities of other data controls, like DataGrid and GridView, it is still a good choice if you want faster rendering of data as it is light weight, and is very flexible.

This article has been extracted from: ASP.NET Data Presentation Controls Essentials

Master the standard ASP.NET server controls for displaying and managing data
  • Systematic coverage of major ASP.NET data presentation controls
  • Packed with re-usable examples of common data control tasks
  • Covers LINQ and binding data to ASP.NET 3.5 (Orcas) controls

For more information, please visit:
www.PacktPub.com/asp-net-data-presentation-controls/book

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United Kingdom United Kingdom
Founded in 2004 in Birmingham, UK, Packt's mission is to help the world put software to work in new ways, through the delivery of effective learning and information services to IT professionals.

Working towards that vision, we have published over 5000 books and videos so far, providing IT professionals with the actionable knowledge they need to get the job done - whether that's specific learning on an emerging technology or optimizing key skills in more established tools.

Comments and Discussions

 
GeneralASP.Net Repeater Control for beginners Pin
Shanaya Singh28-Apr-14 7:23
Shanaya Singh28-Apr-14 7:23 
GeneralMy vote of 5 Pin
kkalpak20-Mar-14 0:54
kkalpak20-Mar-14 0:54 
GeneralMy vote of 5 Pin
kkalpak20-Mar-14 0:51
kkalpak20-Mar-14 0:51 
GeneralMy vote of 1 Pin
woutercx15-Sep-13 21:28
woutercx15-Sep-13 21:28 
QuestionRepeater control check box Pin
arvind mogha5-Oct-12 2:49
arvind mogha5-Oct-12 2:49 
General[My vote of 1] COULD have been Really good Pin
xgamsx28-Dec-09 4:07
xgamsx28-Dec-09 4:07 
SuggestionRe: [My vote of 1] COULD have been Really good Pin
woutercx15-Sep-13 21:28
woutercx15-Sep-13 21:28 
GeneralMy vote of 1 Pin
BeeGone17-Jun-09 1:39
BeeGone17-Jun-09 1:39 
Questiondiv inside of repeater Pin
mnalammwb14-Mar-08 19:02
mnalammwb14-Mar-08 19:02 
QuestionNo Code Pin
johan.Barnard()6-Feb-08 8:59
johan.Barnard()6-Feb-08 8:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.