演练：使用 DetailsView 服务器控件在网页上编辑和插入数据

通过此演练，您将学会如何执行以下任务：

• 创建数据输入页。

• 使用所需的信息配置数据源控件，以便更新和插入数据库。

• 使用 DetailsView 控件查看各个记录、更改记录以及插入新记录。

• 使用 GridView 控件，以便能够从数据输入页修改数据库。

 

 

 创建网站和网页

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

创建新的文件系统网站

1. 打开 Visual Web Developer。

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

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

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

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

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

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

   您选择的编程语言将是网站的默认语言，但您可以为每个页面分别设置编程语言。

6. 单击“确定”。

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

 连接到 SQL Server

下一步是建立与 SQL Server 数据库的连接。

创建与 SQL Server 数据库的连接

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

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

   • 如果“数据源”列表没有显示“Microsoft SQL Server (SqlClient)”，则单击“更改”，并在“更改数据源”对话框中选择“Microsoft SQL Server”。

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

   注意

   如果在 Visual Web Developer 中没有显示“服务器资源管理器”选项卡，请在“视图”菜单中单击“服务器资源管理器”。如果在速成版中没有显示“数据库资源管理器”选项卡，请在“视图”菜单中单击“数据库资源管理器”。

2. 在“添加连接”框的“服务器名称”框中，输入您的服务器名称。

3. 在“登录到服务器”部分，选择适合于访问正在运行的 SQL Server 数据库的选项（集成安全性或特定 ID 和密码），如果需要，请输入用户名和密码。如果输入了密码，请选择“保存密码”复选框。

4. 在“选择或输入数据库名称”下输入“Northwind”。

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

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

 创建数据输入页

在本节中，您将创建一个数据输入页和配置一个 DetailsView 控件，以便查看存储在 Northwind 数据库的 Employees 表格中的雇员数据。若要处理此页的数据访问，将要配置 SQL 数据源控件。

创建数据输入页并配置 DetailsView 控件

1. 在“网站”菜单上单击“添加新项”。

   出现“添加新项”对话框。

2. 在“Visual Studio 已安装的模板”下单击“Web 窗体”，然后在“名称”框中键入“EditEmployees.aspx”。

3. 单击“添加”。

4. 打开 EditEmployees.aspx 页。

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

6. 键入“Edit Employees”，选择此文本，然后将文本格式化为标头。

7. 在工具箱中，从“数据”组中将“DetailsView”控件拖动到页面上。

8. 右击“DetailsView”控件，单击“属性”，然后将“AllowPaging”设置为 true。

   这将允许您在显示各个雇员项时进行分页。

下一步是创建和配置可用于查询数据库的数据源控件。有许多方法可以创建数据源控件，包括将数据元素从服务器资源管理器或数据库资源管理器拖动到页面。在本演练中，从 DetailsView 控件开始，并从此处配置数据源控件。

配置数据源控件

1. 右击“DetailsView”控件，并单击“显示智能标记”。

2. 在“DetailsView 任务”菜单的“选择数据源”框中单击“<新建数据源>”.。

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

3. 在“选择数据源类型”下单击“数据库”。

4. 保留默认名称“SqlDataSource1”，然后单击“确定”。

   “配置数据源”向导显示“选择连接”页。

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

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

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

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

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

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

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

8. 在“列”下，选中“EmployeeID”、“Lastname”、“Firstname”和“HireDate”复选框，然后单击“下一步”。

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

现在可以测试雇员记录显示页。

测试显示雇员记录

1. 按 Ctrl+F5 运行该页。

   第一条雇员记录在 DetailsView 控件中显示。

2. 单击页码链接以查看其他雇员记录。

3. 关闭浏览器。

 允许在 GridView 控件中编辑

此时，您可以查看雇员记录，但不能编辑这些记录。在本节中，您将添加一个 GridView 控件并配置此控件，以便可以编辑各个记录。

注意

GridView 控件提供一个记录列表，并允许您编辑这些记录。但不允许插入记录。在本演练的稍后部分中，将使用 DetailsView 控件，此控件允许您添加新记录。

若要支持编辑，必须配置先前使用执行更新的 SQL 语句创建的数据源控件 (SqlDataSource1)。

添加 GridView 控件以允许编辑

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

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

3. 在“GridView 任务”菜单上单击“配置数据源”。

4. 单击“下一步”以前进到向导的“配置 Select 语句”页。

5. 在“配置 Select 语句”页上单击“高级”，选中“生成 INSERT、UPDATE 和 DELETE 语句”复选框，然后单击“确定”。

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

   注意

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

6. 单击“下一步”，然后单击“完成”。

   现在已使用其他 SQL 语句配置 SqlDataSource 控件。

   注意

   您可以选择 SqlDataSource 控件并查看 DeleteQuery、InsertQuery 和 UpdateQuery 属性，以便检查由向导生成的语句。还可以切换至“源”视图并检查控件的标记，以便查看已更新的控件属性。

7. 在“GridView 任务”菜单上，选中“启用分页”和“启用编辑”复选框。

   安全注意

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

现在可以测试雇员记录的编辑。

测试在 GridView 控件中进行编辑

1. 按 Ctrl+F5 运行该页。

   “GridView”控件与文本框中的数据一起显示。

2. 在“GridView”控件中选择一行并单击“编辑”。

3. 更改记录，然后单击“更新”。

   现在，已更新的数据同时在“GridView”控件和“DetailsView”控件中显示。

4. 关闭浏览器。

 使用 DetailsView 控件以允许编辑、删除和插入

GridView 控件允许您编辑记录，但不允许您插入数据。在本节中，您将修改 DetailsView 控件，以便能够分别查看记录，还能够删除、插入和更新记录。

使用 DetailsView 控件以允许进行删除、插入和更新

1. 右击“DetailsView”控件，然后单击“显示智能标记”。

2. 在“DetailsView 任务”菜单上，选中“启用插入”、“启用编辑”和“启动删除”复选框。

   在本演练的前面部分使用 DetailsView 控件时，用于启用编辑、插入和删除的选项不可用。这是因为 DetailsView 控件所绑定到的“SqlDataSource1”控件没有必需的 SQL 语句。现在已经配置数据源以包括更新语句，所以更新选项在 DetailsView 控件上可用。

现在可以测试在 DetailsView 控件中进行删除、插入和更新。

测试在 DetailsView 控件中进行更新、插入和删除

1. 按 Ctrl+F5 运行该页。

   “DetailsView”控件显示一条雇员记录。

2. 在“DetailsView”控件中单击“编辑”。

   现在，“DetailsView”控件将数据显示在文本框中。

3. 更改记录，然后单击“更新”。

   更新的记录显示在控件中。

4. 在“DetailsView”控件中单击“新建”。

   现在，控件为每一列显示空白文本框。

5. 输入每列的值。

   Employees 表有一个自动增量的键列，所以保存记录时，“EmployeeID”的值自动赋值。

6. 完成后，单击“插入”。

   新的记录将添加为最后一条记录。

   注意

   在本演练中，在 Employees 表中插入新记录不会生成任何错误。但处理产品数据时，表格可能有约束（如外键约束），配置 DetailsView 控件时必须注意这一点。

7. 在“DetailsView”控件中使用分页，定位到最后一条记录，然后单击“删除”。

   新记录被移除。

   注意

   和插入数据相同，配置 DetailsView 控件以允许删除时必须始终注意任何应用到数据行的约束。