How to use the repeater control in ASP.NET
The repeater control in ASP.NET provides a way to display repeated sets of data in a customizable manner. It allows us to define templates for items, alternating items, header, and footer sections, giving us full control over the layout and appearance of the repeated data.
Parameters
The commonly used parameters for the repeater control are the following:
IDspecifies a unique identifier for the repeater control. This can be used to reference the control programmatically.runatspecifies where the control is processed. In the example below, the control is processed on the server side.DataSourcespecifies the data source for the repeater control. It can be set to an object, a collection, or a data source control.
Repeater templates
The commonly used templates to format and customize the rendering of repeater control items are the following:
ItemTemplatedefines the layout and appearance of each item in the repeater control. This template is applied to every item in the data source that the repeater is bound to.AlternatingItemTemplatedefines the layout and appearance of alternating items in the repeater control. It helps create a distinctive visual pattern for better readability and user experience.SeparatorTemplatedefines a separator between consecutive items. It allows us to add HTML markup or controls that will be rendered between each item.HeaderTemplateis used for elements we want to render once before theItemTemplateorAlternatingItemTemplatesection.FooterTemplateis used for elements we want to render once after theItemTemplateorAlternatingItemTemplatesection.
Defining the repeater layout
We can define the layout, apply different styles to items and alternating items, and insert separators as needed. We can add HTML elements and server controls within this template to display the data. We can use data-binding expressions like <%# DataBinding.Eval("PropertyName") %> to display values from the data source for each item.
Here is a sample layout that uses the repeater control:
<asp:Repeater ID="MyRepeater" runat="server"><HeaderTemplate><!-- Define layout for header section --></HeaderTemplate><ItemTemplate><!-- Define layout for each item --></ItemTemplate><SeparatorTemplate><!-- Define the separator for ItemTemplate items --></SeparatorTemplate><AlternatingItemTemplate><!-- Define layout for alternate items --></AlternatingItemTemplate><SeparatorTemplate><!-- Define the separator for AlternatingItemTemplate items --></SeparatorTemplate><FooterTemplate><!-- Define layout for footer section --></FooterTemplate></asp:Repeater>
Binding the repeater to a data source
We can use the following process to bind the Repeater control to a data source:
In the code-behind file (
default.aspx.cs), write the necessary code to retrieve data from a data source.Assign the retrieved data to the Repeater's
DataSourceproperty. For example:MyRepeater.DataSource = myData;.Call the
DataBindmethod to bind the data to the Repeater:MyRepeater.DataBind();.
Here is a sample code-behind file:
public partial class Default : Page{protected void Page_Load(object sender, EventArgs e){// Data sourceList<string> myData = new List<string>{"Data Item 1","Data Item 2","Data Item 3","Data Item 4","Data Item 5"};// Set the data source for the Repeater controlMyRepeater.DataSource = myData;MyRepeater.DataBind();}}
Note: The data source section (lines 5–13) must be replaced with your data retrieval logic.
Free Resources
