The Epiphunkphenomenon

In building a .NET web application, the Repeater Control comes in really handy when building a table from a ResultSet or DataCollection. The Repeater Control has five templates, which can contain HTML code. In this short essay I will talk code reuse and not code repeat with the .NET Repeater control and go over the HeaderTemplate, the ItemTemplate, and the AlternatingItemTemplate to show how you can reduce the amount of redundant HTML.

When using the Repeater Control to create a table you will use the HeaderTemplate to define the opening TABLE element and the table header. Here in one example:

<HeaderTemplate>
   <table>
      <tr>
         <th>Order ID</th>
         <th>Customer ID</th>
         <th>Order Date</th>
      </tr>
</HeaderTemplate>

This template defines the header with the all the column names for the table. Every subsequent table row should have a value for each column. To create a row you define the ItemTemplate. To visual distinguish adjacent rows you can slightly modify every the table row's background color using the AlternatingItemTemplate. Here is a textbook example of what I am talking about:

<ItemTemplate>
   <tr bgcolor="lightskyblue">
      <td><%# DataBinder.Eval(Container.DataItem, "OrderID") %></td>
      <td><%# DataBinder.Eval(Container.DataItem, "CustomerID") %></td>
      <td><%# DataBinder.Eval(Container.DataItem, "OrderDate", "{0:d}") %></td>
   </tr>
</ItemTemplate>
<AlternatingItemTemplate>
   <tr bgcolor="gray">
      <td><%# DataBinder.Eval(Container.DataItem, "OrderID") %></td>
      <td><%# DataBinder.Eval(Container.DataItem, "CustomerID") %></td>
      <td><%# DataBinder.Eval(Container.DataItem, "OrderDate", "{0:d}") %></td>
   </tr>
</AlternatingItemTemplate>

If you think in reusable code/building blocks you can see that you can refactor out the code between the each table rows (TR elements), they are identical. In the next code segment I replace all the table data elements (TD) from between the table rows and bind that region with a method in my code behind class. Here is the HTML/C# code the goes inside the NET.ASP Repeater Control:

<ItemTemplate>
   <tr bgcolor="lightskyblue">
      <%# getRepeaterRow(Container) %>
   </tr>
</ItemTemplate>
   
<AlternatingItemTemplate>
   <tr bgcolor="gray">
      <%# getRepeaterRow(Container) %>
   </tr>
</AlternatingItemTemplate>

The thing to note about the above code is that I still need to define the item and alternative item templates because they display a different color to visually distinguish adjacent rows. The table data elements will be created in the getReapeterRow method in the code behind class for this ASPX file. Here is my implementation of the getRepeaterRow method:

protected String getRepeaterRow(RepeaterItem ri){
   String startTD = "<TD>";
   String endTD = "</TD>";
   StringBuilder sb = new StringBuilder();
			
   sb.Append(startTD);
   sb.Append(DataBinder.Eval(ri.DataItem, "OrderID"));
   sb.Append(endTD);

   sb.Append(startTD);
   sb.Append(DataBinder.Eval(ri.DataItem, "CustomerID"));
   sb.Append(endTD);

   sb.Append(startTD);
   sb.Append(DataBinder.Eval(ri.DataItem, "OrderDate", "{0:d}"));
   sb.Append(endTD);

   return sb.ToString();
}

Since the code between the Repeater ItemTemplate and the AlternatingItemTemplate are so similar you can code reuse the regions HTML/C# code by using a simple data bind to a method. Since the HTML view of your ASPX does not provide ItelliSense or any code complete functionality it is actually more error prone to write long and convoluted mix of HTML and C# in your ASPX file. The next step would be to dynamically create the table row in the getRepeaterRow method using metadata.