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.
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
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
Select the GridView control and select the Connect to Data source... option. You will then need to configure another data source to display the author's information (see Figure 10).
Figure 10. Creating a new DataSource control
Repeat the same procedure as shown previously. When you reach the step where you need to input the SQL statements, click on the Edit Query... option within the To Retrieve Data group (see Figure 11).
Figure 11. Inputting the SQL statements
Enter the following command:
SELECT authors.* FROM authors WHERE (authors.state = ?)
Click on the Infer Parameters button and set the Properties as follows:ControlID: DropDownList1
Basically, this means that the
? is a parameter whose value is to be inferred from the selected value in the DropDownList control (see Figure 12).
Figure 12. Using the Query Editor to create the inferred parameter
Click on OK and continue until the following is encountered (see Figure 13):
Figure 13. Configuring the GridView control
Check on all of the checkboxes so that you can display rows in multiple pages, sort rows according to columns, edit, delete, and select rows.
To illustrate paging, let's set the
PagerSize property of the GridView control to 4, and set the
Mode property (within the
PagerSettings property) to
NumericFirstLast (see Figure 14). You will see the effects later on when the application is run.
Figure 14. Setting the GridView control properties
Lastly, set the
DataKeyNames property of the GridView control to
au_id (see Figure 15).
Figure 15. Setting the GridView control's
To test the GridView control, simply run the application (you can click on Auto Format... to change the layout of the GridView control). You should see something like Figure 16:
Figure 16. Testing the GridView control
Notice that the Edit, Delete, and Select links are automatically displayed. Click on Edit and you should see the following (see Figure 17):
Figure 17. Editing a record
The Update and Cancel buttons will automatically be displayed. But wait a minute -- we have not written any code to instruct the GridView control to update the rows for us. To do so, you need to configure the data source (as shown in Figure 11) with the following SQL statements:
UPDATE authors SET au_lname = ?, au_fname = ?, phone = ?, address = ?, city = ?, state = ?, zip = ?, contract = ? WHERE authors.au_id = ?
For the Delete link, you would likewise input an SQL statement to delete a record.
You can also click on the header of each column and the rows will be sorted in ascending (or alphabetical) order based on the column selected.
Realize that so far, we have not written a single line of code! No more messy HTML code to modify and all of the common functionality expected of the DataGrid control can be found in the GridView control.
Besides the GridView control, there is another new control that is similar but presents a slightly different view. Instead of displaying multiple records on one page, the DetailsView control displays one record at a time. The steps to configure a DetailsView control are almost identical to those of the GridView control. Hence, if I use the DetailsView control for the above example, I should see the following (see Figure 18).
Figure 18. Viewing records using the DetailsView control
The new GridView and DetailsView controls are two controls that will greatly simplify the way you display structured data. As you will discover in the coming months, developing web applications using ASP.NET Whidbey will be much more efficient. You will have more time to spend on coding your application logic, rather that wasting time on common UI functionality.
Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.
Return to ONDotnet.com
Copyright © 2009 O'Reilly Media, Inc.