演练：在 Visual Studio 中创建主/详细信息网页
更新：2007 年 11 月
很多网页都以多种方式显示数据，通常显示的是相关表的数据。本演练演示处理多个控件中的数据以及多个表（包括具有主/详细信息关系的表）的数据的各种方法。本演练中阐释的任务包括：
使用数据库数据填充下拉列表。
创建筛选器 -- 带有 WHERE 子句的 SQL 语句（参数化查询）。
根据用户在下拉列表中的选择显示筛选的数据。
使用 DetailsView 控件显示所选记录的详细信息。
在一个页中选择一条记录，然后在另一个页中显示一条相关记录。
先决条件
若要完成本演练，您需要：
SQL Server Northwind 数据库的访问权限。有关下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见位于 Microsoft SQL Server 网站上的“Installing Sample Databases”（安装示例数据库）。
.gif "说明")
说明：如果需要有关如何登录到运行 SQL Server 的计算机的信息，请联系服务器管理员。
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) 安装）。
创建网站
如果已经在 Microsoft Visual Web Developer 中创建了一个网站（例如，按照 演练：在 Visual Web Developer 中创建基本网页 或演练：网页中的基本数据访问中的步骤），则可以使用该网站并转到下一部分“连接到 SQL Server”。否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在“文件”菜单上单击“新建网站”。
出现“新建网站”对话框。
在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。
在“位置”框中输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。
连接到 SQL Server
若要处理数据，则需要建立到数据库的连接。在本演练中，将独立创建一个处理网页或控件的连接。
创建到 SQL Server 的连接
按 Ctrl+Alt+S 显示“数据库资源管理器”。在“数据库资源管理器”中，右击“数据连接”并选择“添加连接”。
屏幕上会显示“更改数据源”对话框。
在“更改数据源”对话框中，选择“Microsoft SQL Server”，然后单击“确定”。
在“添加连接”对话框中，执行以下操作：
输入或选择 SQL Server 计算机的名称。对于您计算机上的服务器，输入“(local)”。
选择“使用 SQL Server 身份验证”。
输入用户名和密码。
选择“保存密码”。
选择“Northwind”作为数据库。
单击“测试连接”，并在确定该连接生效后单击“确定”。
该连接即添加到服务器资源管理器中。
使用下拉列表作为主表
在本部分的演练中，将向页添加一个下拉列表，并用“Northwind”表的一组类别填充该表。当用户选择某个类别时，页中将显示该类别的产品。
创建和填充下拉列表
切换到或打开 Default.aspx 页。如果您使用已创建的网站，则请添加或打开可以在此演练中使用的页。
切换到“设计”视图。
在页中键入“按类别选择产品”，然后使用“工具箱”上方的“块格式”下拉列表将该文本的格式设置为标题。
从“工具箱”的“标准”组中，将一个“DropDownList”控件拖到该页上。
在“DropDownList 任务”中，选择“启用 AutoPostBack”复选框。
该控件这样配置后，只要用户在列表中进行了选择，即会使页向服务器回发，而不用等候用户单击按钮。
在“DropDownList 任务”中，选择“选择数据源”。
“选择数据源”向导启动。
在“选择数据源”列表中，单击“<新建数据源>”。
显示“数据源配置向导”对话框。
选择“数据库”。
此选项指定要从支持 SQL 语句的数据库中获取数据。（此类数据库包括 SQL Server 和其他与 OLE-DB 兼容的数据库。）
在“为数据源指定 ID”框中，将显示默认的数据源控件名称（“SqlDataSource1”）。可以保留此名称。
单击“确定”。
向导显示“配置数据源 - SqlDataSource1”页，您可以选择其中一个数据连接。
从下拉列表中，选择在演练前面部分创建的“Northwind”连接。
单击“下一步”。
该向导显示一页，在该页中可以选择将连接字符串存储到配置文件中。
确保选中了“是，将此连接另存为”复选框，然后单击“下一步”。（可以保留默认的连接字符串名称。）
该向导显示一页，在该页中可以指定要从数据库中获取的数据。
从“表或视图选项”下的“名称”列表中，选择“Categories”。
在“列”框中，选择“CategoryID”和“CategoryName”。
单击“下一步”。
单击“测试查询”以确保您获取的是所需数据。
单击“完成”。
显示“数据源配置向导”，同时显示了已配置的数据源控件的名称。
从“选择要在 DropDownList 中显示的数据字段”列表中，选择“CategoryName”。
说明：如果该列表中没有任何项，则单击“刷新架构”链接。
这样即指定“CategoryName”字段的值将作为项的文本显示在下拉列表中。
从“为 DropDownList 的值选择数据字段”列表中，选择“CategoryID”。
这样即指定当选择某一项时，“CategoryID”字段将作为该项的值返回。
单击“确定”。
在继续之前，请测试下拉列表。
测试下拉列表
按 Ctrl+F5 运行该页。
显示该页后，检查下拉列表。
选择一个类别，确保列表执行回发。
现在，可以显示下拉列表中所选类别的产品。
使用网格显示详细信息
现在可以扩展页以包含网格。当用户在类别下拉列表中进行选择时，网格将显示该类别的产品。
使用网格显示详细信息
切换到或打开 Default.aspx 页（或还在使用的页），然后切换到“设计”视图。
从“工具箱”的“数据”组中，将一个“GridView”控件拖到该页上。
在“GridView 任务”菜单的“选择数据源”列表中，选择“<新建数据源>”。
“数据源配置向导”打开。
选择“数据库”。
在“为数据源指定 ID”框中，将显示默认的数据源控件名称（“SqlDataSource2”）。可以保留此名称。
单击“确定”。
向导将显示一页，在该页中可以选择连接。
从连接下拉列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。
单击“下一步”。
向导显示“配置数据源 - SqlDataSource2”页，您可在其中创建 SQL 语句。
从“名称”列表中，选择“Products”。
在“列”框中，选择“ProductID”、“ProductName”和“CategoryID”。
单击“WHERE”。
显示“添加 WHERE 子句”对话框。
从“列”列表中，选择“CategoryID”。
从“运算符”列表中，选择“=”。
从“源”列表中，选择“控件”。
在“参数属性”的“控件 ID”列表中，选择“DropDownList1”。
前面两个步骤指定查询将从您前面添加的 DropDownList 控件中获取类别 ID 的搜索值。
单击“添加”。
单击“确定”关闭“添加 WHERE 子句”对话框。
单击“下一步”。
在“预览”页中，单击“测试查询”。
向导将显示一个对话框，提示您输入一个要在 WHERE 子句中使用的值。
在框中键入“4”，然后单击“确定”。
显示类别 4 的产品记录。
单击“完成”关闭向导。
现在可以测试主/详细信息显示。
测试页面
按 Ctrl+F5 运行该页。
当页出现时，显示下拉列表中第一个项的产品。
从列表中选择一个类别，确认相应产品出现在网格中。
在同一页中显示主/详细信息数据
在本部分演练中，将在一个页中显示相关表的数据。主表数据显示在网格中，用户可在该网格中选择单个行。当用户选择单个行时，一条或多条详细信息记录显示在页上其他位置的可滚动控件中。出于演示的目的，将使用 Northwind 类别表作为主表，产品表作为详细信息表。
显示主记录
向网站添加一个新页，并将其命名为“MasterDetails2.aspx”。
切换到“设计”视图。
在页中键入“主/详细信息页”，并将文本格式设置为标题。
从“工具箱”的“数据”组中，将一个“GridView”控件拖到该页上。
在“GridView 任务”菜单的“选择数据源”列表中，单击“<新建数据源>”，然后使用下列步骤为“GridView”控件配置数据源：
选择“数据库”。
单击“确定”。
从连接下拉列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。
单击“下一步”。
从“名称”列表中，选择“Categories”。
在“列”框中，选择“CategoryID”和“CategoryName”。
单击“下一步”，然后单击“完成”。
选择“GridView”控件，并在“GridView 任务”菜单中选择“编辑列”。
显示“字段”对话框。
在“可用字段”下，打开“命令字段”节点，选择“选择”，然后单击“添加”将其添加到“选定的字段”列表中。
在“选定的字段”列表中，选择“选择”，然后在“CommandField”属性网格中，将其“SelectText”属性设置为“详细信息”。
单击“确定”关闭“字段”对话框。
具有“详细信息”超链接的新列即添加到网格中。
选择“GridView”控件，在“属性”窗口中确认其“DataKeyNames”属性设置为 CategoryID。
这样即指定了当您在网格中选择一行时，ASP.NET 可在已知位置找到当前显示的“类别”记录的键。
使用网格可以选择单个类别。下一步是添加 DetailsView 控件，该控件将显示详细信息记录 -- 与选定类别关联的产品。DetailsView 控件将使用另一个 SQL 查询来获取其数据，因此它需要另一个数据源控件。
配置查询以显示相关记录
在“详细信息”视图中，在 MasterDetails2.aspx 页上的“SqlDataSource1”控件下面按 Enter 可以产生空白。
从“工具箱”的“数据”组中，将一个“DetailsView”控件拖到该页上。
将该控件配置为使用另一个数据源控件，步骤如下：
从“选择数据源”列表中，选择“<新建数据源>”。
选择“数据库”。
单击“确定”。
在连接下拉列表中，单击在演练前面部分创建并存储的连接。
单击“下一步”。
从“表或视图选项”下的“名称”列表中，选择“Products”。
在“列”框中，选择“ProductID”、“ProductName”和“CategoryID”。
单击“WHERE”。
显示“添加 WHERE 子句”对话框。
从“列”列表中，选择“CategoryID”。
从“运算符”列表中，选择“=”。
从“源”列表中，选择“控件”。
在“参数属性”下的“控件 ID”列表中，选择“GridView1”。第二个网格的查询将从第一个网格中的选中项获取其参数值。
单击“添加”，然后单击“确定”，关闭“添加 WHERE 子句”对话框。
单击“下一步”。
在“预览”页中，单击“测试查询”。
向导将显示一个对话框，提示您输入一个要在 WHERE 子句中使用的值。
在框中键入“4”，然后单击“确定”。
显示类别 4 的产品记录。
单击“完成”。
在“DetailsView 任务”菜单中，选中“启用分页”。
这样即可滚动查看产品记录。
也可以在“属性”窗口中，打开“PagerSettings”节点，选择其他“模式”值。
默认情况下，是通过单击页码来按页浏览记录的，不过，您可以选择使用下一页和上一页链接。
现在可以测试主网格和详细信息视图的组合。
对页进行测试
按 Ctrl+F5 运行该页。
在网格中，选择一个类别。
“DetailsView”控件显示与该类别关联的产品。
使用“DetailsView”控件中的页链接导航到同一类别的其他产品。
在网格中，选择另一个类别。
在“DetailsView”控件中查看该类别的产品。
在不同的页中显示主/详细信息数据
在演练的最后部分，将使用另一种形式 -- 在不同的页上显示主记录和详细信息记录。主记录再次显示在网格中，其中网格包含对应于每条记录的超链接。当用户单击超链接时，他们会导航到另一个页，在该页中，他们可在显示产品全部记录的 DetailsView 控件中查看详细信息记录。
显示主记录
向网站添加一个新页，并将其命名为“MasterCustomers.aspx”。
切换到“设计”视图。
在页中键入“Customers”，并将文本格式设置为标题。
从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。
在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”，然后使用向导执行以下操作：
单击“数据库”。
连接到 Northwind 数据库（连接“NorthwindConnectionString”）。
从“Customers”表中检索“CustomerID”、“CompanyName”和“City”列。
也可以在“GridView 任务”菜单中，选中“启用分页”复选框。
在“GridView 任务”菜单中，选择“编辑列”。
显示“字段”对话框。
清除“自动生成字段”复选框。
在“可用字段”下，选择“超链接字段”，单击“添加”，然后设置下列属性：
属性
值
Text
Details
DatahrefFields
CustomerID
指示超链接应从“CustomerID”列获取其值
DatahrefFormatString
DetailsOrders.aspx?custid={0}
创建用来导航到 DetailsOrders.aspx 页的硬编码链接。该链接还传递名为 custid 的查询字符串变量，该变量的值将使用 DatahrefFields 属性中引用的列进行填充。
单击“确定”关闭“字段”对话框。
现在可以创建接受母版页值的详细信息页。
创建详细信息页
向网站添加一个新页，并将其命名为“DetailsOrders.aspx”。
切换到“设计”视图。
在页中键入“Orders”，并将文本格式设置为标题。
从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。
在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”
在“选择数据源类型”列表中，单击“数据库”，然后单击“确定”。
从连接列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。
单击“下一步”。
向导将显示一页，在该页中可以创建 SQL 语句。
从“名称”列表中，选择“Orders”。
在“列”框中，选择“OrderID”、“CustomerID”和“OrderDate”。
单击“WHERE”。
从“列”列表中，选择“CustomerID”。
从“运算符”列表中，选择“=”。
从“源”列表中，选择“QueryString”。
指定查询将根据查询字符串传入页的值选择记录。
在“参数属性”下的“QueryString 字段”框中，键入“custid”。
查询将从查询字符串中获取客户 ID 值，查询字符串是在单击 MasterCustomers.aspx 页中的“详细信息”链接时创建的。
单击“添加”。
单击“确定”关闭“添加 WHERE 子句”对话框。
单击“下一步”，然后单击“完成”关闭向导。
从“工具箱”的“标准”节点中，将一个“Hyperlink”控件拖到该页上。将其“Text”属性设置为“返回至客户”，并将其“href”属性设置为“MasterCustomers.aspx”。
现在可以测试相关的主/详细信息页。
对页进行测试
切换到 MasterCustomers.aspx 页。
按 Ctrl+F5 运行该页。
单击客户的“详细信息”链接。
浏览器显示含有所选客户的订单的 DetailsOrders.aspx 页。注意，浏览器的“地址”框中的 URL 为：
DetailsOrder.aspx?custid=x其中 x 是所选客户的 ID。
单击“返回至客户”链接，选择另一个客户，然后再次单击“详细信息”链接，测试是否可以查看任何客户的订单。
后续步骤
本演练演示了显示相关表的数据的各种方法。所有方案都具有一个共同点：它们都依赖于参数化查询，并且参数值可在运行时自动传递给查询。您可能还想体验使用相关数据的其他方法。例如，您可能希望：
体验参数从 Session 变量或 Cookie 之类的其他源中获取参数值。有关更多信息，请参见 对数据源控件使用参数。
从演练的第二部分开始，扩展 DetailsView 控件可进行的操作。例如，您可以将控件配置为允许用户编辑详细信息记录。有关详细信息，请参见 演练：使用 DetailsView 服务器控件在网页上编辑和插入数据。