Repeater Control

Repeater Control

The Repeater control has no selection or editing support. It can handle and process some events, but these are limited. For a richer event model and editing capabilities, you should use the DataList or the DataGrid controls. The reason you might select the Repeater control, though, is for its simplicity. It is a lightweight data bound control that is easy to use. Table 10.1 shows you the templates that can be used with a Repeater control and describes their use.

The Repeater is a simple data bound list control. It enables you to easily render data to the screen. Several templates can be used to customize the output of the Repeater . Among these are the ItemTemplate, the AlternatingItemTemplate, the SeparatorTemplate, the HeaderTemplate, and the FooterTemplate. The only one of these templates that is absolutely required is the ItemTemplate. All the others are completely optional. You can find more information on these templates in Table 10.1.

Table 10.1. The Repeater Templates

Template Name	Description
ItemTemplate	Defines the content and layout of items within the list. This template is required.
AlternatingItemTemplate	If defined, this determines the content and layout of alternating ( zero-based odd-indexed) items. If not defined, ItemTemplate is used.
SeparatorTemplate	If defined, this is rendered between items (and alternating items). If not defined, a separator is not rendered.
HeaderTemplate	If defined, this determines the content and layout of the list header. If not defined, a header is not rendered.
FooterTemplate	If defined, this determines the content and layout of the list footer. If not defined, a footer is not rendered.

To show you how to use a Repeater control, I am going to create a C# application named ShowData. From the designer screen I am going to add a Repeater control to the form. I do this by grabbing a Repeater control in the WebForm toolbox and dragging it out to the form.

Note

I have found it easier to develop ASP.NET applications when the form is in flow layout rather than in the default grid layout. The reason for this is that the HTML for flow layout pages is far less complex than those in grid layout. When you go to the HTML to edit the templates, it is much easier to edit pages that are in flow layout because there is less HTML in which the controls are placed, and they are much easier to edit.

The next thing to do is to switch into HTML mode so that you can add an ItemTemplate to the Repeater control. I am using a table that contains pharmaceuticals ; therefore, I am going to DataBind this control to two columns from that database table entitled, respectively, Name and NDC. The code for my Repeater control is as follows :

 <asp:Repeater id=Repeater1 runat="server">      <ItemTemplate>          <%# DataBinder.Eval(Container, "DataItem.Name") %>          <%# DataBinder.Eval(Container, "DataItem.NDC") %>          <br>      </ItemTemplate>  </asp:Repeater> 

To get the data with which I will bind to the control, I must connect to the database, query for some data, and create a recordset. With this step done, I set the Repeater control's DataSource property to the SqlDataReader object, which was created with the call to the ExecuteReader() method. The following code, which was added to the C# Page_Load() method, shows you exactly how to carry this out:

 private void Page_Load(object sender, System.EventArgs e)  {      String strConnectString =      "user id=sa;password=;initial catalog=Drugs2;data source=DELLAP";      SqlConnection myConnection  = new SqlConnection(strConnectString);      myConnection.Open();      SqlCommand myCommand =        new SqlCommand(        "select * from DrugList where NDC like '121%'", myConnection );      SqlDataReader myReader;      myReader = myCommand.ExecuteReader();      Repeater1.DataSource = myReader;      Repeater1.DataBind();      myConnection.Close();  } 

The output of this program is very simple. It queries the database for drugs with a National Drug Code (NDC) number starting with 121. It then binds this data to the Repeater control. You can see this simple application running in Figure 10.1.

Figure 10.1. This simple application shows the basic output of a Repeater control.

There might be times when you want the Repeater data to be contained within a table. If this is the case, you should create a start table tag ( <table> ) before your Repeater control's declaration, and you will need an end table tag ( </table> ) after the repeater code. Inside the ItemTemplate, you need to have tags that indicate where the rows and columns are. The following code is a simple example that puts the Repeater data inside a table:

 <table border="1">      <asp:Repeater id="Repeater1" runat="server">          <ItemTemplate>              <tr>                 <td>                    <%# DataBinder.Eval(Container, "DataItem.Name") %>                 </td>                 <td>                    <%# DataBinder.Eval(Container, "DataItem.NDC") %>                 </td>             </tr>         </ItemTemplate>     </asp:Repeater>  </table> 

The enhanced Repeater output can be seen in Figure 10.2, where the data is contained inside a table.

Figure 10.2. This is an enhanced data output because the data is contained in a table.

You can decorate the table columns with different colors, as shown in the following example:

 <table border="1">      <asp:Repeater id="Repeater1" runat="server">          <ItemTemplate>              <tr>                  <td bgcolor="red">                      <%# DataBinder.Eval(Container, "DataItem.Name") %>                  </td>                  <td bgcolor="blue">                      <%# DataBinder.Eval(Container, "DataItem.NDC") %>                  </td>              </tr>          </ItemTemplate>      </asp:Repeater>  </table> 

You could put the table heading tags inside the Repeater 's HeaderTemplate tag. This would be a better way to organize your code so that it would be obvious that the table start tag was meant to go with your Repeater control. You also can add table headings inside the HeaderTemplate tag, as shown in the following code snippet:

 <HeaderTemplate>      <table border="1">          <tr>              <th> First Name </th>              <th> Last Name </th>          </tr>  </HeaderTemplate> 

Another good idea is to put the end table tag in the Repeater control's FooterTemplate tag. This helps keeps your code better organized because it will be obvious that the end of table tag belongs with your control. The following code shows you how to do this:

 <FooterTemplate>      </table>  </FooterTemplate> 

The last thing that we will cover in this section on Repeaters is the Repeater 's capability to alternate colors. Alternating colors can make a Repeater (or the rendered table) easier for a user to view because each row will be a different color . For example, the first row might be yellow, the second might be blue, the third might be yellow again, while the fourth row might be blue again. A special AlternatingItemTemplate tag is used for Repeaters so that the Repeater alternates the rendering on every other line. The following code shows you how to do this:

 <ItemTemplate>      <tr bgcolor="red">          <td>              <%# DataBinder.Eval(Container, "DataItem.Name") %>          </td>          <td>              <%# DataBinder.Eval(Container, "DataItem.NDC") %>          </td>      </tr>  </ItemTemplate>  <AlternatingItemTemplate>      <tr bgcolor="blue">          <td>              <%# DataBinder.Eval(Container, "DataItem.Name") %>          </td>          <td>              <%# DataBinder.Eval(Container, "DataItem.NDC") %>          </td>      </tr>  </AlternatingItemTemplate> 

The Repeater control is simple to use. Yet, even with its simplicity, it gives you great power and flexibility. You will find that the Repeater control is a great tool for creating applications that need to render data. It can be implemented quickly, and can easily be customized and changed.