he DataGrid control is one of the most powerful controls in ASP.NET 1.x. It’s highly customizable and most Web developers are familiar with it. However, although the DataGrid control is still supported in ASP.NET 2.0, it requires too much work for mundane tasks such as sorting the rows based on columns, editing or deleting rows, etc.

Figure 1. The Controls: The GridView and DetailsView controls under the Data tab in the Toolbox.

In this latest release of ASP.NET, the GridView control further enhances the flexibility of the previous DataGrid control. This article shows how to use the GridView control and demonstrates how it reduces the amount of code you need to write. In fact, for the examples in this article, there is no code to write! You will also learn a bit about GridView’s companion control, DetailsView.

Figure 1 shows the GridView and DetailsView controls found under the Data tab in the Toolbox.

Figure 2. The SqlDataSource Control: Click on the Configure Data Source… link to configure the SqlDataSource control.

Configuring the SqlDataSource Control
Create a Web application using Visual Studio 2005 Beta 1. In the default page, drag-and-drop the SqlDataSource control (also found under the Data tab in Toolbox). Using this control declaratively establishes a connection to a SQL data source?without writing any code. In the days of ASP.NET 1.x, you needed to write elaborate code to access data sources using ADO.NET. Now, you have controls that encapsulate all the logic needed to access a data source.

To configure the SqlDataSource control to connect to a SQL Server 2000 database, click on the Configure Data Source… link in the Smart Tag (see Figure 2).

Click on the New… button to establish a new data connection.

In my case, the database service is installed locally. So I specify “(local)” for the server name and use Windows NT Integrated Security to access the database (dependent on the mode you set on your SQL Server). Select the Northwind database (see Figure 3). Click on Test Connection to verify that the connection is working. Click OK when done.

Figure 3. Specify the Database Properties: Select the Northwind database to specify the database properties.

?

Figure 4. View the Connection Details: After specifying the database properties, you should see the data connection details.

You should see the data connection details (see Figure 4). Click Next to proceed.

You have the option to save the connection string to the web.config file. If you do so, every time you need the connection string you can simply reference the connection string stored in web.config. In this example case, name the connection as NorthWindConn.

If you examine your web.config now, you will see the added element:

Figure 5. Construct the SQL Statements: Specify the column that you want to retrieve construct the SQL statements.

                ......

Click on Next.

In the next step, specify the column that you want to retrieve (see Figure 5). Click on Next when you’re done.

You can now test the SQL query that you have created in the previous step. Click on the Test Query button to execute the SQL query (see Figure 6). When done, click Finish.

Your SqlDataSource control is now configured. Switch to Source view to see the source of the SqlDataSource control. Note how the control references the connection string using the “<%$ %&gt" directive:

Figure 6. Test the Query: Click on the Test Query button to execute the SQL query.

Configuring the GridView Control
Having configured the SqlDataSource control, you can now drag-and-drop the GridView control to the page. In the Smart Tag, select SqlDataSource1 in the Choose Data Source dropdown list to bind the SqlDataSource control with the GridView control.

You should also check the Enable Paging, Enable Sorting, and Enable Selection checkboxes (see Figure 7). Figure 7 shows how the GridView control looks after applying the Sand & Sky auto-format.

Figure 7. Configuring the GridView Control: This is how the GridView control looks after applying the Sand & Sky auto-format.

?

Figure 8. Testing the GridView Control: Press F5 to load the page using the Web browser.

Press F5 to load the page using the Web browser and you should see something similar to Figure 8.

Editing and Deleting Rows in the GridView Control
To make the data editable, switch to Source view and add two new attributes: UpdateCommand and DeleteCommand:

Figure 9. Editing a Row: After pressing F5, you’ll be able to make changes to the rows in the GridView control.

The UpdateCommand and DeleteCommand attributes specify the SQL statements that execute when you perform an update or delete operation.

After adding the two attributes, the Smart Tag for the GridView control gains two additional checkboxes?Enable Editing and Enable Deleting. Check the two additional options.

Press F5 to test the page again. This time you will be able to make changes to the rows in the GridView control (see Figure 9).

Figure 10. Using the DetailsView Control: Bind the control to SqlDataSource1 and check all the checkboxes.

The DetailsView Control
The DetailsView control is similar to the GridView control with one notable exception?it displays one record at a time. To see how the DetailsView control works, drag-and-drop a DetailsView control onto the page. Bind it to SqlDataSource1 and check all the checkboxes shown in Figure 10.

Press F5 to load the page. You will be able to browse through all the records as well as edit or delete them.

Inserting a New Record
You’ve seen how to display, edit, and delete records using the GridView and DetailsView controls. While the Beta 1 version of GridView control doesn’t support adding records, the DetailsView control does. To let users add new records, simply modify the source view of the SqlDataSource control by adding the InsertCommand attribute:

Figure 11. Add a New Record: Add a new record by clicking on the New link on the DetailsView control.

When this is done, the DetailsView control’s Smart Tag will display the Enable Inserting checkbox. Check that checkbox to allow users to add a new record.

Add a new record by clicking on the New link on the DetailsView control (see Figure 11).

Codeless Controls
Using the new GridView and DetailsView controls in ASP.NET 2.0 have not required you to write a single line of code. You simply configure the controls declaratively, and the controls perform most of the work for you.