JavaScript Editor jscript editor     Web designer 
↑


Main Page

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

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

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

    NoteNote

    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.

  3. Type an <asp:DataList> element into the page. For syntax, see DataList Web Server Control Declarative Syntax.

  4. Set the DataList control's DataSourceID property to the ID of the data source control.

  5. Type an <ItemTemplate> element into the page as a child of the DataList control. For syntax, see DataList Web Server Control Declarative Syntax.

    NoteNote

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

  6. Add HTML text and other controls (Web server controls or HTML server controls) to the ItemTemplate.

    NoteNote

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

  7. 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:

    В CopyCode imageCopy Code
    <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.

  8. Optionally, define an AlternatingItemTemplate, SelectedItemTemplate, and other template properties.

  9. 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.

    Visual BasicВ CopyCode imageCopy Code
    <%@ 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>

    Visual BasicВ CopyCode imageCopy Code
    <%@ 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>

See Also



JavaScript Editor jscript editor     Web designer 
→