13.2 The Repeater Control

The Repeater class provides a great many properties and exposes a number of useful events. The most important of these are summarized in Table 13-2.

Table 13-2. Properties and events of the Repeater control
Property or event name	Description
AlternatingItemTemplate property	Gets or sets the alternating item template
Controls property	Gets the ControlCollection object containing all the child controls
DataMember property	Gets or sets the specific table in the DataSource to bind to the control
DataSource property	Gets or sets the data source
FooterTemplate property	Gets or sets the footer template
HeaderTemplate property	Gets or sets the header template
ItemCommand event	Fired when a button is clicked
ItemCreated event	Fired when an item is created
ItemDataBound event	Fired after an item is databound but before it is rendered
Items property	Gets a collection of repeater item objects
PreRender event	Fired when the control is about to render its containing Page object
SeparatorTemplate property	Gets or sets the separator template

The Repeater control is often referred to as lookless to indicate that the control has no intrinsic appearance. You control the look and feel of the Repeater control through templates.

There are templates to control the appearance of the header, the footer, each item, alternating items, and the separator between items, as shown in Table 13-3.

Table 13-3. Templates supported by the Repeater control
Template	Description
AlternatingItemTemplate	Used exactly as you would the item template; however, the alternating item is rendered for every other row in the control
FooterTemplate	Elements to render after all items and other templates have been rendered
HeaderTemplate	Elements to render before any other templates are rendered
ItemTemplate	Elements rendered once for each row in the data source
SeparatorTemplate	Elements to render between each row in the data source

To see how these templates work together, you will create a simple web page with a repeater that will display data from the various tables in the ProgASPDotNetBugs database, as shown in Figure 13-1. The complete .aspx page is shown in Example 13-1.

Example 13-1. The .aspx file

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"  AutoEventWireup="false" Inherits="RepeaterControl.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML>   <HEAD>       <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">       <meta name="CODE_LANGUAGE" Content="C#">       <meta name="vs_defaultClientScript"                content="JavaScript (ECMAScript)">       <meta name="vs_targetSchema"              content="http://schemas.microsoft.com/intellisense/ie5">       <style>          .header          {             FONT-FAMILY: Verdana, Ariel, Helvetica, sans-serif;             FONT-SIZE: 22pt;             FONT-WEIGHT bold;             MARGIN-BOTTOM 2pt          }             .item          {             FONT-FAMILY: Verdana, Ariel, Helvetica, sans-serif;             FONT-SIZE: 10pt;             FONT-WEIGHT: normal;             MARGIN-BOTTOM 2pt          }                 </style>          </HEAD>    <body>       <form  method="post" runat="server">          <asp:Repeater  Runat="server">             <HeaderTemplate>                <div >                  Bugs<hr>                </div>             </HeaderTemplate>                          <ItemTemplate>                <div class ="item">                <b>Bug: </b>    <%# Convert.ToString(        DataBinder.Eval(Container.DataItem, "BugID")) %> <br />                <b>Description: </b>    <%# Convert.ToString(       DataBinder.Eval(Container.DataItem,"Description")) %> <br />                <b>Product: </b>   <%# Convert.ToString(       DataBinder.Eval(Container.DataItem,"ProductDescription")) %><br />                <b>Reported by: </b> </b>   <%# Convert.ToString(       DataBinder.Eval(Container.DataItem,"FullName")) %>                </div>             </ItemTemplate>               <SeparatorTemplate>                 <br/><hr> <br/>             </SeparatorTemplate>                          <FooterTemplate>                   <hr>                   Report additional bugs to                    <a href=mailto:jliberty@libertyassociates.com>                   Jesse Liberty</a>             </FooterTemplate>                    </asp:Repeater>                </form>    </body> </HTML>

Figure 13-1. Repeater using templates

Note that data-binding statements may not be split across lines in VB.NET without the line continuation character (the underscore). Some lines were artificially split throughout this book because of page size limitations.

To create this web page, you add a DataRepeater control to your form, which produces the following HTML source:

<form  method="post" runat="server"> <asp:Repeater  Runat="server"> </asp:Repeater>

Within the Repeater control, you add HeaderTemplate, ItemTemplate, SeparatorTemplate, and FooterTemplate tags.

13.2.1 The HeaderTemplate

The HeaderTemplate is rendered once. You use it to write the title in the appropriate font. Its HTML source is:

<HeaderTemplate>    <div >      Bugs<hr>    </div> </HeaderTemplate>

The div element uses a class element from the following style sheet that you add to the Head section of the page:

<style>    .header    {       FONT-FAMILY: Verdana, Ariel, Helvetica, sans-serif;       FONT-SIZE: 22pt;       FONT-WEIGHT bold;       MARGIN-BOTTOM 2pt    }       .item    {       FONT-FAMILY: Verdana, Ariel, Helvetica, sans-serif;       FONT-SIZE: 10pt;       FONT-WEIGHT: normal;       MARGIN-BOTTOM 2pt    }    </style>

13.2.2 The SeparatorTemplate

The item template is the only tricky one, so let's concentrate on that last. After each item you want the browser to draw a rule with white space above and below. You accomplish that in the SeparatorTemplate, which, in the case of our example, consists of the following:

<SeparatorTemplate>     <br/><hr> <br/> </SeparatorTemplate>

13.2.3 The FooterTemplate

Finally, after all the elements are rendered, you'll draw a final rule and add the mailto link in the footer. Notice that the SeparatorTemplate will not be called after the final element, and so if you want a final hard rule, you must draw it yourself in the FooterTemplate. The HTML source for this example's <FooterTemplate> is:

<FooterTemplate>       <hr>       Report additional bugs to          <a href=mailto:jliberty@libertyassociates.com>       Jesse Liberty</a> </FooterTemplate>

13.2.4 The ItemTemplate

The item template dictates how each item will be rendered. The content of the <ItemTemplate> tag is as follows:

<ItemTemplate>    <div class ="item">    <b>Bug: </b>        <%# Convert.ToString(DataBinder.Eval(Container.DataItem,              "BugID")) %> <br />    <b>Description: </b>        <%# Convert.ToString(DataBinder.Eval(Container.DataItem,            "Description")) %> <br />    <b>Product: </b>      <%# Convert.ToString(DataBinder.Eval(Container.DataItem,          "ProductDescription")) %><br />    <b>Reported by: </b> </b>       <%# Convert.ToString(DataBinder.Eval(Container.DataItem,         "FullName")) %>    </div> </ItemTemplate>

In VB .NET, you need to take not to split data-binding expressions without using an underscore:

<ItemTemplate>    <div class ="item">    <b>Bug: </b>        <%# Convert.ToString(DataBinder.Eval(Container.DataItem, _             "BugID")) %> <br />    <b>Description: </b>        <%# Convert.ToString(DataBinder.Eval(Container.DataItem, _            "Description")) %> <br />    <b>Product: </b>      <%# Convert.ToString(DataBinder.Eval(Container.DataItem, _          "ProductDescription")) %><br />    <b>Reported by: </b> </b>       <%# Convert.ToString(DataBinder.Eval(Container.DataItem, _         "FullName")) %>    </div> </ItemTemplate>

You use a <div> element here just as you did in the header. You can use normal HTML elements such as <b> to control the display of text and other elements. The only tricky part is how you display the contents of the data item you've bound to the row. To render the bugID, you start by displaying the word Bug in bold:

<b>Bug: </b>

You then display the actual BugID by calling the static Eval method on the DataBinder object. You pass in the DataItem you obtain from the Container. The Container is the Repeater control itself, and the DataItem is the item you are rendering (in this case, a DataRow object from a data set). The result of the Eval must be converted to a String for display purposes, which is handled by the following line of code:

<%# Convert.ToString(DataBinder.Eval(Container.DataItem, "BugID")) %>

If you prefer, you can call ToString on the object returned by Eval, as follows:

<%# DataBinder.Eval(Container.DataItem, "BugID").ToString(  ) %>

13.2.5 The Code-Behind File

The supporting code for this example is very simple. All the work is done in the Page_Load event, where you obtain the data set based on a Select statement, and bind it to the Repeater. The Page_Load event procedure is shown in C# in Example 13-2 and in VB.NET in Example 13-3.

Example 13-2. The Page_Load method in C#

private void Page_Load(object sender, System.EventArgs e) {    // connect to the Bugs database    string connectionString =        "server=YourServer; uid=sa;" +             "pwd=YourPassword; database=ProgASPDotNetBugs";    // get records from the Bugs table    string commandString =        "Select b.BugID, b.Description, p.ProductDescription, " +          "peo.FullName from Bugs b ";    commandString += "join lkProduct p on b.Product = p.ProductID ";    commandString += "join People peo on b.Reporter = peo.PersonID ";    // create the data set command object     // and the DataSet    SqlDataAdapter dataAdapter =        new SqlDataAdapter(       commandString, connectionString);    DataSet dataSet = new DataSet(  );    // fill the data set object    dataAdapter.Fill(dataSet,"Bugs");    // Get the one table from the DataSet    DataTable dataTable = dataSet.Tables[0];      Repeater1.DataSource = dataTable;    Repeater1.DataBind(  ); }

Example 13-3. The Page_Load method in VB.NET

Private Sub Page_Load( ByVal sender As System.Object, _         ByVal e As System.EventArgs) Handles MyBase.Load    ' connect to the Bugs database    Dim connectionString As String = _        "server=YourServer; uid=sa; " & _        "pwd=YourPassword; database=ProgASPDotNetBugs"    ' get records from the Bugs table    Dim commandString As String = _       "Select b.BugID, b.Description, p.ProductDescription, " & _       "peo.FullName from Bugs b " & _       "join lkProduct p on b.Product = p.ProductID " & _       "join People peo on b.Reporter = peo.PersonID "    ' create the data set command object and the data set    Dim dataAdapter As New SqlDataAdapter( commandString, connectionString)    Dim dataSet As New DataSet(  )    ' fill the data set object    dataAdapter.Fill(dataSet, "Bugs")    ' Get the one table from the DataSet    Dim dataTable As DataTable = dataSet.Tables(0)    Repeater1.DataSource = dataTable    Repeater1.DataBind(  ) End Sub

Table 13-2. Properties and events of the Repeater control

Table 13-3. Templates supported by the Repeater control