The <asp:Repeater> control is a data-bound list control whose appearance is entirely controlled by using templates.
The
Repeater control is useful only for displaying data, not interacting with it. Its advantage is that its templates can be set up to display the data in various ways.
As its name implies, the Repeater control simply iterates or loops over the bound data, rendering the elements contained in its ItemTemplate once for each record in its DataSource. It does not render anything aside from what is defined in the template.
The following example demonstrates a Repeater control bound to a DataReader that contains the results of a query, in this case, information about a set of products. The code also shows how to define a HeaderTemplate and FooterTemplate that render at the beginning and end of the list, respectively.
NOTE: This sample illustrates using the OLEDB .NET Data Provider to access data, though the same concepts apply to the SQL Server™ .NET Data Provider as well.
- Import the proper namespaces into your page. This provides your code with access to the necessary classes.
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
- In the <
head> of the Web Forms page, implement a Page_Load function within a <script runat="server"> code declaration block that, essentially:
- establishes a connection to the database,
- creates an instance of a DataReader to contain the database information,
- and then binds the Repeater control to the Datareader.
This is shown in the following steps.
<script language="C#" runat="server">
void Page_Load ( object src, EventArgs e ) {
- Set up a connection to the database, in this case dbtutor.mdb.
OleDbConnection myConn = new OleDbConnection
( "Provider=Microsoft.ACE.OLEDB.12.0; Data Source=" +
Server.MapPath ( "~/app_data/dbtutor.mdb" ) );
- Define the SQL Select query that will be used to fetch the data from the Products table.
OleDbCommand myCmd = new OleDbCommand ( "SELECT * FROM Products", myConn );
- Open the connection.
myConn.Open ( );
- Set the DataSource of the Repeater control ( herein codenamed myRepeater ) to the output of the ExecuteReader method. This method returns the result of the query command in the form of a DataReader, which we bind directly to the Repeater.
myRepeater.DataSource = myCmd.ExecuteReader ( );
myRepeater.DataBind ( );
- Close the data connection.
myConn.Close ( );
}
</script>
Here, we set up a <table> element to display the data. Each row of the table will show a corresponding row in the data source.
- Within the <
body> of the Web Forms page, declare the opening tag of the <asp:Repeater> control.
<body>
<asp:repeater id="myRepeater" runat="server">
- Set up the Repeater control templates. First, set up a template to open an HTML Table and display the column headers.
<headertemplate>
<table width="100%" cellspacing=1 cellpadding=3 style="font:9pt verdana">
<tr style="background-color:#ddc">
<th>ProductType</th>
<th>ProductCode</th>
<th>Productname</th>
<th>ProductDescription</th>
<th>UnitPrice</th></tr>
</headertemplate>
- Set up the contents of each Repeater item using the ItemTemplate property. Each Repeater item corresponds to a record in the data source. Define which fields in the data source you want rendered on the page and format the output of these fields using a databinding expression.
<itemtemplate>
<tr style="background-color:#efefef">
<td><%# Eval ( "ProductType" ) %></td>
<td><a href='details_prod.aspx?id=<%# ( ( IDataRecord ) Container.DataItem )
[ "ProductCode" ) %>’>
<%# Eval ( "ProductCode" ) %></a>
</td>
<td><%# Eval ( "Productname" ) %></td>
<td><%# Eval ( "ProductDescription" ) %></td>
<td align="right"><%# Eval ( "UnitPrice", "{0:c}" ) %></td></tr>
</itemtemplate>
NOTE: To avoid errors, the databinding expression must be written as a single line without any line breaks. The code examples shown here are done so only for readability.
- Set up a template to close the table.
<footertemplate>
</table>
</footertemplate>
- Declare the closing tag of the Repeater control and close the page.
</asp:repeater>
</body>
Show me
For more information, see Working with the Repeater Control.