Data Binding on Web Forms
This chapter is from the book
This chapter is from the book
This chapter is from the book
Although you could write all the code necessary to open a data source, retrieve the data, and fill in controls on an ASPX page, you needn't do this. Web Forms can use ADO.NET under the covers to handle all the "plumbing" for you. Using data binding, you do not need to explicitly write the code that instantiates a connection and creates a DataSet (as you would if you were creating an unbound form). Visual Studio .NET includes tools to create the necessary Connection and Command objects for you, and ASP.NET controls include code that allows them to bind to these data objects with very little code. Web Forms allow you to bind easily to almost any structure that contains data. You can bind Web Forms to traditional data stores, such as data stored in a Microsoft SQL Server or Oracle database, or you can bind to the result of data read from text files, data within other controls, or data stored in an array. In this article, you will learn to bind to a SQL Server table.
You're most likely going to want to be able to bind the DataGrid, ListBox, and DropDownList controls to data sources. We'll focus on these controls, then, in this article, and show how you can display data from a SQL Server table in each of these controls.
Creating a Sample Page
The simplest way to get started with data binding is to display the contents of a single table in a DataGrid control. As you'll see, this requires very little effort on your part, at least, if your only goal is to simply display the data.
To get started, in this section you'll walk through building the sample page shown in Figure 1.
){kind=link}
Figure 1 You'll build this page in the first part of this article.
The example involves these basic steps (all described in detail in the following sections):
Building a Web Form.
Creating and configuring the DataSet to which you wish to bind a control on the form.
Adding a DataGrid control to the page.
Binding the DataGrid control to the data source.
Before digging into the details of setting up the bound DataGrid control, you'll need to add a new page to your project. Follow these steps to add the new page:
Select Project, Add Web Form from the menu bar.
Set the name of this form to Products.aspx.
Click Open to add this new Web Form to your project.
Creating and Configuring a DataSet
Once you've created the Products page, you're ready to create and configure the DataSet you'll use on this page. In this example, you'll retrieve data from the Products table that's part of SQL Server's Northwind sample database. Because a DataSet is an in-memory cache consisting of tables, relations, and constraints, it acts as an "in-memory" database, and you'll bind controls on your page to DataSet objects. You need to start by filling a DataSet using a DataAdapter object.
NOTE
Although we had a choice, when designing the examples in this article of using either the System.Data.OleDb or System.Data.SqlClient namespaces, we opted for the OleDb namespace because of its flexibility. That is, had we chosen the SqlClient namespace, and then you decided to modify the examples to work with a DB2 database back end, you would have to modify every object in every example. Using the OleDb namespace, all you need to do is modify the connection information and field names. It was a difficult choice, and if you're only working with SQL Server 7.0 or higher, it's not the correct one for you. Note that we'll often refer to namespace-specific objects (such as the OleDbDataAdapter object) using namespace-agnostic names, such as DataAdapter. There isn't a DataAdapter object out there, but referring to it generically sure beats saying OleDbDataAdapter or SqlDataAdapter each time! If you have time, it would be a worthwhile exercise to try repeating the page created in this article using the SqlClient namespace. The issues aren't very different, and you should be able to take the same steps using the different namespace.
Using the Data Adapter Configuration Wizard
The first step in retrieving data is to create a Connection object that contains information on the location and type of your data source. Although you can write code to handle this task, for the purposes of this article, you'll use the user-interface tools provided by Visual Studio .NET to create the necessary connection. To do that, you'll use the OleDbDataAdapter component on the Data tab of the Toolbox. Once you've placed this component on your page, Visual Studio .NET walks you through the steps of supplying connection information and building a SELECT command to retrieve the data you need. Once you've built the DataAdapter, you'll still need to write a tiny bit of code to fill a DataSet and bind a grid to the DataSet.
TIP
You could write code that solves all the tasks in this article. To keep things simple, however, in this first exploration of ADO.NET, we've elected to use the tools provided by Visual Studio .NET. That way, you don't need to write much code.
Follow these steps to set up the OleDbDataAdapter object on your new page:
Make sure the Toolbox window is visible (select View, Toolbox, if it's not).
Select the Data tab on the Toolbox window.
Click and drag the OleDbDataAdapter component onto your page. This starts the Data Adapter Configuration Wizard.
The first page of the wizard, shown in Figure 2, gives you basic information. Select Next to move on.
Figure 2 The first page of the Data Adapter Configuration Wizard gives you basic information about what's going to happen.
On the Choose Your Data Connection page, shown in Figure 3, you have the option to use an existing connection or to create a new one. Because you're unlikely to have an existing connection at this point, select New Connection to create a new one. (Even if you have existing connections, follow along with creating a new one, for now.)
Figure 3 Choose your data connection.
Clicking New Connection brings up the Data Link Properties dialog box. (This should be a familiar sight to anyone who has used ADO and OLE DB in the past.) Assuming that you can use the Northwind SQL Server sample database on your local computer, log in as "sa" with no password (not a good idea, in general) and fill in the dialog box as shown in Figure 4. Click OK when you're done to dismiss the dialog box; then click Next to move to the next page.
Figure 4 Supply data link properties.
NOTE
If you can't connect to the Northwind SQL Server sample database, you may need to talk with a network administrator, who can supply information about how to connect to the sample database.
The Choose a Query Type page, shown in Figure 5, allows you to designate the type of query you want to use when the DataAdapter fills a DataSet. Select Use SQL Statements (in order to have the wizard create local SQL statements, as opposed to using existing or new stored procedures), and click Next.
Figure 5 Designate the type of query the wizard should use.
On the Generate the SQL Statements page, you must either enter a SQL statement manually or click Query Builder to use a visual tool to create the query. In this simple example, it's easy enough to simply type in the required SQL. Enter the following text into the text box, so that the page looks like Figure 6:
SELECT CategoryID, SupplierID, ProductID, ProductName, UnitPrice, UnitsInStock FROM Products
Figure 6 Enter a SQL expression to be used by the DataAdapter.
Click Next to proceed to the final page. Then click Finish to complete the process. Notice that OleDbConnection and OleDbDataAdapter objects named OleDbConnection1 and OleDbDataAdapter1 appear in the tray area of the form.
Select OleDbConnection1 and, in the Properties window, set the Name property to cnNorthwind.
Select OleDbDataAdapter1 and, in the Properties window, set the Name property to daProducts.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
At this point, the cnNorthwind object contains information about how to access the selected database. The daProducts object contains a query defining the tables and columns in the database that you want to access. You'll use both those objects in order to retrieve the data you need.
TIP
If you'd rather use the slightly more efficient SqlClient namespace objects, you can follow the same steps listed here, using the SqlConnection and SqlDataAdapter objects. The steps are identical, although you may need to modify the code later on in order to complete the article.
Retrieving Data
You can't bind controls to a DataAdapter object because a DataAdapter object doesn't contain any data—you need a DataSet to bind data to controls. At this point, you have two choices: You can have Visual Studio .NET generate a typed DataSet for you, or you can write code to create a standard DataSet yourself. For the purposes of this article, it doesn't matter which technique you choose—the code you have to write is similar in either case. If you're going to interact programmatically with the DataSet or want the extra functionality provided by the typed DataSet, you might go that route. If you simply want to get the DataGrid filled with data, you might want to create the DataSet yourself. In this section, we'll use a typed DataSet. When it comes time to bind a DropDownList control, you'll write all the code yourself—that is, bind to data without using the design-time components provided by Visual Studio .NET.
Using a Typed DataSet
In order to generate the typed DataSet, follow these steps:
Select Data, Generate DataSet to display the Generate DataSet dialog box.
Select the New radio button. Next to the New radio button, enter dsProducts as the name for your DataSet, as shown in Figure 7.
Figure 7 The Generate DataSet dialog box allows you to specify the name for the DataSet you're generating.
Click OK to dismiss the dialog box and generate the DataSet schema definition and class files.
After this step completes, you will see a new component, DsProducts1, in the tray area for the page. This new component represents the schema definition file, dsProducts.xsd, that Visual Studio .NET added to your project. This file contains the complete definition for the table and columns of the SQL statement you entered earlier, described as an XML Schema Definition (or XSD) file. Visual Studio .NET also provides a code-behind file for this schema. You won't see the code-behind file unless you select Project, Show All Files.
Once you've shown all files, you can expand the dsProducts.xsd node to see the dsProducts.vb file, as shown in Figure 8. The dsProducts.vb file contains a class that "wraps up" the behavior of the DataSet, providing an object that inherits from the standard DataSet class, adding properties that map to the columns from the underlying table and methods that allow you to work with the data.
){kind=link}
){kind=link}
Figure 8 An XML Schema Definition (XSD) file has a class module that contains the code that loads the DataSet into memory.
TIP
You won't use any of the features of the typed DataSet in this article, although it's nice to know how easy it is to create the class, should you ever need the functionality.