How to: Add DataList Controls to an ASP.NET Web Page

Article
10/15/2014

To add a DataList Web server control to a Web Forms page requires several steps. The following procedure describes the minimum that you must do to create a working DataList control.

To add a DataList Web server control to a Web Forms page

Add a data source control to your page, such as a SqlDataSource or ObjectDataSource control. For details, see Data Source Controls Overview.

Configure the data source control with connection-string and query information. The data source control must be configured to read data.

Note
If you want to be able to update data from the DataList control, the data source control must be configured with Update and Delete queries, and you must write code to perform the updates. For details, see How to: Allow Users to Edit Items in DataList Web Server Controls.

Type an <asp:DataList> element into the page. For syntax, see DataList Web Server Control Declarative Syntax.
Set the DataList control's DataSourceID property to the ID of the data source control.
Type an <ItemTemplate> element into the page as a child of the DataList control. For syntax, see DataList Web Server Control Declarative Syntax.

Note

For background information about using templates, see ASP.NET Web Server Controls Templates.
Add HTML text and other controls (Web server controls or HTML server controls) to the ItemTemplate.

Note

For the control to render at run time, the DataList control must contain an ItemTemplate that, in turn, contains data-bound controls.
To bind properties of individual controls to the data, create data-binding expressions.

For instance, the following example shows how to bind the Text property of a Label control to the current data item:
```
<ItemTemplate>
  Product name:
  <asp:Label ID="ProductNameLabel" 
    runat="server" 
    Text='<%# Eval("ProductName") %>' >
  </asp:Label><br />
</ItemTemplate>
```
For details about data-binding syntax, see Binding to Databases.
Optionally, define an AlternatingItemTemplate, SelectedItemTemplate, and other template properties.

Note
For background information about using templates, see ASP.NET Web Server Controls Templates.

Note
For the control to render at run time, the DataList control must contain an ItemTemplate that, in turn, contains data-bound controls.

Optionally, define the style for a template (such as the colors and fonts) by setting the ItemStyle, AlternatingItemStyle, EditItemStyle, FooterStyle, HeaderStyle, SelectedItemStyle, or SeparatorStyle properties.

The following example shows an ASP.NET Web page with a DataList control and a SqlDataSource control. The DataList control is configured with an ItemTemplate and an AlternatingItemTemplate. The AlternatingItemTemplate renders with a green background because the AlternatingItemStyle is defined.

<%@ Page Language="VB" %>
<html>
<head runat="server"></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList 
            DataSourceID="SqlDataSource1" 
            ID="DataList1"
            runat="server">

            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel" runat="server" 
                   Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" runat="server" 
                   Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                   Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
            </ItemTemplate>

            <AlternatingItemTemplate>
                Category ID:
                <asp:Label ID="CategoryIDLabel" runat="server" 
                   Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                Category Name:
                <asp:Label ID="CategoryNameLabel" runat="server" 
                   Text='<%# Eval("CategoryName") %>'>
                </asp:Label><br />
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                  Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
            </AlternatingItemTemplate>
            <AlternatingItemStyle BackColor="PaleGreen" />
        </asp:DataList>

        <asp:SqlDataSource 
            ConnectionString=
                "<%$ ConnectionStrings:NorthwindConnectionString %>"
            ID="SqlDataSource1" 
            runat="server" 
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

<%@ Page Language="VB" %>
<html>
<head runat="server"></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" 
            ID="DataList1"
            runat="server">

            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel" runat="server" 
                   Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" runat="server" 
                   Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                   Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
            </ItemTemplate>

            <AlternatingItemTemplate>
                Category ID:
                <asp:Label ID="CategoryIDLabel" runat="server" 
                   Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                Category Name:
                <asp:Label ID="CategoryNameLabel" runat="server" 
                   Text='<%# Eval("CategoryName") %>'>
                </asp:Label><br />
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                  Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
            </AlternatingItemTemplate>
            <AlternatingItemStyle BackColor="PaleGreen" />
        </asp:DataList>

        <asp:SqlDataSource 
            ConnectionString=
               "<%$ ConnectionStrings:NorthwindConnectionString %>"
            ID="SqlDataSource1" 
            runat="server" 
            SelectCommand="SELECT [CategoryID], [CategoryName], 
               [Description] FROM [Categories]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

How to: Add DataList Controls to an ASP.NET Web Page

To add a DataList Web server control to a Web Forms page

See Also

Tasks

Reference

Additional resources