GridView和DetailsView在同一页与不同页两种情况的联动

本文摘自MSDN帮助:ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.VisualStudio.v80.chs/dv_vwdcon/html/e3ab20ae-44c3-43f0-91f3-0f95fff47b48.htm
 
在同一页中显示主/详细信息数据
在本部分演练中，将在一个页中显示相关表的数据。主表数据显示在网格中，用户可在该网格中选择单个行。当用户选择单个行时，一条或多条详细信息记录显示在页上其他位置的可滚动控件中。出于演示的目的，将使用 Northwind 类别表作为主表，产品表作为详细信息表。

显示主记录
向网站添加一个新页，并将其命名为“MasterDetails2.aspx”。

切换到“设计”视图。

在页中键入“主/详细信息页”，并将文本格式设置为标题。

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

在“GridView 任务”菜单的“选择数据源”列表中，单击“<新建数据源>”，然后使用下列步骤为“GridView”控件配置数据源：

选择“数据库”。

单击“确定”。

从连接下拉列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。

单击“下一步”。

从“名称”列表中，选择“类别”。

在“列”框中，选择“CategoryID”和“CategoryName”。

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

选择“GridView”控件，并在“GridView 任务”菜单中选择“编辑列”。

显示“字段”对话框。

在“可用字段”下，打开“命令字段”节点，选择“选择”，然后单击“添加”将其添加到“选定的字段”列表中。

在“选定的字段”列表中，选择“选择”，然后在“CommandField”属性网格中，将其“SelectText”属性设置为“详细信息”。

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

具有“详细信息”超链接的新列即添加到网格中。

选择“GridView”控件，在“属性”窗口中确认其“DataKeyNames”属性设置为 CategoryID。

这样即指定了当您在网格中选择一行时，ASP.NET 可在已知位置找到当前显示的“类别”记录的键。

使用网格可以选择单个类别。下一步是添加 DetailsView 控件，该控件将显示详细信息记录 -- 与选定类别关联的产品。DetailsView 控件将使用另一个 SQL 查询来获取其数据，因此它需要另一个数据源控件。

配置查询以显示相关记录
在“详细信息”视图中，在 MasterDetails2.aspx 页上的“SqlDataSource1”控件下面按 Enter 可以产生空白。

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

将该控件配置为使用另一个数据源控件，步骤如下：

从“选择数据源”列表中，选择“<新建数据源>”。

选择“数据库”。

单击“确定”。

在连接下拉列表中，单击在演练前面部分创建并存储的连接。

单击“下一步”。

从“表或视图选项”下的“名称”列表中，选择“产品”。

在“列”框中，选择“ProductID”、“ProductName”和“CategoryID”。

单击“WHERE”。

显示“添加 WHERE 子句”对话框。

从“列”列表中，选择“CategoryID”。

从“运算符”列表中，选择“=”。

从“源”列表中，选择“控件”。

在“参数属性”下的“控件 ID”列表中，选择“GridView1”。第二个网格的查询将从第一个网格中的选中项获取其参数值。

单击“添加”，然后单击“确定”，关闭“添加 WHERE 子句”对话框。

单击“下一步”。

在“预览”页中，单击“测试查询”。

向导将显示一个对话框，提示您输入一个要在 WHERE 子句中使用的值。

在框中键入“4”，然后单击“确定”。

显示类别 4 的产品记录。

单击“完成”。

在“DetailsView 任务”菜单中，选中“启用分页”。

这样即可滚动查看产品记录。

也可以在“属性”窗口中，打开“PagerSettings”节点，选择其他“模式”值。

默认情况下，是通过单击页码来按页浏览记录的，不过，您可以选择使用下一页和上一页链接。

现在可以测试主网格和详细信息视图的组合。

对页进行测试
按 Ctrl+F5 运行该页。

在网格中，选择一个类别。

“DetailsView”控件显示与该类别关联的产品。

使用“DetailsView”控件中的页链接导航到同一类别的其他产品。

在网格中，选择另一个类别。

在“DetailsView”控件中查看该类别的产品。

在演练的最后部分，将使用另一种形式 -- 在不同的页上显示主记录和详细信息记录。主记录再次显示在网格中，其中网格包含对应于每条记录的超链接。当用户单击超链接时，他们会导航到另一个页，在该页中，他们可在显示产品全部记录的 DetailsView 控件中查看详细信息记录。

显示主记录
向网站添加一个新页，并将其命名为“MasterCustomers.aspx”。

切换到“设计”视图。

在页中键入“客户”，并将文本格式设置为标题。

从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。

在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”，然后使用向导执行以下操作：

单击“数据库”。

连接到 Northwind 数据库（连接“NorthwindConnectionString”）。

从“客户”表中检索“CustomerID”、“CompanyName”和“City”列。

也可以在“GridView 任务”菜单中，选中“启用分页”复选框。

在“GridView 任务”菜单中，选择“编辑列”。

显示“字段”对话框。

清除“自动生成字段”复选框。

在“可用字段”下，选择“超链接字段”，单击“添加”，然后设置下列属性：

 属性  值
Text
 Details
 
DataNavigateUrlFields CustomerID

指示超链接应从“CustomerID”列获取其值
 
 DataNavigateUrlFormatString DetailsOrders.aspx?custid={0}
创建用来导航到 DetailsOrders.aspx 页的硬编码链接。该链接还传递名为 custid 的查询字符串变量，该变量的值将使用 DataNavigateUrlFields 属性中引用的列进行填充。
 

 

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

现在可以创建接受母版页值的详细信息页。

创建详细信息页
向网站添加一个新页，并将其命名为“DetailsOrders.aspx”。

切换到“设计”视图。

在页中键入“订单”，并将文本格式设置为标题。

从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。

在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”

在“选择数据源类型”列表中，单击“数据库”，然后单击“确定”。

从连接列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。

单击“下一步”。

向导将显示一页，在该页中可以创建 SQL 语句。

从“名称”列表中，选择“订单”。

在“列”框中，选择“OrderID”、“CustomerID”和“OrderDate”。

单击“WHERE”。

从“列”列表中，选择“CustomerID”。

从“运算符”列表中，选择“=”。

从“源”列表中，选择“QueryString”。

指定查询将根据查询字符串传入页的值选择记录。

在“参数属性”下的“QueryString 字段”框中，键入“custid”。

查询将从查询字符串中获取客户 ID 值，查询字符串是在单击 MasterCustomers.aspx 页中的“详细信息”链接时创建的。

单击“添加”。

单击“确定”关闭“添加 WHERE 子句”对话框。

单击“下一步”，然后单击“完成”关闭向导。

从“工具箱”的“标准”节点中，将一个“Hyperlink”控件拖到该页上。将其“Text”属性设置为“返回至客户”，并将其“NavigateUrl”属性设置为“MasterCustomers.aspx”。

现在可以测试相关的主/详细信息页。

对页进行测试
切换到 MasterCustomers.aspx 页。

按 Ctrl+F5 运行该页。

单击客户的“详细信息”链接。

浏览器显示含有所选客户的订单的 DetailsOrders.aspx 页。注意，浏览器的“地址”框中的 URL 为：      

 DetailsOrder.aspx?custid=x

 其中 x 是所选客户的 ID。

  4.单击“返回至客户”链接，选择另一个客户，然后再次单击“详细信息”链接，测试是否可以查看任何客户的订单。