演练：在 GridView Web 服务器控件中编辑时显示下拉列表

GridView 控件默认显示用于编辑的文本框。可以使用 ASP.NET GridView 控件的内置高级功能向编辑显示添加下拉列表。本演练中阐释的任务包括：

• 配置 GridView 控件显示 SQL 数据。

• 在 GridView 控件中显示数据。

• 在 GridView 控件中编辑时显示下拉列表。

 

 

 配置 GridView 控件显示数据库数据

在这部分演练中，将以数据动态填充网格。

启用简单排序

1. 切换到或打开 Default.aspx 文件

2. 切换到“设计”视图。

3. 在“工具箱”中，从“数据”组中将“GridView”控件拖到页上。

4. 在“GridView 任务”菜单上的“选择数据源”框中，单击“<新建数据源>”。

   出现“数据源配置”向导。

5. 单击“数据库”。

   这指定您希望从支持 SQL 语句的数据库（包括 SQL Server 和其他 OLE-DB 兼容的数据库）获取数据。

6. 在“为数据源指定 ID”框中，将显示默认的数据源控件名称“SqlDataSource1”。可以保留此名称。

7. 单击“确定”。

   “配置数据源”向导显示。

8. 在“应用程序连接数据库应使用哪个数据连接?”框中输入在“创建到 SQL Server 的连接”中创建的连接，然后单击“下一步”。

   该向导显示一页，在该页中可以选择将连接字符串存储在配置文件中。将连接字符串存储在配置文件中有两个优点：

   • 比将它存储在页中更安全。

   • 可以在多个页中使用同一连接字符串。

9. 选择“是，将此连接另存为”复选框，然后单击“下一步”。

   该向导显示一页，在该页中可以指定要从数据库中获取的数据。

10. 在“指定来自表或视图的列”下的“名称”框中单击“Employees”。

11. 在“列”下选择“EmployeeId”、“LastName”、“FirstName”、“HireDate”和“City”复选框。

    向导在页面底部的框中显示所创建的 SQL 语句。

    注意

    向导允许指定选择条件（WHERE 子句）和其他 SQL 查询选项。对于本演练，将创建一个不带有选择或排序选项的简单语句。

12. 单击“高级”，选择“生成 INSERT、UPDATE 和 DELETE 语句”复选框，然后单击“确定”。

    这将在之前配置的 Select 语句基础上为“SqlDataSource1”控件生成 Insert、Update 和 Delete 语句。

    注意

    或者，可以通过选择“指定自定义 SQL 语句或存储过程”并输入 SQL 查询来手动创建这些语句。

13. 单击“下一步”。

14. 单击“测试查询”以确保正在检索所需的数据。

15. 单击“完成”。

16. 右击“GridView”控件，然后选择“显示智能标记”。从“GridView 任务”菜单中选择“启用编辑”框。

现在可以测试该页。

对页进行测试

1. 按 Ctrl+F5 运行该页。

   GridView 控件显示，其中带有“EmployeeId”、“LastName”、“FirstName”、“HireDate”和“City”列。

2. 单击行旁边的“编辑”链接。

   显示选定用于编辑的行，其中带有作为可编辑文本框的“LastName”、“FirstName”、“HireDate”和“City”列。“EmployeeId”未显示在文本框中，原因是它是一个键字段并且不可编辑。

3. 更改字段，如“LastName”，然后单击“更新”。

   GridView 控件显示，其中带有“EmployeeId”、“LastName”、“FirstName”、“HireDate”和“City”列，“LastName”以新值更新。

4. 关闭浏览器。

 

 在 GridView 控件中编辑时显示下拉列表

在本部分演练中，可以在编辑网格中的行时添加可从中选择的下拉列表。

编辑时显示下拉列表

1. 从“工具箱”的“数据”组中，将 SqlDataSource 控件拖到该页上。

   即会创建一个名为“SqlDataSource2”的新数据源控件。

2. 在“SqlDataSource 任务”菜单中选择“配置数据源”。

3. 在“应用程序连接数据库应使用哪个数据连接?”框中输入之前创建的连接。

4. 单击“下一步”。

5. 在“配置 Select 语句”页中选择“指定来自表或视图的列”，然后在“名称”框中单击“Employees”。

6. 仅选择“City”列，然后选择“只返回唯一行”复选框。单击“下一步”。

7. 单击“测试查询”预览数据，然后单击“完成”。

8. 右击“GridView”控件，然后选择“显示智能标记”。在“GridView 任务”菜单中选择“编辑列”。

9. 在“字段”对话框中，从“选定的字段”列表框中选择“City”。

10. 单击“将此字段转换为 TemplateField”链接。

11. 单击“确定”关闭“字段”对话框。

12. 右击“GridView”控件，然后选择“显示智能标记”。在“GridView 任务”菜单中选择“编辑模板”。

13. 在“显示”下拉列表中选择“EditItemTemplate”。

14. 在模板中右击默认 TextBox 控件，然后选择“删除”将其移除。

15. 从“工具箱”的“标准”选项卡中，将一个“DropDownList”控件拖到该模板上。

16. 右击“DropDownList”控件，然后选择“显示智能标记”。在“DropDownList 任务”菜单中选择“选择数据源”。

17. 选择“SqlDataSource2”。

18. 单击“确定”。

19. 在“DropDownList 任务”菜单中选择“编辑 DataBindings”。DropDownList 控件的 SelectedValue 属性在“DataBindings”对话框中选定。

20. 单击“字段绑定”单选按钮，并为“绑定到”选择“City”。

21. 选择“双向数据绑定”复选框。

22. 单击“确定”。

23. 右击“GridView”控件，然后选择“显示智能标记”。在“GridView 任务”菜单中单击“结束模板编辑”。

    安全注意

    ASP.NET 网页中的用户输入可能包括潜在有害的客户端脚本。默认情况下，ASP.NET 网页会验证用户输入，以确保输入不包括脚本或 HTML 元素。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。

现在可以测试该页。

对页进行测试

1. 按 Ctrl+F5 运行该页。

   GridView 控件显示，其中带有“EmployeeId”、“LastName”、“FirstName”、“HireDate”和“City”列。

2. 单击行旁边的“编辑”链接。

   当前“City”值在下拉列表中已预选择。

   从下拉列表中选择不同的“City”值，然后单击“更新”。

   “City”字段使用在下拉列表中选择的值更新。