Section 19.6. Data Binding

19.6. Data Binding

Various technologies have offered programmers the opportunity to bind controls to data so that as the data was modified, the controls responded automatically. Generally speaking, they made for great demos, but were of limited use to real programmers writing commercial applications. They tended to constrain the developer with severe limitations in how the control looked and performed. It came down to this: "If you want to do what we expect, it is wicked easy, but if you want to do anything else, may the Gods be kind."

The ASP.NET designers set out to provide a suite of robust data-bound controls, which simplify display and modification of data, sacrificing neither performance nor control over the UI. In Version 2.0, they have expanded the list of bindable controls and provided even more out-of-the-box functionality.

In the previous section, you hard-coded radio buttons onto a form, one for each of three shippers in the Northwind database. That can't be the best way to do it; if you change the shippers in the database, you have to go back and rewire the controls. This section shows you how to create these controls dynamically, binding them to data from the database.

Create a new web site called DisplayShippers and drag a RadioButtonList onto the form. Click on the smart tag, and then click on Choose Data Source .... The Choose Data Source dialog opens, as shown in Figure 19-8.

Figure 19-8. Data Source Configuration Wizard

Drop down the Select a data source menu and choose <New Data Source>. You are prompted to choose a data source from the datatypes on your machine. Select Database, (you can specify a name, or use the default name of SqlDataSource1). Click OK and the Configure Data Source dialog box opens.

Choose New Connection to configure a new data source, and the Add Connection dialog box opens, offering you an opportunity to pick a server and to use either Windows or database authorization. Fill in the required information, and choose Northwind as your database name. Be sure to test the connection, as shown in Figure 19-9.

Figure 19-9. Adding a connection

When you click OK, you'll return to the Configure Data Source dialog. You can examine the connection string if you'd like or just press Next to go on to the next step, where you are asked if you'd like to save this connection in the application configuration file. Click Yes and give it a name without spaces, such as NorthwindConnectionString.

The next step is to specify either a stored procedure or SQL statement to use for your query, or to build your query by picking the table or view and then the columns you want, as shown in Figure 19-10.

Figure 19-10. Selecting fields in the shippers table

When you click Next, you are brought to a dialog in which you can test the results of your query, which you can examine as shown circled in Figure 19-11.

When you click Finish, the data source is created. You are returned to the Data Source Configuration Wizard, where you will make three choices:

1. The data source to use (in this case, you have only one)

2. The data field to display in the radio button list

3. The data field to use for the value

These choices are shown in Figure 19-12.

The distinction between the display field and the data field allows you to display the company name in the radio button list, but retrieve the actual shipper ID when processing the user 's request. Run the application (accept the offered Web.config file as previously) and note that the radio button list is dynamically populated with the three values from the database table.

Figure 19-11. Testing the query

Before moving on, there are a few things to notice. When you press F5 to run this application, it appears in a web browser, and the radio buttons come up as expected. Choose View Source and youll see that what is being sent to the browser is simple HTML, as shown in Figure 19-13.

Notice that the HTML has no RadioButtonList ; it has a table, with cells , within which are standard HTML input objects and labels. ASP.NET has translated the developer controls to HTML understandable by any browser.