Bind to Data Visually in ASP.NET
Instead of digging deep into the code-behind class to build data-bound ASP.NET pages, do almost everything visually.
by Jonathan Goodyear

March 2003 Issue

Technology Toolbox: VB.NET, C#, ASP.NET

Most tutorials about data binding in ASP.NET require you to build lots of code in the code-behind class. This method gives you ultimate control over the way you retrieve and display your data, but you can accomplish quite a bit using a purely visual approach in Visual Studio .NET. This article walks you through a visual data binding exercise. It's not meant to be an exhaustive tutorial on visual data binding in VS.NET, but it will definitely get you started on the right track.

To start off, create a new ASP.NET Web application. It doesn't matter whether you write it in C# or Visual Basic .NET. Drag a OleDbDataAdapter control from the Data section of the toolbox onto the design surface of the default Web form that is created with the project. Click on the Next button when the Data Adapter Configuration wizard appears.

Figure 1. Set Your Data Link Properties.

You can select from a data connection that has been created already, but for now, select the New Connection button. A standard Universal Data Link (UDL) wizard is displayed. Fill in the proper server and connection credentials to connect to the Pubs database (see Figure 1) and click on OK. If you select the "Allow saving password" checkbox, you get a warning message stating that your password won't be encrypted. Don't worry about that for the purposes of this exercise. Click on Next to proceed.

Figure 2. Build Your Query.

Next, you need to choose how you'll retrieve data from your data source (the Pubs database, in this case). You can use a SQL statement, create a new stored procedure, or select from an existing stored procedure. For this exercise, choose the SQL statement option and click on Next. You're presented with a textbox in which to type your SQL query. A Query Builder button launches a Query By Example (QBE) wizard to help you build your query. Click on the Query Builder button and enter a query to select the first and last names of the authors in the authors table (see Figure 2). Click on OK on the Query Builder window. The query that you just built should now be displayed in the query box.

Click on the Advanced Options button. Deselect the top checkbox labeled "Generate Insert, Update, and Delete statements." Your author list isn't editable, so these objects are not necessary. The second and third checkboxes are grayed out. Click on the OK button, followed by the Next button in the wizard. You'll see a summary page for the Data Adapter Configuration wizard, outlining everything it's done for you. Click on the Finish button to return to the design surface of your Web form.

Figure 3. Generate a Typed DataSet.

Next, you create a typed DataSet class into which you load your author data. A typed DataSet class is similar to a regular DataSet class, except its interface is tailored to hold data that meets a specific schema. This allows its fields to be strongly typed, instead of based on the loosely defined object data type. Visual Studio .NET makes this step easy as well. Select the oleDbDataAdapter1 control in the server control tray at the bottom of your Web form's design surface. Open up the Properties window for your Web form if it isn't displayed already. You'll see a series of links at the bottom of the Properties window. Click on the Generate DataSet link. You're prompted for a DataSet class name, as well as the table(s) to add to the data set. Name it <strong>dsAuthor</strong> and leave the other options untouched (see Figure 3). Click on OK. You've now added a typed DataSet class to the server control tray of your Web form. Its corresponding schema definition file, dsAuthor.xsd, has also been added to the Visual Studio .NET Solution Explorer.

Figure 4. See Bound Data.

You need to display the results now that you have the data retrieval process figured out. Drag a DataGrid server control from the Web Forms section of the toolbox onto the design surface of your Web form. Select dsAuthor1 for its DataSource property.

It's time to add some code. I know I said you were going to do things visually, but you only need to add two lines of code to the code-behind class of your Web form to glue everything together. Double-click on the design surface of your Web form to open the Page_Load event in your code-behind class and add these two lines:

oleDbDataAdapter1.Fill(dsAuthor1);
DataBind();

If you're using Visual Basic .NET, simply leave off the trailing semicolon on each line of code. The first line of code initiates the call to the database to fill your author-typed DataSet class. The second line loads the author data into the DataGrid control on the Web form.

Figure 5. Add Some Style

Now comes the fun part. Run your ASP.NET Web application. You should see a listing of the authors in the Pubs database (see Figure 4). Pretty cool, eh? It might not be much to look at now, but the DataGrid control has a complete Property Pages interface that allows you customize its look and feel (right-click on it and select Property Builder to see it). The DataGrid control also offers an Auto Format context menu option to add some style quickly to your data display—for example, the "Professional 1 Auto Format" style (see Figure 5).

For large and complex Web applications, you're really able to escape getting your hands dirty and building a lot of data-binding code by hand. It helps to know, however, that you can get pretty far by only writing two lines of code. Keep in mind, of course, that when you use all of those wizards, Visual Studio .NET actually generates dozens of lines of code for you. This code is freely available for you to look at—most of it in the "Web Form Designer generated code" section of the code-behind class of your Web form. You can learn a lot about how data binding works by analyzing the code that Visual Studio .NET produces for you. You can then apply that knowledge to the custom data-binding code that you want to implement for your own situation.