演练:在 Visual Studio 中创建主/详细信息网页

更新:2007 年 11 月

很多网页都以多种方式显示数据,通常显示的是相关表的数据。本演练演示处理多个控件中的数据以及多个表(包括具有主/详细信息关系的表)的数据的各种方法。本演练中阐释的任务包括:

  • 使用数据库数据填充下拉列表。

  • 创建筛选器 -- 带有 WHERE 子句的 SQL 语句(参数化查询)。

  • 根据用户在下拉列表中的选择显示筛选的数据。

  • 使用 DetailsView 控件显示所选记录的详细信息。

  • 在一个页中选择一条记录,然后在另一个页中显示一条相关记录。

先决条件

若要完成本演练,您需要:

  • SQL Server Northwind 数据库的访问权限。有关下载和安装 SQL Server 示例数据库 Northwind 的信息,请参见位于 Microsoft SQL Server 网站上的“Installing Sample Databases”(安装示例数据库)

    说明:

    如果需要有关如何登录到运行 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”。否则,按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建网站”。

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

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

  4. 在“位置”框中输入要保存网站页面的文件夹的名称。

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

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

  6. 单击“确定”。

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

连接到 SQL Server

若要处理数据,则需要建立到数据库的连接。在本演练中,将独立创建一个处理网页或控件的连接。

创建到 SQL Server 的连接

  1. 按 Ctrl+Alt+S 显示“数据库资源管理器”。在“数据库资源管理器”中,右击“数据连接”并选择“添加连接”。

    屏幕上会显示“更改数据源”对话框。

  2. 在“更改数据源”对话框中,选择“Microsoft SQL Server”,然后单击“确定”。

  3. 在“添加连接”对话框中,执行以下操作:

    • 输入或选择 SQL Server 计算机的名称。对于您计算机上的服务器,输入“(local)”。

    • 选择“使用 SQL Server 身份验证”。

    • 输入用户名和密码。

    • 选择“保存密码”。

    • 选择“Northwind”作为数据库。

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

    该连接即添加到服务器资源管理器中。

使用下拉列表作为主表

在本部分的演练中,将向页添加一个下拉列表,并用“Northwind”表的一组类别填充该表。当用户选择某个类别时,页中将显示该类别的产品。

创建和填充下拉列表

  1. 切换到或打开 Default.aspx 页。如果您使用已创建的网站,则请添加或打开可以在此演练中使用的页。

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

  3. 在页中键入“按类别选择产品”,然后使用“工具箱”上方的“块格式”下拉列表将该文本的格式设置为标题。

  4. 从“工具箱”的“标准”组中,将一个“DropDownList”控件拖到该页上。

  5. 在“DropDownList 任务”中,选择“启用 AutoPostBack”复选框。

    该控件这样配置后,只要用户在列表中进行了选择,即会使页向服务器回发,而不用等候用户单击按钮。

  6. 在“DropDownList 任务”中,选择“选择数据源”。

    “选择数据源”向导启动。

  7. 在“选择数据源”列表中,单击“<新建数据源>”。

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

  8. 选择“数据库”。

    此选项指定要从支持 SQL 语句的数据库中获取数据。(此类数据库包括 SQL Server 和其他与 OLE-DB 兼容的数据库。)

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

  9. 单击“确定”。

    向导显示“配置数据源 - SqlDataSource1”页,您可以选择其中一个数据连接。

  10. 从下拉列表中,选择在演练前面部分创建的“Northwind”连接。

  11. 单击“下一步”。

    该向导显示一页,在该页中可以选择将连接字符串存储到配置文件中。

  12. 确保选中了“是,将此连接另存为”复选框,然后单击“下一步”。(可以保留默认的连接字符串名称。)

    该向导显示一页,在该页中可以指定要从数据库中获取的数据。

  13. 从“表或视图选项”下的“名称”列表中,选择“Categories”。

  14. 在“列”框中,选择“CategoryID”和“CategoryName”。

  15. 单击“下一步”。

  16. 单击“测试查询”以确保您获取的是所需数据。

  17. 单击“完成”。

    显示“数据源配置向导”,同时显示了已配置的数据源控件的名称。

  18. 从“选择要在 DropDownList 中显示的数据字段”列表中,选择“CategoryName”。

    说明:

    如果该列表中没有任何项,则单击“刷新架构”链接。

    这样即指定“CategoryName”字段的值将作为项的文本显示在下拉列表中。

  19. 从“为 DropDownList 的值选择数据字段”列表中,选择“CategoryID”。

    这样即指定当选择某一项时,“CategoryID”字段将作为该项的值返回。

  20. 单击“确定”。

在继续之前,请测试下拉列表。

测试下拉列表

  1. 按 Ctrl+F5 运行该页。

  2. 显示该页后,检查下拉列表。

  3. 选择一个类别,确保列表执行回发。

    现在,可以显示下拉列表中所选类别的产品。

使用网格显示详细信息

现在可以扩展页以包含网格。当用户在类别下拉列表中进行选择时,网格将显示该类别的产品。

使用网格显示详细信息

  1. 切换到或打开 Default.aspx 页(或还在使用的页),然后切换到“设计”视图。

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

  3. 在“GridView 任务”菜单的“选择数据源”列表中,选择“<新建数据源>”。

    “数据源配置向导”打开。

  4. 选择“数据库”。

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

  5. 单击“确定”。

    向导将显示一页,在该页中可以选择连接。

  6. 从连接下拉列表中,选择在演练前面部分创建并存储的连接(“NorthwindConnectionString”)。

  7. 单击“下一步”。

    向导显示“配置数据源 - SqlDataSource2”页,您可在其中创建 SQL 语句。

  8. 从“名称”列表中,选择“Products”。

  9. 在“列”框中,选择“ProductID”、“ProductName”和“CategoryID”。

  10. 单击“WHERE”。

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

  11. 从“列”列表中,选择“CategoryID”。

  12. 从“运算符”列表中,选择“=”。

  13. 从“源”列表中,选择“控件”。

  14. 在“参数属性”的“控件 ID”列表中,选择“DropDownList1”。

    前面两个步骤指定查询将从您前面添加的 DropDownList 控件中获取类别 ID 的搜索值。

  15. 单击“添加”。

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

  17. 单击“下一步”。

  18. 在“预览”页中,单击“测试查询”。

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

  19. 在框中键入“4”,然后单击“确定”。

    显示类别 4 的产品记录。

  20. 单击“完成”关闭向导。

现在可以测试主/详细信息显示。

测试页面

  1. 按 Ctrl+F5 运行该页。

    当页出现时,显示下拉列表中第一个项的产品。

  2. 从列表中选择一个类别,确认相应产品出现在网格中。

在同一页中显示主/详细信息数据

在本部分演练中,将在一个页中显示相关表的数据。主表数据显示在网格中,用户可在该网格中选择单个行。当用户选择单个行时,一条或多条详细信息记录显示在页上其他位置的可滚动控件中。出于演示的目的,将使用 Northwind 类别表作为主表,产品表作为详细信息表。

显示主记录

  1. 向网站添加一个新页,并将其命名为“MasterDetails2.aspx”。

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

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

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

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

    1. 选择“数据库”。

    2. 单击“确定”。

    3. 从连接下拉列表中,选择在演练前面部分创建并存储的连接(“NorthwindConnectionString”)。

    4. 单击“下一步”。

    5. 从“名称”列表中,选择“Categories”。

    6. 在“列”框中,选择“CategoryID”和“CategoryName”。

    7. 单击“下一步”,然后单击“完成”。

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

    显示“字段”对话框。

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

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

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

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

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

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

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

配置查询以显示相关记录

  1. 在“详细信息”视图中,在 MasterDetails2.aspx 页上的“SqlDataSource1”控件下面按 Enter 可以产生空白。

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

  3. 将该控件配置为使用另一个数据源控件,步骤如下:

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

    2. 选择“数据库”。

    3. 单击“确定”。

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

    5. 单击“下一步”。

    6. 从“表或视图选项”下的“名称”列表中,选择“Products”。

    7. 在“列”框中,选择“ProductID”、“ProductName”和“CategoryID”。

    8. 单击“WHERE”。

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

    9. 从“列”列表中,选择“CategoryID”。

    10. 从“运算符”列表中,选择“=”。

    11. 从“源”列表中,选择“控件”。

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

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

    14. 单击“下一步”。

    15. 在“预览”页中,单击“测试查询”。

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

    16. 在框中键入“4”,然后单击“确定”。

      显示类别 4 的产品记录。

    17. 单击“完成”。

  4. 在“DetailsView 任务”菜单中,选中“启用分页”。

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

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

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

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

对页进行测试

  1. 按 Ctrl+F5 运行该页。

  2. 在网格中,选择一个类别。

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

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

  4. 在网格中,选择另一个类别。

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

在不同的页中显示主/详细信息数据

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

显示主记录

  1. 向网站添加一个新页,并将其命名为“MasterCustomers.aspx”。

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

  3. 在页中键入“Customers”,并将文本格式设置为标题。

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

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

    • 单击“数据库”。

    • 连接到 Northwind 数据库(连接“NorthwindConnectionString”)。

    • 从“Customers”表中检索“CustomerID”、“CompanyName”和“City”列。

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

  7. 在“GridView 任务”菜单中,选择“编辑列”。

    显示“字段”对话框。

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

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

    属性

    Text

    Details

    DatahrefFields

    CustomerID

    指示超链接应从“CustomerID”列获取其值

    DatahrefFormatString

    DetailsOrders.aspx?custid={0}

    创建用来导航到 DetailsOrders.aspx 页的硬编码链接。该链接还传递名为 custid 的查询字符串变量,该变量的值将使用 DatahrefFields 属性中引用的列进行填充。

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

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

创建详细信息页

  1. 向网站添加一个新页,并将其命名为“DetailsOrders.aspx”。

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

  3. 在页中键入“Orders”,并将文本格式设置为标题。

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

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

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

  7. 从连接列表中,选择在演练前面部分创建并存储的连接(“NorthwindConnectionString”)。

  8. 单击“下一步”。

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

  9. 从“名称”列表中,选择“Orders”。

  10. 在“列”框中,选择“OrderID”、“CustomerID”和“OrderDate”。

  11. 单击“WHERE”。

  12. 从“列”列表中,选择“CustomerID”。

  13. 从“运算符”列表中,选择“=”。

  14. 从“源”列表中,选择“QueryString”。

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

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

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

  16. 单击“添加”。

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

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

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

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

对页进行测试

  1. 切换到 MasterCustomers.aspx 页。

  2. 按 Ctrl+F5 运行该页。

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

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

    DetailsOrder.aspx?custid=x
    

    其中 x 是所选客户的 ID。

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

后续步骤

本演练演示了显示相关表的数据的各种方法。所有方案都具有一个共同点:它们都依赖于参数化查询,并且参数值可在运行时自动传递给查询。您可能还想体验使用相关数据的其他方法。例如,您可能希望:

请参见

概念

数据源控件概述

使用数据源控件修改数据