Making Use of the Repeater Web Server Control - Can You Repeat That Please?

(Page 3 of 5 )

Now that we have the data and the repeater is bound to it, you're going to need to know how to actually make use of it. I mentioned that there are five different template areas, and I'll list them now:

1. HeaderTemplate – The header (for example, you would place your starting '<table>' HTML code here.
   
2. ItemTemplate – which DataItem fields are displayed, and how.
   
3. AlternatingItemTemplate – How are the odd items displayed? By odd I mean odd-indexed, not the strange items (I don't think .Net is smart enough to pick out which items are strange anyways). This would be useful if you want to perhaps change the background color of every other item, which helps to visually distinguish them.
   
4. SeparatorTemplate – Perhaps you want to use something to separate the items, such as a line ('<hr />').
   
5. FooterTemplate – Finally, the footer. If you placed <table> in your header, it would be wise to put </table> here.

Of the five templates, the only one that .Net actually requires you to provide is the ItemTemplate. Once it knows which items to display, it will happily do about its business not even caring that you omit the others. You can even configure the header and leave out the footer without encountering any errors, though I'm not sure I understand why you would want to...

This is how you could use the templates:

<asp:Repeater id="prodRepeater" runat="server">

<HeaderTemplate>

<table cellpadding="3" border="0" cellspacing="0">

</HeaderTemplate>

<ItemTemplate>

<tr>

<td style="font-family:verdana;font-size: 11px;">

Desc: <%# Container.DataItem("description") %><br />

Mfg: <%# Container.DataItem("manufacturer") %><br />

Color: <%# Container.DataItem("color") %><br />

Cost: <%# FormatCurrency( Container.DataItem("price")) %>

</td>

<td style="font-family:verdana;font-size: 11px;">Picture: <br />

<img src="<%# Container.DataItem("imgPath") %>" />

</td>

</tr>

</ItemTemplate>

<AlternatingItemTemplate>

<tr style="background-color:#666666;color:#ffffff;">

<td style="font-family:verdana;font-size: 11px;">

Item: <%# Container.DataItem("description") %><br />

Mfg: <%# Container.DataItem("manufacturer") %><br />

Color: <%# Container.DataItem("color") %><br />

Cost: <%# FormatCurrency( Container.DataItem("price")) %>

</td>

<td style="font-family:verdana;font-size: 11px;">Picture: <br />

<img src="<%# Container.DataItem("imgPath") %>" />

</td>

</tr>

</AlternatingItemTemplate>

<SeparatorTemplate>

<tr><td style="height:2px;background-color:#333333" colspan="2"></td></tr>

</SeparatorTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

This would give you a nice little table with every other row colored dark gray. Of course, having the SeparatorTemplate insert a two pixel dark gray row in between each is a little redundant, but I thought it appropriate to use for the sake of the tutorial. Now let's get into event bubbling, which would be absolutely vital in an e-commerce situation.

Next: Ooooh, Bubbles! >>
 

More ASP.NET Articles
More By Justin Cook

Comments On: Making Use of the Repeater Web Server Control

>>> Be the FIRST to comment on this article!