Click here to Skip to main content
13,348,514 members (72,435 online)
Click here to Skip to main content
Add your own
alternative version


46 bookmarked
Posted 30 Aug 2004

Expanding the ASP.NET Repeater for Added Layout Control

, 30 Aug 2004
Rate this:
Please Sign up or sign in to vote.
This article describes how to reap the benefits of the ASP.NET Repeater control while at the same time be able to design your item templates in Visual Studio's WYSIWYG editors; instead of hand-writing the HTML.


This article describes how to reap the benefits of the ASP.NET Repeater control while at the same time be able to design your item templates in Visual Studio's WYSIWYG editors; instead of hand-writing the HTML.


As with many other ASP.NET developers, I have found the benefits of the Repeater control, and it's now one of my favorites. The only thing I didn't like about it was the fact that you had to manually edit the HTML to define the look of each item in the Repeater. I would like to be able to graphically design the layout of my items in Visual Studio's WebForm designer. I would also like the ability to perform additional server-side logic for each item in the control to perform additional database look-ups, etc.

How It Works

The trick is to create a Web User Control and bind the data from the Repeater's data source for each item as they are being bound. Visual Studio lets you visually design your Web User Control in its WYSIWYG editor. I won't go into the details of building Web User Controls here, but they're very simple.

In this example, the data source is a short list of CDs; each with a title, artist, and country (among other things). I generate this data source by reading a local XML file (I won't go into this process in this article, because it's very straight-forward). I want each CD's information to be displayed in single-record vertical format like this:

For added measure, I want to take advantage of the Repeater's AlternatingItem functionality and show every other CD with a yellow background, as shown above. (Ugly, yes, but it's just an example!)

The first thing I do is create a Web User Control called CDInfoControl using Visual Studio's editors. In this control, I create the table layout, labels, and text fields for each property: Title, Artist, Country, etc. Please see the example project for details, but the generated HTML looks like this:

<%@ Control Language="vb" AutoEventWireup="false" 


             Inherits="WebApplication4.CDInfoControl" %>

   <asp:Panel id="pnlMain" runat="server">
      <TABLE id="Table5" 

        style="FONT-SIZE: x-small; FONT-FAMILY: Tahoma" borderColor="#000000"

        cellSpacing="0" cellPadding="1" border="1">
            <TD bgColor="lightblue"><STRONG>
              <FONT style="BACKGROUND-COLOR: lightblue">Title:</FONT></STRONG>
            <TD><asp:Label id="lblTitle" runat="server"></asp:Label></TD>
            <TD bgColor="lightblue"><STRONG>
              <FONT style="BACKGROUND-COLOR: lightblue">Artist:</FONT></STRONG><

            <TD><asp:Label id="lblArtist" 

            <TD bgColor="#add8e6"><STRONG>Country:</STRONG>
            <TD><asp:Label id="lblCountry" runat="server"></asp:Label></TD>
            <TD bgColor="#add8e6">
            <TD><asp:Label id="lblCurrency" 


The design-view looks like this:

Next, I edit the main page's HTML to include my user control inside the Repeater. This is the only time I need to manually edit the HTML for the Repeater. The result looks like this:

<asp:repeater id="Repeater1" runat="server">
      <table width="100%" style="font: 8pt verdana" ID="Table5">
            <uc1:CDInfoControl id="CDInfo" runat="server"></uc1:CDInfoControl>

Notice that I created an instance of CDInfoControl named CDInfo and placed it inside the Repeater. I also had to do the .NET wire-up to define the control, as you can see in the sample application. I cheated a little by dragging the control onto my form and then editing the HTML source to move the control to inside of my Repeater. This way, Visual Studio took care of the wire-ups for me!

The next step is to handle the Repeater's ItemDataBound event to send the data to my control. ASP.NET creates a new instance of my control for each record in the data source, so I simply cast the argument as a DataRowView and call a Public Sub (explained next) of my control.

Private Sub Repeater1_ItemDataBound(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) _
   Handles Repeater1.ItemDataBound
        If (e.Item.ItemType = ListItemType.Item) Then
            CType(e.Item.FindControl("CDInfo"), _
               CDInfoControl).SetData(CType(e.Item.DataItem, _
               DataRowView), False)
        End If

        If (e.Item.ItemType = ListItemType.AlternatingItem) Then
            CType(e.Item.FindControl("CDInfo"), _
               CDInfoControl).SetData(CType(e.Item.DataItem, _
               DataRowView), True)
        End If
End Sub

Finally, I need to handle this data binding in my control, so I create a Public Sub named SetData, which accepts the DataRowView and a flag indicating whether or not this is an AlternatingItem. All I do in this Sub is to populate the labels and fields of my control.

Public Sub SetData(ByVal dr As DataRowView, _
               ByVal IsAlternating As Boolean)
        Me.lblTitle.Text = dr("title")
        Me.lblArtist.Text = dr("artist")
        Me.lblCountry.Text = dr("country")
        Me.lblCurrency.Text = GetCurrency(dr("country"))

        If IsAlternating Then
            pnlMain.BackColor = Color.LightGoldenrodYellow
        End If
End Sub

Notice that I don't have to depend only on the data from the Repeater. In this example, I get the currency from a private function within my control. This could trigger a database lookup, additional logic, etc. This really makes the Repeater control powerful.

Points of Interest

I didn't go into every detail of the sample, but it's very easy to follow. The point I wanted to get across was the use of a Web User Control in concert with a Repeater to give you the most benefit.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Barry Etter
Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralDataRowView not defined Pin
Amie Joye2-Jun-09 6:13
memberAmie Joye2-Jun-09 6:13 
Questionhow to bind data list? Pin
venkateshanbu18-Apr-08 1:15
membervenkateshanbu18-Apr-08 1:15 
QuestionButtons in the User Control? Pin
rmcubedmm26-Sep-05 7:38
memberrmcubedmm26-Sep-05 7:38 
GeneralAllow me to share my C# codes Pin
ruxmcs9-Aug-05 10:50
sussruxmcs9-Aug-05 10:50 
GeneralRe: Allow me to share my C# codes Pin
Franz Pentenrieder16-Aug-05 3:12
memberFranz Pentenrieder16-Aug-05 3:12 
GeneralIt works!! Excellent! Pin
ruxmcs9-Aug-05 10:40
sussruxmcs9-Aug-05 10:40 
GeneralRe: It works!! Excellent! Pin
venkateshanbu18-Apr-08 1:15
membervenkateshanbu18-Apr-08 1:15 
GeneralRecords in columns AND rows Pin
Stefan R9-Aug-05 0:19
memberStefan R9-Aug-05 0:19 
GeneralWhy do you need code behind page. Pin
LudicEyes22-Jun-05 19:01
memberLudicEyes22-Jun-05 19:01 
GeneralRe: Why do you need code behind page. Pin
ramyar4-Sep-07 13:41
memberramyar4-Sep-07 13:41 
Questionwhat is ?? Pin
Trance Junkie21-Jun-05 22:27
memberTrance Junkie21-Jun-05 22:27 
QuestionExpanding? Pin
Rob van der Veer11-Sep-04 7:06
memberRob van der Veer11-Sep-04 7:06 
GeneralI just do not get Repeater controls.. Pin
Rocky Moore7-Sep-04 23:23
memberRocky Moore7-Sep-04 23:23 
GeneralRe: I just do not get Repeater controls.. Pin
koo917-Jan-05 12:29
memberkoo917-Jan-05 12:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 31 Aug 2004
Article Copyright 2004 by Barry Etter
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid