Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

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 id="Form1" method="post" runat="server">

         <asp:Repeater ID="Repeater1" Runat="server">
            <HeaderTemplate>
               <div class="header">
                 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 id="Form1" method="post" runat="server">
<asp:Repeater ID="Repeater1" 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 class="header">
     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

Javascript validator Javascripts
→