How to: Bind to Data in a Templated Control in Visual Studio

You can associate a control, such as the GridView, DetailsView, FormView, ListView, DataList, or Repeater control with a data source control, such as the LinqDataSource, ObjectDataSource, or SqlDataSource control. You can also use the templates for the control (the ListView, DataList, Repeater, and FormView controls require the templates) to customize the data presentation with your custom user interface (UI) within the designer.

This topic explains the process of adding UI controls, such as a TextBox control, to a template, and then binding the control to specific data.

To bind a template control to a data source

1. Establish a valid data source, such as the SqlDataSource control, on your page and note the ID property value.

   For example:

   <asp:SqlDataSource ID="SqlDataSource1" Runat="server" 
     SelectCommand="SELECT CustomerID, CompanyName FROM Customers"
     ConnectionString="<%$ 
       ConnectionStrings:NorthwindConnectionString %>">
   </asp:SqlDataSource>
   

   For more information about how to use a SqlDataSource control with the database, see SqlDataSource Web Server Control Overview.

2. From the Data group in the Toolbox, drag a DataList control onto your page.

   The DataList Tasks shortcut menu appears.

   • If the DataList Tasks shortcut menu does not appear, right-click the DataList control, and then click Show Smart Tag.

3. In the Choose Data Source list, click the SqlDataSource control that you created in step 1.

   When the page is rendered, the control displays all columns and data from the query without customization. Depending on your data, your DataList control will appear with default bound fields, as shown in the following code example:

   <asp:DataList ID="DataList1" runat="server" 
       DataKeyField="CustomerID" 
       DataSourceID="SqlDataSource1">
     <ItemTemplate>
       CustomerID:
       <asp:Label ID="CustomerIDLabel" runat="server" 
           Text='<%# Eval("CustomerID") %>'>
       </asp:Label><br />
       CompanyName:
       <asp:Label ID="CompanyNameLabel" runat="server" 
           Text='<%# Eval("CompanyName") %>'>
       </asp:Label><br />
       <br />
     </ItemTemplate>
   </asp:DataList>
   

To edit the templates for the control

1. In Design view, right-click the DataList control, and then click Show Smart Tag.

2. On the DataList Tasks menu, click Edit Templates.

   You can now edit templates in the designer. You can drag other controls onto the template to be bound later.

3. In the Display list, click AlternatingItemTemplate (different controls support different templates).

4. In the AlternatingItemTemplate design space, type CustomerID:, and then from the Standard group in the Toolbox, drag a T:System.Web.UI.WebControls.Label control onto the DataList control.

5. On the Label Tasks menu, click Edit Data Bindings.

6. In the LabelName DataBindings dialog box, under Bindable properties, click Text.

7. Under Binding for Text, in the Bound to list, click CustomerID.

8. Repeat steps 4 through 7 for CompanyName.

9. In the AlternatingItemTemplate design space, select all content, and then press CTRL+B to change the text to bold.

10. Right-click the DataList control, and then click Show Smart Tag.

11. Click End Template Editing to exit template editing mode.

    When your page is displayed in the browser, the list of companies is displayed alternating between plain text and bold text.

See Also

Tasks

Walkthrough: Basic Data Access in Web Pages

Concepts

Data Source Controls Overview

SqlDataSource Web Server Control Overview