Data Binding

One of the most common feats you will want to perform with your Web applications is presenting data from a database. Not surprisingly, Microsoft has added some ASP.NET controls specifically for displaying data. In addition, most of the regular ASP.NET server controls, such as the TextBox, can be bound to a data source.

Chapter 6, “Getting Started with ADO.NET,” contains much more about data binding. However, it is useful to repeat some of that information here, in case you skipped Chapter 6.

The good news about data binding is that you use many of the same data controls you used in Chapter 6, which discussed the data controls and a little bit about ADO.NET. There is a wrinkle with Web forms, however, and it is that you work with the controls in a slightly different way. In addition, the process that is outlined in this section might change slightly between Beta 2 and the final release of VS .NET. Still, the concepts should be the same.

Create a new Web Form in the project and name it DataTest1.aspx. This will open the form in the designer, and it is initially blank. To add some data-bound controls to this page, you must provide it with a datasource. Click on the Toolbox and from the Data tab, drag a SqlDataAdapter to the page. This starts the DataAdapter Configuration Wizard, as you saw in Chapter 6. Click the Next button and you will have a choice of what data connection to use. Use the one you created in Chapter 6 that points to the Northwind database (if you skipped Chapter 6, you'll find the instructions on adding a new data connection in the section “Using the Web Forms Controls”). Click the Next button.

On the next page, choose Use SQL Statement and click the Next button. In the text box, type in this SQL statement: Select * from Products. Click the Finish button.

Two controls are added to your form: a SqlDbConnection and a SqlDbDataAdapter. From the Data menu, choose Generate DataSet. A dialog box will open. Choose to create a new DataSet named dsProduct, and leave checked the box asking whether you'd like to add an instance of the class to the designer.

Visual Studio now adds a dsProduct object, named dsProduct1, to your designer. At this point, you have a DataSet that can be filled with data.

In the Toolbox, change to the Web Forms tab. Drag a DataGrid control to the designer. The DataGrid is a control that automatically displays the data in a grid format, using HTML tables.

After the DataGrid is displayed on the form, right-click on it and choose Property Builder. This opens a Properties dialog box. On the General page, drop down the DataSource combo box and choose the dsProducts1 DataSet. In the DataMember combo box, choose the Products table. In the Data Key Field combo box, drop down the list and choose the primary key of the Products table, ProductID. At this point, click the OK button.

Back in the designer, you will see that the grid has grown, and now has a column for each field in the database. You might be tempted to run this page now, but you aren't quite done.

Double-click on the form (but not the DataTable) to get to the code window. You should see a DataTest1_Load event procedure. There is already some code in there as well. You need to add two lines of code, so you end up with this:

Protected Sub Page_Load _
 (ByVal Sender As System.Object, ByVal e As System.EventArgs)
   If Not IsPostback Then   ' Evals true first time browser hits the page
       Me.SqlConnection1.Open()
       Me.SqlDataAdapter1.Fill(dsProducts)
       Me.SqlConnection1.Close()
       DataGrid1.DataBind()
   End If
End Sub

The first line of code you added, Me.sqlDbConnection1.Open(), opens the actual connection to the database. The next line, FillDataSet(dsProduct1), calls a routine that was created for you when you chose to generate the methods. This goes to the database, executes the statement in the SqlDbDataAdapter, and stores the resulting records in the DataSet you pass in as a parameter (in this case, dsProduct1). The fourth line of code, DataGrid1.DataBind(), binds the grid to the DataView control, which is in turn bound to the DataSet.

Make sure that your DataTest1 form is set as the startup form and run the project. You should see the records from the Products table appear in a grid format on the page in IE, as shown in Figure 8.8. If you select View, Source in the browser, you will see a tremendous amount of state information at the top, but if you scroll past it, you will see that the data is displayed in a simple HTML table.

This just scratches the surface of what you can do with data binding in your ASP.NET applications. However, the discussion will stop here because you have seen the basic functionality provided, and future changes to Visual Studio .NET might require changes in how data binding is done.