Hate Repeaters? Try a ListView!

Posted Monday, July 2, 2007 12:31 PM by C-Dog's .NET Tip of the Day

Repeaters have always been a necessary evil. They are simply the only practical way to do custom formatting when binding to lists of data. Oddly enough, it turns out that not everyone just wants to display a grid of data. In the past, by using the repeater, you have given up a number of things (sorting, paging, editing, inserting, deleting, ok well everything just about). Well thanks to the ListView control, we finally have the flexibility of the repeater and the automatiion of the GridView. Let's take a look.

When first working with the ListView, it will seem very similar to a repeater at first, but there are some differences. You need to start by creating a LayoutTemplate. This allows you to customize the code that surrounds the repeating data (i.e. replaced the Need for the HeaderTemplate and FooterTemplate). In this LayoutTemplate, you must identify a control that will contain the repeated data. This can be a div or ul or whatever. Just give it a unique name and make sure it has a runat="server" tag. The ListView control has an attribute called ItemContainerID. This is set to the vlaue of the control you identified in the LayoutTemplate. In most examples, I have seen this named DataSection. This tells the LayoutView where the repeated data should be injected.

Once you have this configured you can start using the LayoutView just like a repeater using the Eval statement. Here is a simple example of everything put together.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=""     
SelectCommand="SELECT * FROM Blah" />
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" 
ItemContainerID="DataSection">
    <LayoutTemplate>
          <div id="DataSection" runat="server" >
          </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div>  <%# Eval("MyField1") %>          </div>
        <div>  <%# Eval("MyField2") %>          </div>
    </ItemTemplate>
</asp:ListView

So far this is very similar to a repeater. Now what if you want to add paging? Well with a repeater, you know you are going to be writing a TON of code to make that happen. Not any more. Now all you have to use is the new DataPager control. It contains a PagedControlID property (which does not show up in the properties editor for some reason). Simply set this to the ID of your ListView and you will have paging. Out of the box, it comes with a Next/Previous pager was well as a numeric pager. It also has support for TemplateFields so you can customize this to your needs. The code for a DataPager looks like this.

    <asp:DataPager ID="DataPager1" PagedControlID="ListView1" runat="server">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
ShowNextPageButton="False"
                ShowPreviousPageButton="False" />
            <asp:NumericPagerField />
            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
ShowNextPageButton="False"
                ShowPreviousPageButton="False" />
        </Fields>
    </asp:DataPager>

That's all it takes to get paging. Which is very cool. However there is even more that the ListView control can do. If you click on the Configure ListView link, you will be presented with some default Layout options. Out of the box, the five that are available are Grid, Tiled, Bulleted List, Flow, Single Row. This gives a lot of layout options to start with. When you select one of these it will autogenerate the markup needed in each template to support viewiing, inserting, and editing. The insert/edit functionality looks very similar to the way a DetailsView or FormView works.

There is a ton this control can do and I have only messed with it a little bit. As I use it more, I will post what I discover.

Read the complete post at http://www.dotnettipoftheday.com/blog.aspx?id=369

Filed under: ,