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

Visual Studio 2010

To add a DataList Web server control to a page requires several steps. The following procedure describes steps that you can follow to create a working DataList control.

To add a DataList Web server control to an ASP.NET Web page

  1. In Design view, from the Data tab of the Toolbox, drag a data source control onto the page, such as a SqlDataSource control or a ObjectDataSource control.

  2. Use the Configure Data Source Wizard to define the connection and the query, or data-retrieval method, for the data source control.


    If you want to use the DataList control to update data (for example, by writing code for the control's UpdateCommand or DeleteCommand event), you must be sure that the data source control is defined with appropriate queries and that the queries include a primary key. In the Configure Select Statement step of the Configure Data Source Wizard, you can click Advanced to display advanced options where you can have the wizard generate update queries.

  3. In Design view, from the Data tab of the Toolbox, drag a DataList control onto the page.

  4. Right-click the DataList control and click Show Smart Tag.

  5. In Choose Data Source list, click the name of the data source control that you created in steps 1 and 2.

    This sets the control's DataSourceID property. If the query includes a primary key, the controls' DataKeyField property is set as well.

  6. In Design view, right-click the DataList control, point to Edit Template, and then click Item Templates. The control displays the ItemTemplate, AlternatingItemTemplate, SelectedItemTemplate, and EditItemTemplate in template-editing mode.

    By default, the ItemTemplate template is populated with static text for captions and with data-bound Label controls to display the fields from the data source.

  7. Add to the templates any HTML text and other Web server controls or HTML server controls that you need. For detailed information about editing templates, see How to: Create Web Server Control Templates Using the Designer.

  8. When you are finished editing the templates, right-click the DataList control and then click End Template Editing.