使用 DropDownList 控件和 GridView (VB) 筛选大纲/详细信息

  • 项目

作者 ：Scott Mitchell

下载 PDF

在本教程中，我们将了解如何在 DropDownList 控件中显示主记录，以及 GridView 中所选列表项的详细信息。

简介

报表的一种常见类型是 主报表/详细信息报表，其中报表以显示一组“主”记录开始。 然后，用户可以向下钻取到其中一条主记录，从而查看该主记录的“详细信息”。大纲/详细信息报表是可视化一对多关系的理想选择，例如显示所有类别的报表，然后允许用户选择特定类别并显示其关联的产品。 此外，大纲/详细信息报表可用于显示特定“宽”表 (具有大量列) 的详细信息。 例如，大纲/详细信息报表的“主”级别可能只显示数据库中产品的产品名称和单价，向下钻取到特定产品后，会显示) (类别、供应商、每单位数量等附加产品字段。

可通过多种方式实现主报表/详细信息报表。 在此教程和接下来的三个教程中，我们将了解各种大纲/详细信息报告。 在本教程中，我们将了解如何在 DropDownList 控件 中显示主记录，以及 GridView 中所选列表项的详细信息。 具体而言，本教程的主/详细信息报告将列出类别和产品信息。

步骤 1：在 DropDownList 中显示类别

我们的大纲/详细信息报表将在 DropDownList 中列出类别，所选列表项的产品显示在 GridView 的页面中。 然后，摆在我们面前的第一个任务是将类别显示在 DropDownList 中。 FilterByDropDownList.aspx打开 文件夹中的页面Filtering，将“工具箱”中的 DropDownList 拖到页面的设计器上，并将其 ID 属性设置为 Categories。 接下来，从 DropDownList 的智能标记中单击“选择数据源”链接。 这将显示“数据源配置”向导。

指定 DropDownList 的数据源

图 1：指定 DropDownList 的数据源 (单击以查看全尺寸图像)

选择添加名为 CategoriesDataSource 的新 ObjectDataSource，用于 CategoriesBLL 调用类的 GetCategories() 方法。

添加名为 CategoriesDataSource 的新 ObjectDataSource

图 2：添加名为 CategoriesDataSource 的新对象DataSource (单击以查看全尺寸图像)

选择使用 CategoriesBLL 类

图 3：选择使用 CategoriesBLL 类 (单击以查看全尺寸图像)

将 ObjectDataSource 配置为使用 GetCategories () 方法

图 4：将 ObjectDataSource 配置为使用 GetCategories() 方法 (单击以查看全尺寸图像)

配置 ObjectDataSource 后，我们仍然需要指定应在 DropDownList 中显示的数据源字段，以及应将哪个字段关联为列表项的值。 将 CategoryName 字段作为显示项，将 CategoryID 作为每个列表项的值。

让 DropDownList 显示 CategoryName 字段，并使用 CategoryID 作为值

图 5：让 DropDownList 显示 CategoryName 字段并使用 CategoryID 作为值 (单击以查看全尺寸图像)

此时，我们有一个 DropDownList 控件，该控件填充了表中的记录 Categories ， (所有记录在大约六秒) 完成。 图 6 显示了通过浏览器查看时到目前为止的进度。

当前类别 Drop-Down Lists

图 6：Drop-Down Lists 当前类别 (单击以查看全尺寸图像)

步骤 2：添加产品 GridView

主/详细信息报表的最后一步是列出与所选类别关联的产品。 为此，请将 GridView 添加到页面，并创建名为 productsDataSource的新 ObjectDataSource。 让 productsDataSource 控件从 ProductsBLL 类的 GetProductsByCategoryID(categoryID) 方法中剔除其数据。

选择 GetProductsByCategoryID (categoryID) 方法

图 7：选择 GetProductsByCategoryID(categoryID) 方法 (单击以查看全尺寸图像)

选择此方法后，ObjectDataSource 向导会提示我们输入方法 categoryID 参数的值。 若要使用所选 categories DropDownList 项的值，请将参数源设置为 Control，将 ControlID 设置为 Categories。

将 categoryID 参数设置为 Categories DropDownList 的值

图 8：将 categoryID 参数设置为 Categories DropDownList 的值 (单击以查看全尺寸图像)

花点时间在浏览器中检查进度。 首次访问页面时，这些产品属于所选类别 (饮料) 显示在图 9) (，但更改 DropDownList 不会更新数据。 这是因为必须进行回发才能更新 GridView。 为此，我们有两个选项， (这两个选项都不需要编写任何代码) ：

  • 将类别 DropDownList 的AutoPostBack 属性设置为 True 。 (可以通过选中 DropDownList 的智能标记中的“启用 AutoPostBack”选项来实现此目的。) 每当用户更改 DropDownList 的选定项时，都会触发回发。 因此，当用户从 DropDownList 中选择新类别时，将发生回发，GridView 将使用新选择的类别的产品进行更新。 (这是我在本教程中使用的方法。)
  • 在 DropDownList 旁边添加按钮 Web 控件。 将其 Text 属性设置为 Refresh 或类似内容。 使用此方法时，用户需要选择一个新类别，然后单击“按钮”。 单击按钮将导致回发，并更新 GridView 以列出所选类别的产品。

图 9 和图 10 演示了操作中的大纲/详细信息报告。

首次访问页面时，将显示饮料产品

图 9：首次访问页面时，将显示饮料产品 (单击以查看全尺寸图像)

选择新产品 (生成) 自动导致回发，更新 GridView

图 10：选择新产品 (生成) 自动导致回发，更新 GridView (单击以查看全尺寸图像)

添加“-- 选择类别 --”列表项

首次访问 FilterByDropDownList.aspx 页面时，默认情况下会选中 DropDownList 的第一个列表项 (饮料) 类别，并在 GridView 中显示饮料产品。 与其显示第一个类别的产品，不如选择一个 DropDownList 项，该项显示类似“-- 选择类别--”。

若要将新列表项添加到 DropDownList，请转到属性窗口并单击 属性中的Items省略号。 添加包含 Text “-- 选择类别 --”和 Value-1的新列表项。

添加 -- 选择类别 -- 列表项

图 11：添加 -- 选择类别 -- 列表项 (单击以查看全尺寸图像)

或者，可以通过将以下标记添加到 DropDownList 来添加列表项：

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

此外，我们需要将 DropDownList 控件的 AppendDataBoundItems 设置为 True，因为当类别从 ObjectDataSource 绑定到 DropDownList 时，如果 AppendDataBoundItems 不是 True，它们将覆盖任何手动添加的列表项。

将 AppendDataBoundItems 属性设置为 True

图 12：将 AppendDataBoundItems 属性设置为 True

完成这些更改后，首次访问页面时，“-- 选择类别--”选项处于选中状态，并且不显示任何产品。

在“初始页面加载”中，未显示任何产品

图 13：在“初始页面加载” (单击以查看全尺寸图像)

由于选择了“--- 选择类别 --”列表项，因此不显示任何产品的原因是其值为 -1 ，并且数据库中 CategoryID 没有具有 的 -1产品。 如果这是你想要的行为，则此时已完成！ 但是，如果要在选中“-- 选择类别 --”列表项时显示所有类别，请返回到 ProductsBLL 类并自定义 GetProductsByCategoryID(categoryID) 方法，以便在传入的参数categoryID小于零时调用 GetProducts() 方法：

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

此处使用的技术类似于我们在 声明性参数 教程中用于显示所有供应商的方法，尽管对于此示例，我们使用 值 -1 来指示应检索所有记录，而不是 Nothing。 这是因为方法 categoryID 的参数需要作为传入的 GetProductsByCategoryID(categoryID) 整数值，而在声明性参数教程中，我们传入的是字符串输入参数。

图 14 显示了选择“--- 选择类别 --”选项时的屏幕截图 FilterByDropDownList.aspx 。 在这里，所有产品都默认显示，用户可以通过选择特定类别来缩小显示范围。

所有产品现在都默认列出

图 14：所有产品现在都默认列出 (单击以查看全尺寸图像)

总结

显示与分层相关的数据时，使用主报表/详细信息报表呈现数据通常很有帮助，用户可以从主/详细信息报表开始从层次结构顶部细读数据并向下钻取详细信息。 在本教程中，我们检查了如何生成一个显示所选类别产品的简单母版/详细信息报表。 这是通过对类别列表使用 DropDownList 和对属于所选类别的产品使用 GridView 来实现的。

在下一教程中，我们将使用两个 DropDownList 进一步介绍 DropDownList 接口。

编程愉快！

关于作者

Scott Mitchell 是七本 ASP/ASP.NET 书籍的作者， 4GuysFromRolla.com 的创始人，自 1998 年以来一直从事 Microsoft Web 技术工作。 Scott 担任独立顾问、培训师和作家。 他的最新书是 山姆斯在24小时内 ASP.NET 2.0自学。 可以在 上联系 mitchell@4GuysFromRolla.com他， 也可以通过他的博客联系到他，该博客可在 http://ScottOnWriting.NET中找到。

上一页下一页