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>

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>

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:[email protected]>
      Jesse Liberty</a>
</FooterTemplate>

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>

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(  ) %>

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.

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(  );
}

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