An <asp:DataList> control, like an <asp:Repeater> control, repeatedly displays fields from a data source. The DataList's default formatting is within XHTML table cells, and it provides good flexibility in arranging information within cells.

The general format for coding an <asp:DataList> control is shown below. Like the Repeater, the DataList uses templates to describe output formatting. The difference is that its ItemTemplate is automatically formatted as a table cell which can be repeated horizontally across the page or vertically down the page. Not all sections of the control are needed to produce simple data listings.

<asp:DataList id="id" Runat="Server"
  Caption="string"
  CaptionAlign="Top|Bottom|Left|Right|NotSet"
  CellPadding="n"
  CellSpacing="n"
  DataSourceID="id"
  GridLines="Both|Horizontal|Vertical|None"
  HorizontalAlign="Left|Center|Right|Justify|NotSet"
  RepeatColumns="n"
  RepeatDirection="Horizontal|Vertical"
  RepeatLayout="Table|Flow"
  ShowFooter="False|True"
  ShowHeader="False|True"
	 	
  HeaderStyle-property="value"...
  ItemStyle-property="value"...
  AlternatingItemStyle-property="value"...
  SeparatorStyle-property="value"...
  FooterStyle-property="value"...
>
	
  <HeaderTemplate>
    XHTML and binding expressions
  </HeaderTemplate>
	 
  <ItemTemplate>
    XHTML and binding expressions
  </ItemTemplate>
	 
  <AlternatingItemTemplate>
    XHTML and binding expressions
  </AlternatingItemTemplate>
		
  <SeparatorTemplate>
    XHTML and binding expressions
  </SeparatorTemplate>
	 
  <FooterTemplate>
    XHTML and binding expressions
  </FooterTemplate>

</asp:DataList>

Binding to a DataList Control

As was done for the Repeater control, the Books table of the BooksDB.mdb database is bound to the following DataList through an <asp:AccessDataSource> control. This basic layout is given in an <ItemTemplate> that binds the BookID, BookTitle, and BookPrice fields as repeated items.

<asp:AccessDataSource id="BookSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT * FROM Books WHERE BookType = 'Database'
                 ORDER BY BookID"/>

<asp:DataList id="BookTable" DataSourceID="BookSource" Runat="Server"
  GridLines="Both"
  CellSpacing="1">
  <ItemTemplate>
    <asp:Label Text='<%# Eval("BookID") %>' Runat="Server"/><br/>
    <asp:Label Text='<%# Eval("BookTitle") %>' Runat="Server"/><br/>
    <asp:Label Text='<%# String.Format("{0:C}", Eval("BookPrice")) %>' 
      Runat="Server"/><br/>
  </ItemTemplate>
</asp:DataList>

An <ItemTemplate> formats its bound data within an XHTML table. Each <ItemTemplate> is contained in a single cell of a table row. This is the format given by the default RepeatLayout="Table" property. The alternative layout is "Flow," which removes the table structure and presents continuous lines of output. Adding the properties GridLines="Both" and CellSpacing="1" to the DataList makes its layout more obvious as shown above. As in the case of the Repeater, data fields are bound to controls through <%# Eval(fieldname) %> binding expressions.

By default, the DataList displays a single column of items contained in its ItemTemplate. By coding the RepeatColumns property, the listing can be repeated across multiple columns. Also, the RepeatDirection property can be coded to control whether items are sequenced across rows or down columns (the default). These settings are made in the following DataList, with a <HeaderTemplate> added to label the output.

<asp:AccessDataSource id="BookSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT * FROM Books ORDER BY BookID"/>

<asp:DataList id="BookTable" DataSourceID="BookSource" Runat="Server"
  RepeatColumns="3"
  RepeatDirection="Horizontal"
  CellPadding="3"
  CellSpacing="1"
  GridLines="Both"
    HeaderStyle-BackColor="#707070"
    HeaderStyle-ForeColor="#FFFFFF"
    HeaderStyle-Font-Bold="True"
    HeaderStyle-HorizontalAlign="Center">
  <HeaderTemplate>
    Products Listing
  </HeaderTemplate>
  <ItemTemplate>
    <asp:Label Text='<%# Eval("BookID") %>' Font-Bold="True" 
      Runat="Server"/><br/>
    <asp:Label Text='<%# Eval("BookTitle") %>' 
      Runat="Server"/><br/>
    <asp:Label Text='<%# String.Format("{0:C}", Eval("BookPrice")) %>' 
      Runat="Server"/><br/>
  </ItemTemplate>
</asp:DataList>

DataList Styles

Styling of a DataList is applied with server style properties coded for the HeaderStyle, ItemStyle, FooterStyle, AlternatingItemStyle, and SeparatorStyle sections of the DataList. Additional styling can be applied with CSS styles embedded in the templates. The following DataList includes various style settings.

Book Listing
DB111 Oracle Database $69.99	DB222 Databases in Depth $29.95	DB333 Database Processing $136.65
DB444 Access Database Design $34.95	DB555 SQL Server 2005 $29.99	GR111 Adobe Photoshop CS2 $29.99
GR222 Learning Web Design $39.95	GR333 Macromedia Flash Professional $44.99	GR444 Digital Photographer Handbook $24.95
GR555 Creating Motion Graphics $59.95	HW111 How Computers Work $29.99	HW222 Upgrading and Repairing PCs $59.99
HW333 USB System Architecture $49.99	HW444 Designing Embedded Hardware $44.95	HW555 Contemporary Logic Design $102.95
SW111 Java How to Program $98.59	SW222 C Programming Language $44.25	SW333 Programming C# $44.95
SW444 Programming PHP $39.95	SW555 Visual Basic.NET Programming $49.99	SY111 Operating System Concepts $95.75
SY222 The UNIX Operating System $19.95	SY333 Windows Server 2003 $29.99	SY444 Linux in a Nutshell $44.95
SY555 Mastering Active Directory $49.99	WB111 Ajax in Action $22.67	WB222 Professional ASP.NET 2.0 $32.99
WB333 Cascading Style Sheets $39.95	WB444 DOM Scripting $23.09	WB555 Microsoft ASP.NET 2.0 $29.99
Source: Books Database

<asp:AccessDataSource id="BookSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT * FROM Books ORDER BY BookID"/>

<asp:DataList id="BookTable" DataSourceID="BookSource" Runat="Server"
  GridLines="Both"
  CellPadding="1"
  CellSpacing="3"
  BorderStyle="Ridge"
  BackColor="#F3F3F3"
  RepeatColumns="3"
  RepeatDirection="Horizontal"
    HeaderStyle-BackColor="#707070"
    HeaderStyle-ForeColor="#FFFFFF"
    HeaderStyle-Font-Size="12pt"
    HeaderStyle-HorizontalAlign="Center"
    ItemStyle-Font-Size="10pt"
    ItemStyle-VerticalAlign="Top"
    FooterStyle-BackColor="#707070"
    FooterStyle-ForeColor="#FFFFFF"
    FooterStyle-Font-Size="9pt"
    FooterStyle-Font-Italic="True">

  <HeaderTemplate>
    Book Listing
  </HeaderTemplate>

  <ItemTemplate>
    <asp:Image Width="60" Style="float:left" Runat="Server"
      ImageUrl="<%# "../BookPictures/" & Eval("BookID") & ".jpg" %>"/>
    <asp:Label Text='<%# Eval("BookID") %>' 
      Runat="Server"/><br/>
    <asp:Label Text='<%# Eval("BookTitle") %>' 
      Runat="Server"/><br/>
    <asp:Label Text='<%# String.Format("{0:C}", Eval("BookPrice")) %>' 
      Runat="Server"/><br/>
  </ItemTemplate>

  <FooterTemplate>
    Source: Books Database
  </FooterTemplate>

</asp:DataList>