New Data Controls in ASP.NET Whidbey
Pages: 1, 2
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