Making your ASP:Repeater a little bit DRYer

image_thumb5

Dont Repeat Yourself, we see it all over, but yet the suggested way of doing things with a Repeater control makes many developers repeat code. Let me explain what I mean, say we want to use a repeater to render a table containing rows of alternating colors. Sure there is a GridView for this, but there are some cases when we would like to use the more lightweight repeater (especially if we just want a readonly representation and do not want editing capabilities)


As you already know, alternating rows in the repeater can be implemented by entering corresponding markup in the <ItemTemplate> tag for one style and more markup in the <AlternatatingItemTemplate> for the alternating template code. So we basically manage to end up with duplicate code just to set our style.

I mean, just look at the following snippet. The main markup is placed twice just to set the alternating row style.

<table>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <tr class="RowStyle0">
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "FirstName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "LastName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "Age") %>
                </td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <tr class="RowStyle1">
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "FirstName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "LastName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "Age") %>
                </td>
            </tr>
        </AlternatingItemTemplate>
    </asp:Repeater>
</table>

I just dont like seeing <AlternatingItemTemplate> in my code for something as simple as setting the style of a row.
The workaround is just to use the ItemTemplate and determine the css class of the each TR by evaluating the Container.ItemIndex modulo 2. So, here it goes:

<table>
    <asp:Repeater ID="Repeater2" runat="server">
        <ItemTemplate>
            <tr class="RowStyle<%# Container.ItemIndex % 2 %>">
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "FirstName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "LastName") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "Age") %>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

Just make sure you have a .RowStyle0{ } and .RowStyle1{ } in your css with your colors of choice

Now this is a simple showcase example, imagine having a more complex repeater (containing more columns). IMHO, avoiding the AlternatingItemTemplate leeds to DRYer, more maintainable code. Overall this is a very simple example but im pretty sure that we've all come across AlternatingItemTemplate for such a trivial task.

Comments are closed