My favorite control, hands down, in the ASP.NET toolbox is the Repeater. Why? Because is it’s the cleanest of them all. The repeater does what it says, nothing less, nothing more: it repeats. Just to show you the difference between a simple Repeater control and a GridView I’m going to show you a little bit of ASP.NET markup here with a GridView and a Repeater:
<div id="repeater"> <asp:Repeater ID="repPeople" runat="server"> <ItemTemplate> <span><%# Eval("ID")%></span> <span><%# Eval("FirstName")%></span> <span><%# Eval("LastName")%></span> </ItemTemplate> </asp:Repeater> </div> <div id="gridview"> <asp:GridView ID="gvPeople" runat="server"> <Columns> </Columns> </asp:GridView> </div> 1. ASP.NET markup of a Repeater and a GridView
This is a fairly straightforward example. I’m binding to a simple class Person (see my previous post) with an ID, a FirstName and a LastName property.
For my first example of the output I will bind both to the same list: an empty List(of Person). Here’s the output:
<div id="repeater"> </div> <div id="gridview"> <div> </div> </div> 2. Output when binding to an empty list
The output I’d expect would be the same for both: nothing. In case of the Repeater that’s exactly what there is, nothing. The GridView on the other hand, has already created an extra div. That extra div is not really a problem, what I don’t like about it is the fact that apparently the GridView outputs more than strictly necessary. Now let’s take it one step further and bind a list with one item to it. The output that this produces is:
<div id="repeater"> <span>1</span> <span>Kenneth</span> <span>Truyers</span> </div> <div id="gridview"> <div> <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_gvPeople"style="border-collapse:collapse;"> <tr> <th scope="col">ID</th> <th scope="col">FirstName</th> <th scope="col">LastName</th> </tr> <tr> <td>1</td> <td>Kenneth</td> <td>Truyers</td> </tr> </table> </div> </div> 3. Output when binding to a list with one item
Now, that is a big difference. First of all, again the Repeater is just outputting whatever it was instructed. The GridView on the other hand has gone and constructed a table, added inline styles and applied styling using html-attributes.
The first part I’m willing to look over. OK, it’s creating a table, and we all know that that’s a big no-no in modern web development, but hey, after all what the GridView is doing is exactly that, showing you a table of data. Granted, you could do it with divs, but let’s not be over critical here. The second and third part however are much more worrying. If you were to add styling to the GridView you would notice that it would apply these styles as inline styles as well (BTW: you can also apply CSS classes to certain aspects of the table).
Another argument you could make is that the GridView is actually outputting more information than the repeater does, because it has a nice header and so on. While this is true, the same can be achieved by using the Repeater. It the next example I will change the ASP.NET markup so that the result is equally “rich” by adding an alternating background-color for the rows and compare the output. This is the markup I’m using:
<div id="repeater"> <asp:Repeater ID="repPeople" runat="server"> <ItemTemplate> <div class="row"> <td><%# Eval("ID")%></td> <td><%# Eval("FirstName")%></td> <td><%# Eval("LastName")%></td> </div> </ItemTemplate> <AlternatingItemTemplate> <div class="altrow"> <td><%# Eval("ID")%></td> <td><%# Eval("FirstName")%></td> <td><%# Eval("LastName")%></td> </div> </AlternatingItemTemplate> </asp:Repeater> </div> <div id="gridview"> <asp:GridView ID="gvPeople" runat="server" GridLines="None"> <RowStyle BackColor="#eeeeee" /> <AlternatingRowStyle BackColor="#ffffff" /> <Columns> </Columns> </asp:GridView> </div>
4. Markup for displaying alternating rows
This is the resulting output:
<div id="repeater"> <div class="row"> <td>1</td> <td>Kenneth</td> <td>Truyers</td> </div> <div class="altrow"> <td>2</td> <td>John</td> <td>Doe</td> </div> </div> <div id="gridview"> <div> <table cellspacing="0" id="ContentPlaceHolder1_gvPeople"style="border-collapse:collapse;"> <tr> <th scope="col">ID</th> <th scope="col">FirstName</th> <th scope="col">LastName</th> </tr> <tr style="background-color:#EEEEEE;"> <td>1</td> <td>Kenneth</td> <td>Truyers</td> </tr> <tr style="background-color:White;"> <td>2</td> <td>John</td> <td>Doe</td> </tr> </table> </div> </div>
As you can see, again the output of the Repeater is much cleaner and is exactly what I told it to output while the GridView has emitted inline styles for every row. Yes, the markup I had to type is a bit larger and verbose, but honestly I think this is well compensated by the flexibility the Repeater gives you.
As an example of flexibility: How would you go and transform this in HTML 5-code (by say encapsulating every person in an
What I’m trying to say with this article is not that the GridView is pure evil and should be avoided at all times. There are certainly times when it’s useful (A simple textboxes-over-data application for example) and it can help you with creating an application very fast.
The Repeater however I find an indispensable control in almost every application. It’s clean, fast and does exactly what you tell it to do.
Now, in my last example there’s one big disadvantage that can be seen in the Repeater-control: I had to duplicate the content of the row and the alternating row just to get the outer-div to have a different class. I will tackle this problem in my next post when I will talk about the Repeater-UserControl pattern.