Creating the Web Site and Page

Create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.
2. On the File menu, click New, and then click Web Site. If you are using Visual Web Developer
Express, on the File menu, click NewWeb Site.
The New Web Site dialog box appears.
3. Under Visual Studio installed templates, click ASP.NET Web Site.
4. In the Location box, select File System, and enter the name of the folder where you want to keep
the pages of your Web site.
For example, type the folder name C:\WebSites\DropDownEdit.
5. In the Language list, click the programming language you prefer to work in.
6. Click OK.
Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a Connection to an SQL Data Source

To start, you must create a connection to the computer running SQL Server where you have access to the
Northwind database.

To create a connection to SQL Server

1. In Server Explorer, right-click Data Connections, and then click Add Connection. If you are using
Visual Web Developer Express, use Database Explorer.
The Add Connection dialog box appears.
 If the Data source list does not display Microsoft SQL Server (SqlClient), click Change,
and in the Change Data Source dialog box, select Microsoft SQL Server.
 If the Choose Data Source page appears, in the Data source list, select the type of data
source you will use. For this walkthrough, the data source type is Microsoft SQL Server. In the
Data provider list, click .NET Framework Data Provider for SQL Server, and then click
Continue.
2. In the Add Connection box, enter your server name in the Server Name box.
3. For the Log on to the server section, select the option that is appropriate to access the running
SQL Server database (integrated security or specific ID and password) and, if required, enter a user
name and password.
4. Select the Save my Password check box.
5. Under Select or enter a database name, enter Northwind.
6. Click Test Connection, and when you are sure that it works, click OK.
Your new connection has been created under Data Connections in Server Explorer.

Configuring a GridView Control to Display Database Data

In this part of the walkthrough, you dynamically populate the grid with data.

To enable simple sorting

1. Switch to or open the Default.aspx file
2. Switch to Design view.
3. In the Toolbox, from the Data group, drag a GridView control onto the page.
4. On the GridView Tasks menu, in the ChooseData Source box, click <New data source>.
The Data Source Configuration wizard appears.
5. Click Database.
This specifies that you want to get data from a database that supports SQL statements, which
includes SQL Server and other OLE-DB–compatible databases.
 6. In the Specify an ID for the data source box, a default data source control name,
SqlDataSource1, is displayed. You can leave this name.
7. Click OK.
The Configure Data Source wizard is displayed.
8. In the Which data connection should your application use to connect to the database? box,
enter the connection that you created in "To create a connection to SQL Server," and then click
Next.
The wizard displays a page in which you can choose to store the connection string in a configuration
file. Storing the connection string in the configuration file has two advantages:
 It is more secure than storing it in the page.
 You can use the same connection string in multiple pages.
9. Select the Yes, save this connection as check box, and then click Next.
The wizard displays a page in which you can specify what data you want to retrieve from the
database.
10. Under Specify columns from a table or view, in the Name box, click Employees.
11. Under Columns, select the EmployeeId, LastName, FirstName, HireDate, and City check
boxes.
The wizard displays the SQL statement that you are creating in a box at the bottom of the page.
12. Click Advanced, select the Generate INSERT, UPDATE, and DELETE statements check box,
and then click OK.
This generates Insert, Update, and Delete statements for the SqlDataSource1 control based on the
Select statement that you configured earlier.
13. Click Next.
14. Click Test Query to be sure that you are retrieving the data you want.
15. Click Finish.
16. Right-click the GridView control and select Show Smart Tag. From the GridView Tasks menu,
select the Enable Editing box.

You can now test the page.

To test the page

1. Press CTRL+F5 to run the page.
The GridView control is displayed with EmployeeId, LastName, FirstName, HireDate, and City
columns.
2. Click the Edit link next to a row.
The row selected for editing is displayed with LastName, FirstName, HireDate, and City columns
as an editable text box. EmployeeId is not displayed in a text box, because it is a key field and not
editable.
3. Change a field such as LastName and click Update.
The GridView control is displayed with EmployeeId, LastName, FirstName, HireDate, and City
columns, with LastName updated with the new value.
4. Close the browser.

Displaying a Drop-Down List While Editing in the GridView Control

In this part of the walkthrough, you can add a drop-down list to select from while editing the rows in the
grid.

To display a drop-down list while editing

1. From the Data node of the Toolbox, drag a SqlDataSource control onto the page.
A new data source control named SqlDataSource2 is created.
2. In the SqlDataSource Tasks menu, choose Configure Data Source.
3. In the Which data connection should your application use to connect to the database? box,
enter the connection that you created earlier.
4. Click Next.
5. On the Configure the Select Statement page, select Specify columns from a table or view,
and then in the Name box, click Employees.
6. Select only the City column, and then select the Return only Unique Rows check box. Click Next.
7. Click Test Query to preview the data, and then click Finish.
8. Right-click the GridView control and select Show Smart Tag. In the GridView Tasks menu,
select Edit Columns.
9. In the Fields dialog box, select City from the Selected fields list box.
10. Click Convert this field into a TemplateField link.
11. Click OK to close the Fields dialog box.
12. Right-click the GridView control and select Show Smart Tag. In the GridView Tasks menu,
select Edit Templates.
13. Select EditItemTemplate in the Display drop-down list.
14. Right-click the default TextBox control in the template and select Delete to remove it.
15. From the Standard tab of the Toolbox, drag a DropDownList control onto the template.
16. Right-click the DropDownList control and select Show Smart Tag. In the DropDownList Tasks
menu, select ChooseData Source.
17. Select SqlDataSource2.
18. Click OK.
19. In the DropDownList Tasks menu, choose Edit DataBindings. The SelectedValue property of the
DropDownList control is selected in the DataBindings dialog box.
20. Click the Field Binding radio button and select City for Bound To.
21. Select the Two-way databinding check box.
22. Click OK.
23. Right-click the GridView control and select Show Smart Tag. In the GridView Tasks menu, click
End Template Editing.