AddThis Social Bookmark Button

Print

New Data Controls in ASP.NET Whidbey

by Wei-Meng Lee, author of Windows XP Unwired
01/12/2004

One of the design goals of the next release of ASP.NET, codenamed ASP.NET Whidbey, is to reduce the amount of code you write for common tasks such as data access. One particular enhancement that is really exciting is the addition of a few data controls. In this article, I will discuss two particular new controls that drastically reduce the amount of code you typically need to write in ASP.NET. These two controls are the GridView and DetailsView controls.

Locating the Two Controls

The two new data controls I will discuss in this article can be found in the Toolbox window under the Data group (see Figure 1).


Figure 1. The GridView and DetailsView controls

GridView Control

The first new control we will discuss in this article is the GridView control. Those of you who have done serious ASP.NET programming will have no doubt used the DataGrid control. The DataGrid control is a very powerful and flexible control for displaying structure data from a data source such as a database. However, when it comes to manipulating the content of a DataGrid control, such as editing the rows or simply sorting the columns of a table, you need to write a moderate amount of code to customize it.

This is where the GridView control comes in handy. Instead of requiring you to write code to perform some common functions such as editing and displaying rows in multiple pages, the GridView control replaces the DataGrid control and comes with a wizard that takes care of all of these functions without you needing to modify any messy HTML code.

To see how the GridView control works, let me guide you in the following sample web application.

First, create a new Website project and in the default web form, drag and drop a DropDownList control. Select the DropDownList control and click on Connect to DataSource.... (see Figure 2).


Figure 2. Configuring the DropDownList control

In the Chooose a DataSource dropdown list, select <New DataSource> and select SqlDataSource control type to connect to a SQL server. The default SqlDataSource1 control name is suggested. Click on Create...(see Figure 3) to create the new data source.


Figure 3. Configuring a data source

Select a data connection to connect to your SQL server. In this alpha release of ASP.NET Whidbey, the OLEDB provider will be used instead (see Figure 4), even though you have selected a SQL data source in the previous window. For this example, I will use the pubs database that ships with SQL Server 2000. Click Next to continue.


Figure 4. Choosing a data connection

Next you will input the SQL statements to perform the required manipulations on the data. For this current DropDownList control, I want to list out all of the different states that the authors come from. Hence, I selected the authors table from the pubs database (see Figure 5). You can also click on Edit Query to let the Query Editor help you formulate the SQL statement. Click on Next.


Figure 5. Inputting the SQL statements

You will then be asked if you want to retrieve the schema for the data source. Click on Finish to complete the setup of the data source (see Figure 6).


Figure 6. Retrieving the data source schema

Next, you will configure the DropDownList control. Click Next to continue (see Figure 7).


Figure 7. Adding a data source control

You will bind the state data field to the DropDownList control. The first option sets the data field to display and the second sets the data field to be used for the value of the DropDownList control. Click on Finish to complete the setup of the DropDownList control (see Figure 8).


Figure 8. Finalizing the setup of the DropDownList control

Now, when you run the web application, it will display a list of states that all the authors come from.

In my next step, I want to add a GridView control to my web form so that when a state is selected from the DropDownList control, all of the authors that come from that selected state will be displayed.

First, set the AutoPostBack property of the DropDownList control to True (I want a postback to occur whenever the item in the DropDownList control is changed, so that the GridView control can display the relevant rows.) Next, I add a GridView control to my form (see Figure 9).


Figure 9. Adding a GridView control

Pages: 1, 2

Next Pagearrow