Displaying data with a repeater control

Controls | data | display

If you are using ASP.net, you must be familiar with the DataGrid control. The DataGrid control offers a variety of features that make it easy to display data as a list on a Web page. But what if you don't want to use HTML forms? At this point, you can use a little-known sibling control of a DataGrid, the Repeater control. The Repeater control provides the flexibility to display the data you need.

What is the Repeater control?

Repeater is a repeatable control, that is, it displays the contents of a data source by using a template, and you can easily configure those templates. Repeater contains data such as headers and footers that can traverse all data options and apply to the template.

Unlike the DataGrid and DataList controls, the Repeater control is not derived from the WebControl class. So, it doesn't include some common formatting attributes, such as controlling fonts, colors, and so on. However, using the Repeater control, HTML (or a style sheet) or ASP.net class can handle these properties.

Where is the HTML?
The main difference between a repeater control and a DataGrid (and DataList) control is how HTML is handled. Asp. NET creates HTML code to display the DataGrid control, but repeater allows developers to decide how to display the data. So, you can choose to display the data in an HTML table or in a sequential list. This depends largely on your choice, but you must insert the correct HTML into the ASP.net page.

Templates are the same as DataList, and the Repeater control supports only templates. The following templates are available to choose from:

AlternatingItemTemplate: Specifies how each additional option is displayed.
ItemTemplate: Specifies how options are displayed. (AlternatingItemTemplate can overwrite this template.) )
HeaderTemplate: Establishes how the caption is displayed.
FooterTemplate: Create how to display the footer.
SeparatorTemplate: Specifies how to display the separator between different options.
You can use these templates to display the data you want. The only mandatory template is ItemTemplate, and all other templates are selective.

Data
For processing a data source, the Repeater control has the same properties as the DataGrid and DataList:

DataMember: Gets or sets the table of the corresponding DataSource property that is bound to the Repeater control.

DataSource: Gets or sets the data source that provides the data for the Repeater display.

In addition to this, there is an items attribute that you can programmatically access to a single option in repeater data. It returns a Repeateritemcollection object, a set of RepeaterItem objects representing each row of the Repeater data.

asp.net Web Data controls have another common denominator: they all use the DataBind method to generate the user interface. Call this method to return and display the data (assuming the DataSource and DataMember properties are set correctly). Before viewing the DataBind method, let's look at how to use a Repeater control in a Web page.

Using the Repeater control
The first step in using the Repeater control is to determine which data source and field we will use. For example, we will use the Employees list in the SQL Server Northwind database. The Web page displays the full name, address, and phone number of the employee. HTML uses div tags to separate the content with the Repeater template. The following is the HTML content of the Web page:

<%@ Page language= "C #"%>
<%@ Import namespace= "System.Data"%>
<%@ Import namespace= "System.Data.SqlClient"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>builder.com Repeater example</title>
<meta name= "generator" content= "Microsoft Visual Studio. NET 7.1" >
<meta name= "Code_language" content= "C #" >
<style>
. alternate {
Font-weight:bold;
Color:black;
Font-family:verdana, ' Times New Roman ';
Background-color:yellow
}
. Row {
Font-weight:bold;
Color:black;
Font-family:verdana, ' Times New Roman ';
Background-color:white
}
. footer {
Font-weight:bold;
color:red;
Font-family:verdana, ' Times New Roman ';
Background-color:gray
}
. header {
Font-weight:bold;
Color:yellow;
Font-family:verdana, ' Times New Roman ';
Background-color:gray
}
. box {
Border-right:blue Groove;
Border-top:blue Groove;
Display:block;
Vertical-align:baseline;
Overflow:auto;
Border-left:blue Groove;
cursor:wait;
Border-bottom:blue Groove;
Font-family:verdana;
Text-align:center
}
Body {
Background: #333;
}
</style>
<script language= "C #" runat= "Server" >
private void Page_Load (object sender, System.EventArgs e) {
if (! IsPostBack) {
DataSet dset = new DataSet ();
String conn = "server= (local); Initial Catalog=northwind; Uid=ctester; Pwd=password ";
String qry = "SELECT FirstName, LastName, Address, city, region, PostalCode,
HomePhone from Employees ";
SqlDataAdapter SDA = new SqlDataAdapter (QRY, Conn);
Sda. Fill (Dset);
Repeater1.datasource = Dset. Tables[0]. DefaultView;
Repeater1.databind ();
} }
</script><body ms_positioning= "GridLayout" bgcolor= "#00cc99" >
<form id= "Form1" method= "POST" runat= "Server" >
<div class= "box" >
<asp:repeater id= "Repeater1" runat= "Server" >
<HeaderTemplate>
<div class= "header" id= "header" >northwind employees</div>
</HeaderTemplate>
&LT;SEPARATORTEMPLATE&GT;&LT;HR/></separatortemplate>
<itemtemplate><div class= "Row" >
<%# ((DataRowView) container.dataitem) ["FirstName"]%>
<%# ((DataRowView) container.dataitem) ["LastName"]%><br>
<%# ((DataRowView) Container.DataItem) ["Address"]%><br>
<%# ((DataRowView) container.dataitem) ["City"]%>
<%# ((DataRowView) container.dataitem) ["Region"]%>
<%# ((DataRowView) container.dataitem) ["PostalCode"]%><br>
<%# ((DataRowView) container.dataitem) ["HomePhone"]%>
</div></ItemTemplate>
<alternatingitemtemplate><div class= "Alternate" >
<%# ((DataRowView) container.dataitem) ["FirstName"]%>
<%# ((DataRowView) container.dataitem) ["LastName"]%><br>
<%# ((DataRowView) Container.DataItem) ["Address"]%><br>
<%# ((DataRowView) container.dataitem) ["City"]%>
<%# ((DataRowView) container.dataitem) ["Region"]%>
<%# ((DataRowView) container.dataitem) ["PostalCode"]%><br>
<%# ((DataRowView) container.dataitem) ["HomePhone"]%>
</div></AlternatingItemTemplate>
<footertemplate><div class= "Footer" >
<%# ((DataView) repeater1.datasource). Count + "Employees found."%>
</div></FooterTemplate>
</asp:Repeater></div></form></body>

You can note that the style sheet in each Repeater line controls the appearance of the text. In addition, a text box is added to the content of the Web page. The embedded C # code gets the corresponding column from the Repeater data source. Each data item is converted to a DataRowView object for display.

This page does not use the ASP.net "background code" nature. For this reason, the page refers to two System.Data and System.Data.SqlClient space names. This is necessary for using DataRowView objects and interactive access to SQL Server.

The Page_Load event is triggered when the page is called. The data source is connected to the Repeater control, and the database is queried. The code for each repeater line loads data from the potential data source, and the Web page displays the data.

This design uses a style sheet (and an HTML div tag), so changing the appearance requires only changing the necessary style sheet code. To further separate the data from the display, you can store the style sheet in a separate file and refer to it as an HTML link tag.

A good choice.
I'm surprised that developers know very little about Repeater controls when interacting with other asp.net developers. Although it is not as powerful as the DataGrid, it still offers excellent flexibility on many occasions. The Repeater control lacks editing and sorting capabilities, but can be achieved by further programming.