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

08/18/2008

本文内容

更新：2007 年 11 月

GridView 控件默认显示用于编辑的文本框。可以使用 ASP.NET GridView 控件的内置高级功能向编辑显示添加下拉列表。此操作可在 Web 窗体中完成，而无需编写任何窗体隐藏代码。本演练阐释以下任务：

配置 GridView 控件显示 SQL 数据。

在 GridView 控件中显示数据。

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

先决条件

若要完成本演练，您需要：

Microsoft Visual Web Developer (Visual Studio)。

SQL Server Express Edition。如果已经安装了 SQL Server，则可以改用 SQL Server，但必须对某些过程进行小的调整。

计算机上安装的 Northwind 示例数据库。有关如何下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见 Microsoft SQL Server 网站上的安装示例数据库。

说明：

可以使用多种方法连接到 Northwind 数据库。

创建网站和网页

按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

打开 Visual Web Developer。

在“文件”菜单上单击“新建”，然后单击“网站”。如果您使用的是 Visual Web Developer 速成版，则在“文件”菜单上单击“新建网站”。

“新建网站”对话框随即出现。

在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

在“位置”框中选择“文件系统”，然后输入要保存网站网页的文件夹的名称。

例如，键入文件夹名“C:\WebSites\DropDownEdit”。

在“语言”列表中，单击您想使用的编程语言。

单击“确定”。

Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

创建与 SQL 数据源的连接

首先必须创建一个与 Northwind 数据库的连接。

创建与 SQL Server 的连接

在服务器资源管理器中，右击“数据连接”，然后单击“添加连接”。如果使用的是 Visual Web Developer 速成版，请使用数据库资源管理器。

即出现“添加连接”对话框。

如果“数据源”列表未显示“Microsoft SQL Server 数据库文件(SqlClient)”，请单击“更改”，然后在“更改数据源”对话框中选择“Microsoft SQL Server 数据库文件(SqlClient)”。

如果出现“选择数据源”页，则请在“数据源”列表中选择要使用的数据源类型。在本演练中，数据源的类型为“Microsoft SQL Server”。在“数据提供程序”列表中，单击“用于 SQL Server 的 .NET Framework 数据提供程序”，然后单击“继续”。

说明：

如果“服务器资源管理器”选项卡在 Visual Web Developer 中不可见，则在“视图”菜单上单击“服务器资源管理器”。如果“数据库资源管理器”选项卡不可见，则在“查看”菜单中单击“数据库资源管理器”。

在“数据库文件名”字段中输入或浏览至示例数据库 Northwind 的安装位置。

选择数据库文件 Northwnd.mdf 并单击“打开”。

选择“保存密码”复选框。

单击“测试连接”，并在确定该连接生效后单击“确定”。

新连接已在服务器资源管理器中的“数据连接”下创建。

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

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

启用简单排序

切换到或打开 Default.aspx 文件

切换到“设计”视图。

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

在“GridView 任务”菜单上的“选择数据源”框中，单击“”。

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

单击“数据库”。

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

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

单击“确定”。

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

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

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

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

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

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

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

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

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

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

说明：

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

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

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

说明：

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

单击“下一步”。

单击“测试查询”确保要检索的正是所需的数据。

单击“完成”。

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

现在可以测试该页。

测试页面

按 Ctrl+F5 运行该页。

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

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

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

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

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

关闭浏览器。

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

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

编辑时显示下拉列表

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

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

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

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

单击“下一步”。

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

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

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

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

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

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

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

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

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

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

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

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

选择“SqlDataSource2”。

单击“确定”。

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

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

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

单击“确定”。

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

安全说明：

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

现在可以测试该页。

测试页面

按 Ctrl+F5 运行该页。

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

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

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

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

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

后续步骤

尽管本演练演示了如何显示用绑定到控件的列中的值填充的下拉列表，但还有很多种替代方法来填充下拉列表。请参见用于 DataItem 的示例以查看如何使用其他表中的值填充下拉列表。

请参见

任务

参考