email article printer friendly get the code more resources

Implement Advanced GridView Techniques
ASP.NET 2.0 lets you implement zero-code solutions for some common scenarios. But when you need to go beyond the basics, you'll need to write your own code—and know what you're doing.
by Peter Vogel

December 20, 2005

Technology Toolbox: ASP.NET, Visual Basic

One of Microsoft's goals with ASP.NET 2.0 is to enable developers to implement common scenarios without writing code. For instance, a master/detail page that lists the Customers in the Northwind database and the Orders for a selected customer is a zero-code solution in ASP.NET 2.0: You only have to interact with the smart tags and wizards for two sets of SqlDataSource and GridView controls. This is great—if all you want to do is display some records and let the user change them (see Figure 1).

The zero-code solution ties tables together using the primary key of the master table. However, even that will work only if the master table has a single field as its primary key. If you want to handle multiple fields or link tables together using something other than the primary key, you're going to have to write some code—and know what you're doing. You also need to step in if you want to control when updates are done, handle errors in updates, or simply display the master records on a separate page from the details record. I'll provide a quick review of the zero-code solution, then show you how to implement all of these scenarios (download the sample code here).

You can implement a master/detail page while taking advantage of ASP.NET 2.0 and Visual Studio 2005 simply by dragging drag two tables (such as the Northwind Customers and Orders tables) from Server Explorer onto the same page. Visual Studio 2005 adds two SqlDataSource and GridView controls to the page to retrieve the data and display it. Join the tables by working through the Orders table's SqlDataSource wizard until you get to the page that sets the Where clause. This page lets you tie the CustomerId field in the Orders table to the current record in the Customers GridView. Allow your user to perform updates by checking options on the GridViews' smart tags to enable updating, inserting, and deleting. Enable Selection on the Customers GridView so the customer can click on a row to specify which Orders to display.

Roughly the same process works if you use ObjectDataSource to display a list of Customer and Order objects. The major difference is that instead of dragging a table to the page, you use the ObjectDataSource Wizard to specify the methods on the objects that produce Customer or Order objects. (Learn more about ObjectDataSource in my October 2005 ASP.NET column, "Leverage Databinding With Less Code"; see Additional Resources.)

Control the Data
Out of all the columns in the Customers GridView, you might wonder how the Orders SqlDataSource selects the correct field to control the Orders GridView. It's not magic: The Orders GridView uses the value in the Customers GridView's SelectedValue property. When a GridView is bound to a SqlDataSource, the GridView's SelectedValue property defaults to the table's primary key. For the Customers table, the SelectedValue defaults to the CustomerId that you need in order to retrieve related Orders records. The process is more obvious if you use an ObjectDataSource to retrieve the data for your GridView, because the SelectedValue property doesn't default to any value. Instead, you must use the DataKeyNames property to specify the property to be returned by SelectedValue (see Figure 2).

You can use the DataKeyNames property to control the field used with SqlDataSource when the default settings for SelectedValue aren't appropriate. You need the SelectedValue property to return the customer's Region rather than the CustomerId if, for instance, you want to display a list of the Suppliers in the customer's area. You can have the SelectedValue property return the Region from the selected row by setting the DataKeyNames property for the GridView to Region.

As DataKeyNames' name implies, you can specify multiple fields; each field name must be followed by a comma. This is useful when you need to pass more than a single value to the GridView with the detail records. Your list of suppliers, for instance, will be more useful if you show only suppliers that are in both the same city and the same region as the selected customer. Unfortunately, the SelectedValue property returns only the value of the first field in DataKeyNames' list.