Adding a GridView Control
Almost every control in VWD can be bound to one of three types of data sources:
SQLDataSource, XMLDataSource, or an ObjectDataSource. VWD manages the binding of the data source to the control with the new BindingSource control. In previous versions of Visual Studio the databinding process was not nearly as easy and required a lot more manual programming.
In this chapter you will learn how to bind a new GridView control with a SQLDataSource
object. The GridView control replaces the DataGrid control.
Before you can use a SQL data source you need to add a data connection to the database that will be used by it. In this case, this is the pubs database that you
installed earlier.
1. Select the View | Database Explorer menu command, or click
CTRL+ALT+S. In the Database Explorer window right-click
Data Connections and select Add Connection.
2. In the Choose Data Source dialog select Microsoft
SQL Server and then click Continue.
3. In the Add Connection dialog, for Server name
enter "machine-name\sqlexpress", changing "machine-name" to your machine's name
(or use "localhost"). Click the Select or enter a database name
dropdown menu, and then select pubs. Click OK.
4. In the Database Explorer window expand the new data connection
node to view the database tables. Click and drag the authors table
onto the design surface, placing it below the Label:
After you drag the table on the design surface, GridView and SqlDataSource controls
are automatically
added to the page. VWD examines the table's schema and adds columns to the
GridView that correspond to the table's columns.
5. If the GridView Tasks menu is open, click anywhere off the menu
to close it. You will learn more about this menu momentarily. First you want to
give the SqlDataSource control a more descriptive ID. Below the
GridView control select the SqlDataSource control
and select View | Properties or press F4 to access its properties. Change the (ID)
property to "authorsSqlDataSource". Press CTRL+S to save
the changes.
6. In the upper right corner of the GridView control, click the small arrow to open its smart tag menu. Click Auto Format and select a color scheme of your
choice, then click OK.
The GridView control has several features that you would
expect with any sophisticated grid control. These features can be
easily accessed from the GridView Tasks
smart tag menu. Expect to have a smart tag menu on most if not all controls. The tasks are tailored for each type of control. From now on in this tour this menu
will be referred to as the "[Control Type] Tasks" menu. To close this menu you
must click anywhere off its associated control or press ESC.
The menu needs to be closed for some VWD functionality
to work properly (e.g., pressing F4 or F5).
You changed the SqlDataSource ID so you must reset it in the GridView control.
7. For Choose Data Source select authorsSqlDataSource.
When prompted to refresh Fields and Keys click No.
8. Click anywhere off the GridView, then reselect it. In
the Properties window set the (ID)
property to "authorsGridView".
9. Press
F5 to run the application.
When the page loads you see that the data from the authors table is automatically
displayed in the GridView control.
10. Close the browser. Open the GridView Tasks menu and check
Enable Paging,
Enable Sorting and Enable Editing.
11. Press F5 to run the application. You can see that the GridView
now has these features enabled. Try sorting a column by clicking one of column header
links.
Without writing any code, you have just built a
sophisticated Web page that allows editing information in the authors table.
12. Close the browser .