Version

Binding WebDropDown to a Sql Data Source

Before You Begin

WebDropDown™ can be bound to a SQL Data Source using the Data Source editor.WebDropDown allows you to show more than one column through the use of templating.

In this topic, you will bind WebDropDown to a single column of the Customers table from the Northwind database.

What You Will Accomplish

You will learn how to bind WebDropDown to a SQL Data Source.

Follow these Steps

  1. Create an ASP.NET web page.

  2. Drag a ScriptManager component from the Microsoft® Visual Studio™ toolbox onto the page.

  3. Drag a WebDropDown control onto the page.

  4. Drag a SqlDataSource component onto the page.

  5. Click the SqlDataSource component’s smart tag and select Configure Data Source. The Configure Data Source configuration wizard appears.

images\WebDropDown Binding WebDropDown to a SQL Data Source 01.png
  1. Click New Connection… to configure the connection string. The Add Connection dialog appears.

images\WebDropDown Binding WebDropDown to a SQL Data Source 02.png
  1. Set the server name to the server you are using, .\SQLEXPRESS in this case. Set the database to Northwind.

  2. Click Ok. You are returned to the Configure Connection screen.

  3. Click Next.

  4. Select Specify Columns from a Table or View and do the following:

    • Choose the Customers table from the drop-down list.

    • In the Columns section, select CompanyName to display the column.

  1. Click Next.

  2. Test your query to make sure SqlDataSource retrieves your data.

  3. Click Finish to close the configuration wizard. SqlDataSource is set up to retrieve the CompanyName of the Customers table from the Northwind database.

  4. In the Property window for WebDropDown, set the DataSourceID property to be the id of the SqlDataSource component.

  5. Set the TextField property to CompanyName.

  6. Save and run the application. WebDropDown displays the list of company names similar to the following image:

images\WebDropDown Binding WebDropDown to a SQL Data Source 03.png