Displaying Data in a Repeater Control

asp.net.ph

Home > Data Access in Web Forms > Displaying Information From a Database > Displaying Data in a Repeater

Displaying Information From a Database Displaying Data in a DataList Control

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 examples demonstrate 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" %>
```
NOTE: This example uses methods described in Calling Data Functions in Code Behind to connect and bind to a DataSource.
In the <head> of the Web Forms page, declare a reference to the script file which contains the data access functions.
```
<script language="C#" runat="server" src="~/shared/fetchData_oledb.cs" />
```
Implement a Page_Load function within another <script runat="server"> code declaration block, essentially to do the following:
1. define the SQL query to use to fetch the data
2. fetch results of the query into a DataReader
3. bind the Repeater to the DataReader
This is shown in the following steps.
```
<script language="C#" runat="server">
   void Page_Load ( object src, EventArgs e ) {
```
Define the SQL Select query to fetch the data from the Products table.
```
      string query = "SELECT * FROM Products";
```
Set the DataSource of the Repeater control ( herein codenamed myRepeater ) to the output of the fetchReader method, which returns the result of the query command in the form of a DataReader.
```
      myRepeater.DataSource = fetchReader ( query, "dbtutor" );
```
Bind the Repeater to the DataReader.
```
      myRepeater.DataBind ( );
```
Close the script.
```
   }
</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=<%# Eval ( "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>
```

The below example shows a similar example but using instead an AccessDataSource control to connect to a data source.

Within the <body> of the Web Forms page, declare an <asp:accessdatasource> control with the following properties.

<asp:accessdatasource id="products" runat="server"
   datafile="~/app_data/dbtutor.mdb"
   selectcommand="SELECT * FROM Products"
   datasourcemode="DataReader" />

Set up the Repeater control as in the first example above, but specify a DataSourceId to link the Repeater to the <asp:accessdatasource> control, and thus bind to the database defined in the data source control.
```
<asp:repeater id="myRepeater" runat="server"
   datasourceid="products">
```
To display the data, set up the contents of each Repeater item as described in the first example above.

For more information, see Working with the Repeater Control.

Displaying Information From a Database Displaying Data in a DataList Control

Suggested Reading

© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note