ASP 101 - Active Server Pages 101 - Web06
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
An Overview of ASP.NET
Connections, Commands, And Procedures
What is ASP?

QUICK TIP:
Use Option Strict
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


The ASP.NET Repeater Web Server Control

by John Peterson

Introduction

If you've been using ASP.NET for any length of time then you've almost certainly utilized the DataGrid Server Control. And I'm sure a good portion of you have probably played with the DataList as well... after all, not all of our tables can only have one item per row. But what about that other data web control? I've got a friend who probably will kill me for using this analogy, but it's sort of like the three tenors... there's Pavarotti, Domingo, and that other guy (his name is actually Carreras, but you get my point). Well the other guy in this case is a great little control called the Repeater. While the repeater may not be as well known as or have all the bells and whistles of the other controls, it does have something that neither of the other two has: flexibility.

Flexibility

Why do I say the Repeater is the most flexible of the three data web controls? Because it's the only one that doesn't add a bunch of its own HTML to your data. If you want just the plain data spit out on the page you can easily get it. Try and do that with either of the other two and you'll quickly find that you're simply out of luck. If you want some sort of fancy custom HTML, that's no problem either.

The reason the Repeater is more flexible then the others, is that both the DataGrid and the DataList are based upon the HTML table element, and while there's nothing wrong with that, it can somewhat limit your (or your designer's) creativity when it comes to displaying your data. The Repeater is not limited to rendering a table. You can use it to output any type of formatting you choose using as little or as much of your own custom HTML as you please.

The Downside

Unfortunately, all this flexibility does come at a cost. The Repeater does not have the built in selection or editing support of the DataGrid and DataList. You can write your own, but it will add to the amount of code needed for your application. If you don't need the additional abilities, then you've lucked out and gained the flexibility of being able to use your own HTML without having to write this extra code.

The Code

To keep things brief... I'm only including the actual Repeater controls in the code listing below. The code I use to create the DataTable and the code that does the actual databinding are contained in this article's download.

I've included four repeaters on the page, and they all use the same set of data. The first simply displays the data in a comma-delimited format with one record per line. The second repeater uses the data to build an HTML unordered list of links with each record representing one list item formatted to produce an HTML link. The third is very similar to the second with an AlternatingItemTemplate and SeparatorTemplate thrown in for illustration. The last repeater uses the image data to build an HTML img tag to show images instead of text for the links. In this case I use the site name as the alt attribute of the img tag.

<asp:Repeater id="myRepeaterPlain" runat="server">
  <ItemTemplate>
    <%# DataBinder.Eval(Container.DataItem, "Id") %>,
    <%# DataBinder.Eval(Container.DataItem, "Name") %>,
    <%# DataBinder.Eval(Container.DataItem, "URL") %>,
    <%# DataBinder.Eval(Container.DataItem, "Image") %>
    <br />
  </ItemTemplate>
</asp:Repeater>
<hr />
<asp:Repeater id="myRepeaterUL" runat="server">
  <HeaderTemplate>
    <ul>
  </HeaderTemplate>
  <ItemTemplate>
    <li><a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">
      <%# DataBinder.Eval(Container.DataItem, "Name") %></a></li>
  </ItemTemplate>
  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:Repeater>
<hr />
<asp:Repeater id="myRepeaterAltSep" runat="server">
  <HeaderTemplate>
    <p><strong>Selected ASP Sites:</strong><br />
  </HeaderTemplate>
  <ItemTemplate>
    <a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">
      <%# DataBinder.Eval(Container.DataItem, "Name") %></a><br />
  </ItemTemplate>
  <AlternatingItemTemplate>
    <font style="background-color: #CCCCFF">
    <a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">
      <%# DataBinder.Eval(Container.DataItem, "Name") %></a><br />
    </font>
  </AlternatingItemTemplate>
  <SeparatorTemplate>
    -----------------------<br />
  </SeparatorTemplate>
  <FooterTemplate>
    <strong>End Selected ASP Sites</strong></p>
  </FooterTemplate>
</asp:Repeater>
<hr />
<asp:Repeater id="myRepeaterImage" runat="server">
  <ItemTemplate>
    <a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">
      <img src="<%# DataBinder.Eval(Container.DataItem, "Image") %>"
      border="0"
      alt="<%# DataBinder.Eval(Container.DataItem, "Name") %>"/></a>
  </ItemTemplate>
</asp:Repeater>

Here's the result. Now remember that all 4 are built using the exact same data:

Repeater Output Screen Capture

Download

You can download the complete code (which naturally includes all the code listed above) from here: repeater.zip (1.3 KB).

Links


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers