Binding Data Bound Controls
Often you will need to set up a control from which the user can select a value and
have it affect the data displayed in another control. In a sense they are "bound
together". In this lesson you will bind a DropDownList control to the GridView control.
The DropDownList control will contain a list of states, and the value you select
from this control will be used in a WHERE clause for loading data into the GridView.
1. Below the Label type "Select State ". Then, from the
Toolbox, drag a DropDownList control onto the
design surface next to "Select State".
2. You need to add states to the DropDownList control. In
the DropDownList Tasks menu click Edit Items.
3. There are authors in the database table from California and Utah. In the ListItems
Collection Editor dialog, click Add. For Text
enter "CA". Repeat this step to add "UT", and then click OK.
4. In the DropDownList Tasks menu check Enable AutoPostBack.
This will cause the Web page to reload when the user selects a menu item, which
in turn will refresh the GridView with data filtered for the selected state.
5. In the Properties window change the DropDownList
control's (ID) property to "stateDropDownList".
Press CTRL+S to save the changes.
6. Open the authorsSqlDataSource Tasks menu and
select Configure Data Source.
The value of the DropDownList control must be fed into the GridView control, and this
happens by modifying the SELECT statement for the SqlDataSource control. Specifically, a WHERE clause must be added that contains the DropDownList's selected value.
7. Click Next. At
the Configure the Select Statement step, click WHERE.
8. In the Add WHERE Clause dialog, for Column select state. For Source select Control.
For Control ID select stateDropDownList. For
Default value enter "CA". Click Add and then click
OK.
9. Because you have modified the SELECT statement you should also generate
new INSERT, DELETE, and UPDATE commands. Click Advanced.
10. Select Generate Insert, Update, and Delete
statements,
and then click OK.
11. Click Next and then click Finish. When
prompted to refresh Fields and Keys for the GridView, click
No until the dialog clears. Press F5 to run the application.
Select a different state value and notice how the page reloads and filters the authors
in the GridView control.
With previous versions of Visual Studio this would have required a lot more time
and effort. The new VWD data binding features, especially at design-time, greatly
simplify the task of building data-driven Web interfaces.