Skip Navigation LinksHome : CBC Classes : ASP.Net : Database 6 - ListView, Formview and Datalist

CS218 ASP.Net - Templated Database Display Controls (FormView, ListView, DataList and Repeater)


There are four other ASP database controls that are used to display data; the FormView, the ListView the DataList and the Repeater. These are all templated controls, which means there are no bound fields; all of the fields are template fields by default.

Learning about the differences between these controls can take some time and hands-on experience. So most people are a little confused about which control to use at the start. But after you gain some experience you will see that each control provides the best solution in different situations.

  1. FormView ( video, description, example )
  2. DataList ( video, description, example )
  3. ListView ( video, description, grid example, flow example, tiled example, list example, single row example )
  4. Repeater ( video, description, example )
Control Type Read Edit Insert New Delete Sort Paging Num Records Rendering
GridView Yes Yes No Yes Yes Yes Multiple table
DetailsView Yes Yes Yes Yes Yes Yes Single table
FormView Yes Yes Yes Yes No Yes Single table or span
DataList Yes No No No No No Multiple table or span
ListView Yes Yes Yes Yes Yes Yes Multiple table, list or span
Repeater Yes No No No No No Multiple Custom

FormView

formview example The FormView is used to display a single database record. You can think of it like a DetailsView, but it starts out all templates instead of bound fields. So if you're building something like a CMS then the FormView works great. It supports paging, so it can also be used for other purposes.


DataList

datalist example The DataList, as the name suggests was designed to display lists of data as opposed to a single record. The display method is versatile, you can set it to a table of multiple columns, or have the records display as a single column. The single column display isn't exactly a list, that is it's not an HTML/XHTML list. But the items are displayed one after another.

One of the limiting factors of the DataList is that it's really only meant for displaying records so it doesn't support inserting, updating, or deleting, and it doesn't easily support paging. All of the records in the table are displayed, so if you have a lot of records you should probably only use this with an SQL query that picks a subset of the records. If you want to insert, update, delete, sort or page through records you can add code to do it, but it's much easier to use one of the other controls that have this built in.

By default the DataList displays the data in a single column. This example shows a DataList with the same data as all the other examples, but the number of columns set to 3.
datalist example with multiple columns datalist properties


ListView

The Listview is the most versatile control for displaying information data. It will display multiple records, and you get a choice of several types of layout. It supports editing, deleting and inserting new records and paging; but not sorting. The following figure shows a ListView setup to display as grid. listview table example

The following figure shows a ListView setup to use a tiled layout. I omitted a bunch of records in the middle of the image. At it's actual height you have to scroll quite a ways down the page to see the panels for adding a new record or the paging buttons.
listview tiled example

The following figure shows a ListView setup to display as a bulleted list. Once again I omitted a bunch of records in the middle of the image. At it's actual height you have to scroll quite a ways down the page to see the panels for adding a new record or the paging buttons. If you want to change the list type you have to edit the HTML list tags in the templates.
listview list example

The following figure shows a ListView setup to use the flow display type. Once again I omitted a bunch of records in the middle of the image. At it's actual height you have to scroll quite a ways down the page to see the panels for adding a new record or the paging buttons. Notice that this layout looks a lot like the DataList layout; although with the ListView you can edit and delete.
listview flow example

The following figure shows the last ListView display type, which is single row. This example shows all of the records, since they are displayed horizontally instead of vertically.
listview single row example

This image shows the ListView configuration dialog box. Notice that you can change the display type, and allow editing, deleting, inserting and paging. listview properties


Repeater

The Repeater is different from the other controls because not only does it not give you any bound fields, it also doesn't give you any template fields. It provides access to the data via bind or eval commands, but you have to add the template fields yourself if you want to display the data. So in the glass half full view, you have total control over what is being displayed. If you want the data displayed in a table, you build an HTML table. If you want the data displayed as a list, you build a list. You can do whatever you want, you just have to do it all by yourself. The Repeater supports the following templates:

  • ItemTemplate
  • AlternatingItemTemplate
  • HeaderTemplate
  • FooterTemplate
  • SeparatorTemplate

This image shows a Repeater. It looks a lot like a ListView or DataList. repeater example

The Repeater is derived from a different class than the other Data controls. So unlike the Gridview, ListView etc. it doesn't have any of the properties for changing colors, borders or font settings. In other words, if you open the Properties panel for a repeater you will find very few settings. You can still change all of these properties but you will have to use CSS.

Since building the templates for the Repeater from scratch can require a lot of code, I suggest that you start by adding a control like the DataList, connecting it to your database, and then copying the various templates into your Repeater. If you do this, make sure and just make the database connection before copying the code, don't do any Auto Formatting or set any other properties. If you're wondering why, reread the previous paragraph.

At this point you may be, should be, asking why in the world would you ever want to use a Repeater? The display it builds looks like the one built by the DataList or ListView, but you have to do a lot more work to get it. The answer to this is a little technical, but it has to do with what is going on behind the scenes. The other Data controls can require a lot of extra processing, in particular to maintain their viewstate any time the page makes a round-trip. In comparison, the Repeater requires very little processing. So for sites that get a lot of traffic or need to optimize their processing load the Repeater is a good solution.


<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" 
        DataSourceID="AccessDataSource1">
    <AlternatingItemTemplate>
        <span style="">id:
        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
        <br />
        category:
        <asp:Label ID="categoryLabel" runat="server" Text='<%# Eval("category") %>' />
        <br />
        description:
        <asp:Label ID="descriptionLabel" runat="server" 
            Text='<%# Eval("description") %>' />
        <br />
        image:
        <asp:Label ID="imageLabel" runat="server" Text='<%# Eval("image") %>' />
        <br />
        imageAlign:
        <asp:Label ID="imageAlignLabel" runat="server" 
            Text='<%# Eval("imageAlign") %>' />
        <br />
<br /></span>
    </AlternatingItemTemplate>
    <ItemTemplate>
        <h3><asp:Label ID="categoryLabel" runat="server" Text='<%# Eval("category") %>' /></h3>
        <br />
        <asp:Label ID="descriptionLabel" runat="server" 
            Text='<%# Eval("description") %>' />
        <br />
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/images/" + DataBinder.Eval(Container.DataItem, "image")%>' 
              align="left" Width="200" />


        <asp:Label ID="imageLabel" runat="server" Text='<%# Eval("image") %>' />
        <br />
        
        <asp:Label ID="lblImage" runat="server" 
                  Text='<%# checkImage(Eval("image")) %>' ></asp:Label> 
        <asp:Label ID="descriptionLabel" runat="server" 
                  Text='<%# Eval("description") %>' />        <br />
<br /></span>
    </ItemTemplate>
    <LayoutTemplate>
        <div ID="itemPlaceholderContainer" runat="server" style="">
            <span runat="server" id="itemPlaceholder" />
        </div>
        <div style="">
        </div>
    </LayoutTemplate>
</asp:ListView>

    <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
        DataFile="~/App_Data/runnersSoul.mdb" SelectCommand="SELECT * FROM [products]">
    </asp:AccessDataSource>



    Function checkImage(ByVal imageString As Object) As String
        If (imageString Is DBNull.Value) Then
            Return ""
        Else
            Return "<img src='../images/" + imageString.ToString + "' alt='product image' align='left' width='200' />"
        End If
    End Function