Using Repeaters in Web Applications

Unlike data grids and data lists, repeaters have no intrinsic appearance at all; it's up to you to create that appearance, which is good if you want to write the HTML for a custom data display from scratch. A repeater is a template-driven control, but here, you must edit the template directly in HTML. In other words, you use a repeater when you want to fill your own HTML with data from a dataset or data view.

You can see this in the WebRepeaters example on the CD-ROM, shown at work in Figure 23.11. This example uses a fairly advanced template with a header, a footer, an item template, and an alternating item template. (The alternating item template is what gives the display in Figure 23.11 its striped appearance.)

Figure 23.11: The WebRepeaters example.

To follow along in this example, add a dataset to a Web application, DataSet11, and add a Repeater control from the Web Forms tab of the toolbox to the main Web form of the application. Next, set the DataSource property of the Repeater, Repeater1, to DataSet11, and its DataMember property to authors.

To create the display you see in Figure 23.11, you have to edit the application's HTML directly; you can't create templates with a template editor here. When you switch to HTML view, you'll see this code for the repeater:

<form id="Form1" method="post" runat="server">

<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataSet11 %>"
   DataMember="authors">
</asp:Repeater>

</form>

I'll enclose the repeater in an HTML table, so I'll use the <table> element here. To create a header template with the text "First Name" and "Last Name" as you see in Figure 23.11, with a background of cyan, you can add this code, which also uses <tr> elements to create table rows and <th> elements to create table headers:

<form id="Form1" method="post" runat="server">

<table width="100%">
<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataSet11 %>"
   DataMember="authors">
   <HeaderTemplate>
  <tr style="background-color:cyan">
     <th>First Name</th>
     <th>Last Name</th>
  </tr>
   </HeaderTemplate>
        ⋮
</asp:Repeater>
</table>

To create the item template, you can bind table cells to fields like au_fname with an expression like <%# DataBinder.Eval(Container, "DataItem.au_fname") %>. Here's how that looks in HTML:

<form id="Form1" method="post" runat="server">

<table width="100%">
<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataSet11 %>"
   DataMember="authors">
   <HeaderTemplate>
  <tr style="background-color:cyan">
     <th>First Name</th>
     <th>Last Name</th>
  </tr>
   </HeaderTemplate>
   <ItemTemplate>
  <tr>
     <td><%# DataBinder.Eval(Container, "DataItem.au_fname") %>
     </td>
     <td><%# DataBinder.Eval(Container,"DataItem.au_lname") %>
     </td>
  </tr>
   </ItemTemplate>
        ⋮
</asp:Repeater>
</table>

That displays the data items themselves. To create the alternating appearance you see in Figure 23.11, you can use an alternating item template, which looks like this, where I'm giving alternate lines a pink background:

<form id="Form1" method="post" runat="server">

<table width="100%">
<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataSet11 %>"
   DataMember="authors">
   <HeaderTemplate>
  <tr style="background-color:cyan">
     <th>First Name</th>
     <th>Last Name</th>
  </tr>
   </HeaderTemplate>
   <ItemTemplate>
  <tr>
     <td><%# DataBinder.Eval(Container, "DataItem.au_fname") %>
     </td>
     <td><%# DataBinder.Eval(Container,"DataItem.au_lname") %>
     </td>
  </tr>
   </ItemTemplate>
   <AlternatingItemTemplate>
  <tr>
     <td bgcolor="pink">
     <%# DataBinder.Eval(Container, "DataItem.au_fname") %> </td>
     <td bgcolor="pink">
     <%# DataBinder.Eval(Container,"DataItem.au_lname") %> </td>
  </tr>
   </AlternatingItemTemplate>
        ⋮
</asp:Repeater>
</table>

You also can add a footer template to this display, like this; the added footer looks just like the header:

<form id="Form1" method="post" runat="server">

<table width="100%">
<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataSet11 %>"
   DataMember="authors">
   <HeaderTemplate>
  <tr style="background-color:cyan">
     <th>First Name</th>
     <th>Last Name</th>
  </tr>
   </HeaderTemplate>
   <ItemTemplate>
  <tr>
     <td><%# DataBinder.Eval(Container, "DataItem.au_fname") %>
     </td>
     <td><%# DataBinder.Eval(Container,"DataItem.au_lname") %>
     </td>
  </tr>
   </ItemTemplate>
   <AlternatingItemTemplate>
  <tr>
     <td bgcolor="pink">
     <%# DataBinder.Eval(Container, "DataItem.au_fname") %> </td>
     <td bgcolor="pink">
     <%# DataBinder.Eval(Container,"DataItem.au_lname") %> </td>
  </tr>
   </AlternatingItemTemplate>
   <FooterTemplate>
  <tr style="background-color:cyan">
     <th>First Name</th>
     <th>Last Name</th>
  </tr>
   </FooterTemplate>
</asp:Repeater>
</table>

</form>

And that's it—you can see the result in Figure 23.11.

A Repeater must have an Item Template, but any other templates are optional; here are the templates supported by this control:

ItemTemplate— Required template that specifies content and layout of displayed items.
AlternatingItemTemplate— Specifies content and layout of alternating items.
SeparatorTemplate— Specifies the separator between items.
HeaderTemplate— Specifies content and layout of the header.
FooterTemplate— Specifies content and layout of the footer.

That completes the In Depth section of this chapter—we've gotten a good look at working with databases and Web applications here. For more details, it's time to turn to the Immediate Solutions section.