While the DataGrid server control demonstrated in the previous section is suitable for many Web application scenarios where a grid-like representation of data is appropriate, many times the presentation of data needs to be much richer. ASP.NET offers two controls, DataList and Repeater, that give you greater flexibility over the rendering of list-like data. These controls are template-based, and so have no default rendering of their own. The way data is rendered is completely determined by the your implementation of the control's templates, which describe how to present data items.

Like the DataGrid control, DataList and Repeater support a DataSource property, which can be set to any ICollection, IEnumerable, or IListSource type. The data in this DataSource is bound to the control using its DataBind method. Once the data is bound, the format of each data item is described by a template.

The ItemTemplate property controls the rendering of each item in the DataSource collection. Inside an ItemTemplate, you can define any arbitrary presentation code (HTML or otherwise). Using the ASP.NET data binding syntax, you can insert values from the data bound to the DataList or Repeater control, as shown in the following example.

<ASP:Repeater id="MyRepeater" runat="server">

    <ItemTemplate>
        Hello <%# DataBinder.Eval(Container.DataItem, "name") %> !
    </ItemTemplate>

</ASP:Repeater>

The Container represents the first control in the immediate hierarchy that supports the System.Web.UI.INamingContainer marker interface. In this case, the Container resolves to an object of type System.Web.UI.WebControls.RepeaterItem, which has a DataItem property. As the Repeater iterates over the DataSource collection, the DataItem contains the current item in this collection. For example, if the data source is set to an ArrayList of Employee objects, the DataItem is of type Employees. When bound to a DataView, the DataItem is of type DataRowView.

The following example demonstrates a Repeater control bound to a DataView (returned from a SQL query). HeaderTemplate and FooterTemplate have also been defined and render at the beginning and end of the list, respectively.

VB DataList1.aspx [Run Sample] | [View Source]

The Repeater control just iterates over the bound data, rendering the ItemTemplate once for each item in the DataSource collection. It does not render anything besides the elements contained in its templates. While the Repeater is a general purpose iterator, the DataList provides some additional features for controlling the layout of the list. Unlike the Repeater, DataList renders additonal elements, like table rows and cells and spans containing style attributes, outside of the template definition to enable this richer formatting. For example, DataList supports RepeatColumns and RepeatDirection properties that specify whether data should be rendered in multiple columns, and in which direction (vertical or horizontal) the data items should be rendered. DataList also supports style attributes, as shown in the following example.

<ASP:DataList runat="server" DataSource="<%#MyData%>"
    RepeatColumns="2"
    RepeatDirection="Horizontal"
    ItemStyle-Font-Size="10pt"
    ItemStyle-Font-Name="Verdana"
>
    ...
</ASP:DataList>

The following sample demonstrates this code in action. In the MyDataList_Select event handler, you populate several other server controls with the details about the particular selected item.

VB Datalist4.aspx [Run Sample] | [View Source]

Note that while the DataList recognizes a few special commands such as Select and Edit/Update/Cancel, the command string fired inside a template can be any arbitrary string. For all commands, the DataList's OnItemCommand is fired. You can wire this event to a handler as in the previous example; the following example shows how to do this.

<script runat="server">

    Protected Sub MyDataList_ItemCommand(Sender As Object, E As DataListCommandEventArgs)
        Dim Command As String = E.CommandName

        Select Case Command
            Case "Discuss"
                ShowDiscussions(E.Item.DataItem)
            Case "Ratings"
                ShowRatings(E.Item.DataItem)
        End Select
    End Sub

</script>

<ASP:DataList id="MyDataList" OnItemCommand="MyDataList_ItemCommand" runat="server">

    <ItemTemplate>

        <asp:linkbutton CommandName="Ratings" runat="server">
            View Ratings
        </asp:linkbutton>
        |
        <asp:linkbutton CommandName="Discuss" runat="server">
            View Discussions
        </asp:linkbutton>

    </ItemTemplate>

</ASP:DataList>

Note that because more than one command can fire this event handler, you must employ a switch statement to determine the particular command that was fired. The following sample demonstrates this code in action.

The following sample demonstrates this code in action.