在 Visual Studio 中创建主/详细信息网页-上药控股知乎-程序博客网

先决条件

创建网站

如果已经在 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”控件配置数据源：
1. 选择“数据库”。
2. 单击“确定”。
3. 从连接下拉列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。
4. 单击“下一步”。
5. 从“名称”列表中，选择“Categories”。
6. 在“列”框中，选择“CategoryID”和“CategoryName”。
7. 单击“下一步”，然后单击“完成”。
选择“GridView”控件，并在“GridView 任务”菜单中选择“编辑列”。

显示“字段”对话框。
在“可用字段”下，打开“命令字段”节点，选择“选择”，然后单击“添加”将其添加到“选定的字段”列表中。
在“选定的字段”列表中，选择“选择”，然后在“CommandField”属性网格中，将其“SelectText”属性设置为“详细信息”。
单击“确定”关闭“字段”对话框。

具有“详细信息”超链接的新列即添加到网格中。
选择“GridView”控件，在“属性”窗口中确认其“DataKeyNames”属性设置为 CategoryID。

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

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

配置查询以显示相关记录

在“详细信息”视图中，在 MasterDetails2.aspx 页上的“SqlDataSource1”控件下面按 Enter 可以产生空白。
从“工具箱”的“数据”组中，将一个“DetailsView”控件拖到该页上。
将该控件配置为使用另一个数据源控件，步骤如下：
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. 单击“完成”。
在“DetailsView 任务”菜单中，选中“启用分页”。

这样即可滚动查看产品记录。
也可以在“属性”窗口中，打开“PagerSettings”节点，选择其他“模式”值。

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

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

对页进行测试

按 Ctrl+F5 运行该页。
在网格中，选择一个类别。

“DetailsView”控件显示与该类别关联的产品。
使用“DetailsView”控件中的页链接导航到同一类别的其他产品。
在网格中，选择另一个类别。
在“DetailsView”控件中查看该类别的产品。

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

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

显示主记录

向网站添加一个新页，并将其命名为“MasterCustomers.aspx”。
切换到“设计”视图。
在页中键入“Customers”，并将文本格式设置为标题。
从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。
在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”，然后使用向导执行以下操作：
- 单击“数据库”。
- 连接到 Northwind 数据库（连接“NorthwindConnectionString”）。
- 从“Customers”表中检索“CustomerID”、“CompanyName”和“City”列。
也可以在“GridView 任务”菜单中，选中“启用分页”复选框。
在“GridView 任务”菜单中，选择“编辑列”。

显示“字段”对话框。
清除“自动生成字段”复选框。
在“可用字段”下，选择“超链接字段”，单击“添加”，然后设置下列属性：

属性

值

Text

Details

DataNavigateUrlFields

CustomerID

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

DataNavigateUrlFormatString

DetailsOrders.aspx?custid={0}

创建用来导航到 DetailsOrders.aspx 页的硬编码链接。该链接还传递名为 custid 的查询字符串变量，该变量的值将使用 DataNavigateUrlFields 属性中引用的列进行填充。
单击“确定”关闭“字段”对话框。

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

创建详细信息页

向网站添加一个新页，并将其命名为“DetailsOrders.aspx”。
切换到“设计”视图。
在页中键入“Orders”，并将文本格式设置为标题。
从“工具箱”的“数据”文件夹中，将一个“GridView”控件拖到该页上。
在控件上的“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”
在“选择数据源类型”列表中，单击“数据库”，然后单击“确定”。
从连接列表中，选择在演练前面部分创建并存储的连接（“NorthwindConnectionString”）。
单击“下一步”。

向导将显示一页，在该页中可以创建 SQL 语句。
从“名称”列表中，选择“Orders”。
在“列”框中，选择“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。
单击“返回至客户”链接，选择另一个客户，然后再次单击“详细信息”链接，测试是否可以查看任何客户的订单。

后续步骤

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

体验参数从 Session 变量或 Cookie 之类的其他源中获取参数值。有关更多信息，请参见对数据源控件使用参数。
从演练的第二部分开始，扩展 DetailsView 控件可进行的操作。例如，您可以将控件配置为允许用户编辑详细信息记录。有关详细信息，请参见演练