The Gridview Control Displays Text Boxes for Editing by Default

The Gridview Control Displays Text Boxes for Editing by Default

The GridView control displays text boxes for editing by default. You can use the ASP.NET GridView control's built-in advanced functionality to add a drop-down list to the editing display. Tasks illustrated in this walkthrough include:

  • Configuring a GridView control to display SQL data.
  • Displaying data in the GridView control.
  • Displaying a drop-down list while editing in the GridView control.

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.

  1. Under Visual Studio installed templates, click ASP.NET Web Site.
  2. 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.

  1. In the Language list, click the programming language you prefer to work in.
  2. 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.

Note
If the Server Explorer tab is not visible in Visual Web Developer, in the View menu, click Server Explorer. If the Database Explorer tab is not visible, in the View menu, click Database Explorer.
  1. In the Add Connection box, enter your server name in the Server Name box.
  2. 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.
  3. Select the Save my Password check box.
  4. Under Select or enter a database name, enter Northwind.
  5. 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.

  1. 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.

  1. In the Specify an ID for the data source box, a default data source control name, SqlDataSource1, is displayed. You can leave this name.
  2. Click OK.

The Configure Data Source wizard is displayed.

  1. 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.
  1. 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.

  1. Under Specify columns from a table or view, in the Name box, click Employees.
  2. 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.

Note
The wizard allows you to specify selection criteria (WHERE clauses) and other SQL query options. For this walkthrough, you will create a simple statement with no selection or sort options.
  1. 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.

Note
Alternatively, you could manually create the statements by selecting Specify a custom SQL statement or stored procedure and entering SQL queries.
  1. Click Next.
  2. Click Test Query to be sure that you are retrieving the data you want.
  3. Click Finish.
  4. 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.

  1. 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.

  1. 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.

  1. 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.

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

Security Note
User input in an ASP.NET Web page can include potentially malicious client script. By default, ASP.NET Web pages validate user input to make sure input does not include script or HTML elements. As long as this validation is enabled, you do not need to explicitly check for script or HTML elements in user input. For more information, see Script Exploits Overview.

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.

  1. Click the Edit link next to a row.

The current City value is preselected in the drop-down list.

Select a different City value from the drop-down list and click Update.

The City field is updated using the value selected in the drop down list.

12-Displaying DropDown List + GridView.doc10/20/2018 12:51:29 PMPage: 1 of 3

Top View