更新：2007 年 11 月
GridView 控件在网格（HTML 表）中显示数据行，每个网格行显示一个数据行。此演练演示如何扩展 GridView 控件的功能，以便各个网格行可以显示相关数据表中的数据。在该演练中，您将在嵌套的 GridView 控件（父控件 GridView 的网格行内的 GridView 控件）中显示相关数据。
例如，嵌套的数据可以是显示客户列表的 GridView 控件，其中 GridView 控件的每一行均包括另一个显示该客户订单的 GridView 控件。
在本演练中，两个 GridView 控件均使用 SqlDataSource 控件来检索数据源中的数据。
在本演练中，您将学会如何执行以下任务：
在 Microsoft Visual Web Developer 中连接到 SQL Server 数据库。
使用 SqlDataSource 控件管理数据访问和绑定。
在 GridView 控件中显示从数据库返回的数据。
创建一个具有嵌套控件的、将由 GridView 控件显示的 TemplateField。
根据运行时条件，动态自定义每一行的显示。
或者，可以将数据缓存与 SqlDataSource 控件一起使用以减少对数据库的请求。
先决条件
若要完成本演练，您需要：
Visual Web Developer (Visual Studio)。
Microsoft 数据访问组件 (MDAC) 2.7 版或更高版本。
如果使用的是 Microsoft Windows XP 或 Windows Server 2003，那么您已经有了 MDAC 2.7。但是，如果使用的是 Microsoft Windows 2000，您可能需要升级您计算机上已经安装的 MDAC。有关更多信息，请参见位于 MSDN Library 的“Microsoft Data Access Components (MDAC) Installation”（Microsoft 数据访问组件 (MDAC) 安装）。
SQL Server Northwind 数据库的访问权限。有关如何下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见 Microsoft SQL Server 网站上的“Installing Sample Databases”（安装示例数据库）。
.gif "说明")
说明：如果需要有关如何登录到运行 SQL Server 的计算机的信息，请联系服务器管理员。
创建网站
如果您已经通过完成演练：在 Visual Web Developer 中创建基本网页在 Visual Web Developer 中创建了网站，则可以使用该网站，并转至下一部分。否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在**“文件”菜单上单击“新建”，然后单击“网站”。如果您使用的是 Visual Web Developer 速成版，则在“文件”菜单上单击“新建网站”**。
出现**“新建网站”**对话框。
在**“Visual Studio 已安装的模板”下单击“ASP.NET 网站”**。
在第一个**“位置”框中选择“文件系统”**，在第二个框中输入要保存网站网页的文件夹的名称。
例如，键入文件夹名称“C:\WebSites\NestedGridView”。
在**“语言”**列表中，单击您想使用的编程语言。
单击**“确定”**。
Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。
为 GridView 控件添加数据源
若要在 ASP.NET 网页上显示数据，需要下列元素：
与数据源（如数据库）的连接。在下面的过程中，您将创建一个到 SQL Server Northwind 数据库的连接。
该页上一个用于显示数据的控件。
在下面的过程中，您将通过 GridView 控件显示数据。GridView 控件将从 SqlDataSource 控件中获取其数据。
为 GridView 控件添加数据源
打开或切换到 Default.aspx 页。
切换到“设计”视图。
在**“工具箱”中，从“数据”**组中将 SqlDataSource 控件拖动到页面上。
如果**“SqlDataSource 任务”智能标记没有显示，请右击 SqlDataSource 控件，然后单击“显示智能标记”**。
在**“SqlDataSource 任务”面板中单击“配置数据源”**。
出现**“配置数据源”**向导。
单击**“新建连接”**。
即会出现**“添加连接”**对话框。
如果**“数据源”列表没有显示“Microsoft SQL Server (SqlClient)”，则单击“更改”，然后在“更改数据源”对话框中选择“Microsoft SQL Server”**。
如果出现的是**“选择数据源”对话框而不是“连接属性”对话框，则请在“数据源”列表中选择要使用的数据源类型。在此演练中，数据源的类型为“Microsoft SQL Server”。在“数据提供程序”列表中，单击“用于 SQL Server 的 .NET Framework 数据提供程序”，然后单击“继续”**。
在**“添加连接”页上的“服务器名”**文本框中，键入安装示例数据库 Northwind 的 SQL Server 的名称。
对于**“登录到服务器”**部分，选择适当的选项以访问正在运行的 SQL Server 数据库（集成安全性或特定 ID 和密码）。如果需要，则输入用户名和密码。
如果输入了密码，请选中**“保存密码”**复选框。
单击**“选择或输入一个数据库名”**，然后输入“Northwind”。
单击**“测试连接”，并在确定该连接生效后单击“确定”**。
在**“配置数据源”向导中单击“下一步”**。
确保选中了**“是，将此连接另存为”**复选框。
将连接命名为“NorthwindConnectionString”，然后单击**“下一步”**。
在**“配置 Select 语句”向导步骤中，选择“指定来自表或视图的列”**。
在**“名称”**列表框中选择“Customers”。
在**“列”**面板中，选择“CustomerID”和“CompanyName”列。
单击**“下一步”**。
单击**“完成”**。
添加显示数据的 GridView 控件
建立用于检索数据的数据源之后，必须向页添加一个控件以显示数据。
在下面的过程中，您将通过 GridView 控件显示数据。GridView 控件将从先前添加的 SqlDataSource 控件中获取其数据。
添加并配置用于显示数据的 GridView 控件
确保您位于 Default.aspx 页的**“设计”**视图中。
在**“工具箱”中，从“数据”组中将“GridView”**控件拖到页上。
在**“GridView Tasks”菜单的“选择数据源”**列表框中，选择先前添加的 SqlDataSource 控件“SqlDataSource1”。
选中**“启用分页”**复选框。
在“属性”窗口中，展开 GridView 控件的 RowStyle 属性，然后将 VerticalAlign 属性设置为 Top。这样将把网格行中的文本与单元格的顶部对齐，因为嵌套网格将显示多个行。
添加用于显示相关数据的嵌套的 GridView 控件
现在，必须创建一个嵌套数据源和 GridView 控件以在每行中显示相关数据。为此，请执行以下操作：
为 GridView 控件显示的行创建一个 TemplateField。
将嵌套的 GridView 控件和 SqlDataSource 控件添加到 TemplateField 以显示各行的相关数据。
添加一个用于处理父控件 GridView 的 RowDataBound 事件的过程，以便为嵌套的 SqlDataSource 控件设置选择参数值。
添加并配置用于显示数据的嵌套的 GridView 控件
确保您位于 Default.aspx 页的**“设计”**视图中。
右击 GridView 控件，再选择**“显示智能标记”**。
单击**“编辑列”**。
出现**“字段”**对话框。
在**“可用字段”面板中，选择“TemplateField”，然后单击“添加”**。
在**“TemplateField 属性”面板中，将“HeaderText”**设置为“订单”。
单击**“确定”**。
在**“GridView 任务”面板中单击“编辑模板”**。
在**“模板编辑模式”面板的“显示”列表框中，选择“ItemTemplate”**。
在**“工具箱”中，从“数据”组中将“SqlDataSource”**控件拖到页面上 ItemTemplate 的可编辑区域。
如果**“SqlDataSource 任务”智能标记没有显示，请右击 SqlDataSource 控件，然后单击“显示智能标记”**。
在**“SqlDataSource 任务”智能标记中，单击“配置数据源”**。
出现**“配置数据源”**向导。
对于**“选择您的数据连接”步骤，选择先前在本演练中创建的“NorthwindConnectionString”，然后单击“下一步”**。
在**“配置 Select 语句”向导步骤中，选择“指定来自表或视图的列”**。
在**“名称”**列表中，选择“订单”。
在**“列”**面板中，选择“OrderID”和“OrderDate”列。
单击**“WHERE”**为 SELECT 语句添加一个参数。
在**“添加 WHERE 子句”窗口的“列”**列表框中选择“CustomerID”。
在**“源”** 列表框中选择“无”。
单击**“添加”**。
这样将创建一个选择参数，您将把该参数设置为绑定到父控件 GridView 的各行的 CustomerID 值。
单击**“确定”**。
单击**“下一步”**。
单击**“完成”**。
在**“工具箱”中，从“数据”**组中将 GridView 控件拖到 ItemTemplate 的可编辑区域。
如果**“GridView 任务”智能标记没有显示，请右击 GridView 控件，然后单击“显示智能标记”**。
在**“GridView 任务”智能标记的“选择数据源”**列表框中，选择 SqlDataSource 嵌套控件的名称“SqlDataSource2”。
右击 GridView 父控件“GridView1”，然后选择**“显示智能标记”**。
在**“GridView 任务”面板中单击“结束模板编辑”**。
说明：嵌套的 GridView 控件未显示在“设计”视图中。
在“GridView1”的**“属性”面板中单击“事件”**按钮
.gif "属性窗口中的事件按钮")
。在**“RowDataBound”**框中键入“GridView1_RowDataBound”，然后按 Enter。
Visual Web Developer 将为 GridView 控件的 RowDataBound 事件创建事件处理程序。该代码将类似以下代码示例。
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound End Subprotected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { }将下面的代码添加到该过程中：
If e.Row.RowType = DataControlRowType.DataRow Then Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource) s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text End Ifif (e.Row.RowType == DataControlRowType.DataRow) { SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2"); s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text; }该代码检索当前行的 CustomerID 值，并将其设置为 SqlDataSource 嵌套控件“SqlDataSource2”的选择参数值。
将更改保存到文件中。
测试页面
现在可以运行页面。
测试页面
按 Ctrl+F5 运行该页。
GridView 控件将显示 Northwind Customers 表中的数据行，并针对每一行中嵌套的每个客户显示来自 Northwind Orders 表的数据。
关闭浏览器。
对嵌套 GridView 控件使用缓存
此时，您已经在该演练中创建了一个具有嵌套的 GridView 控件的页。正如当前编写的代码，该页将为父控件 GridView 查询一次数据库，然后再为每个嵌套的 GridView 控件查询一次。
若要减少数据库负载，可以修改嵌套查询以返回所有行，缓存结果，然后为每个嵌套的 GridView 控件筛选结果。
| 说明： |
|---|
对于大型数据库，这并不是一种切实可行的解决方法。如果要检索大型数据库中的数据，请生成一个仅检索所需行的数据对象，并使用 ObjectDataSource 控件绑定它。有关更多信息，请参见 ObjectDataSource Web 服务器控件概述。 |
配置嵌套的 SqlDataSource 控件以缓存查询结果
确保您位于 Default.aspx 页的**“设计”**模式中。
右击 GridView 父控件“GridView1”，然后单击**“编辑模板”**。
在“订单”列的 ItemTemplate 中，选择嵌套的 SqlDataSource 控件“SqlDataSource2”。
在“属性”窗口中，将 EnableCaching 属性设置为 true。
将 FilterExpression 属性设置为 CustomerID='{0}'。
在 FilterParameters 属性中，单击省略号按钮
.gif "ASP.NET 移动设计器中的省略号")
，以打开**“参数集合编辑器”**窗口。在**“参数集合编辑器”窗口中，单击“添加参数”**。
在**“名称”**框中输入“CustomerID”。
单击**“确定”**。
右击嵌套的 SqlDataSource 控件“SqlDataSource2”，然后选择**“显示智能标记”**。
单击**“配置数据源”**。
保持连接信息不变，然后单击**“下一步”**。
在**“配置 Select 语句”步骤中，选择“指定来自表或视图的列”**。
从**“名称”**列表框中，选择“订单”。
在**“列”部分中，选中“OrderID”、“CustomerID”和“OrderDate”列，然后单击“下一步”**。
单击**“完成”**。
在系统提示刷新嵌套的 GridView 控件“GridView2”的字段和键时，单击**“否”**。
嵌套的 GridView 控件显示的列将不会更改。
您已经配置了嵌套的 SqlDataSource 控件“SqlDataSource2” 检索数据库中的所有订单数据，并在本地缓存这些数据。当嵌套的 GridView 控件绑定到数据时，将应用一个筛选器以便仅显示与当前行的 CustomerID 值相关的订单。
如果使用代码隐藏页，请右击页面上的空白区域，然后单击**“查看代码”**。
更改 RowDataBound 事件处理程序的代码，如下所示：
If e.Row.RowType = DataControlRowType.DataRow Then Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource) s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text End Ifif (e.Row.RowType == DataControlRowType.DataRow) { SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2"); s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text; }在该代码版本中，并没有在 SqlDataSource 控件的 SelectParameters 集合中设置值，而是在其 FilterParameters 集合中设置值。
保存该文件。
测试页面
现在可以运行页面。
测试页面
按 Ctrl+F5 运行该页。
GridView 控件将显示 Northwind Customers 表中的数据行，并针对每一行中嵌套的每个客户显示来自 Northwind Orders 表的数据。然而，在为第一行绑定数据时，所有绑定到 GridView 控件的数据将被请求一次。该数据将被缓存以供 GridView 控件的剩余行使用。
关闭浏览器。
后续步骤
本演练演示了如何扩展 GridView 控件的功能，以在 ASP.NET 网页上使用嵌套的 GridView 控件显示相关数据。您也可以扩展您的应用程序以更新和删除数据，或使用户可以使用 DetailsView 或 FormView 控件插入新记录。您还可以使用 TextBox 以外的控件（如 DropDownList 控件）来更改值。有关更多信息，请参见下列主题：