使用 DropDownList 的主/明细筛选

简介

主/ 明细报表 是一种常见报表类型，报告开头显示某种 “ 主 ” 记录。用户可以深入查看某个主记录，从而了解该主记录的详细信息。主 / 明细报表是直观显示一对多关系的理想选择。例如，用一个报表显示所有类别，并随后允许某个用户选择一个特定类别并显示该类别的关联产品。此外，主 / 明细报表可用于显示特别“宽”（即列数很多）表中的详细信息。例如，主 / 明细报表的“主” 级别可能只显示数据库中的产品名称和产品单价，而深入查看某个特定产品的信息可以显示其他产品字段，如类别、供应商、每单位产品的数量等。

实现主/明细报表的方法有多种。本教程和接下来的三篇教程都将讲到多种主/明细报表。本教程将介绍如何在DropDownList 控件 中显示主记录，及在 GridView 中显示选中列表项的详细信息。尤其是本教程的主/明细报表将列出类别和产品信息。

步骤1 ：显示 DropDownList 中的类别

我们的主/明细报表将在 DropDownList 中列出类别，并在页面中用 GridView 进一步显示选中列表项的产品。那么，摆在我们面前的第一个任务是在 DropDownList 中显示类别。打开 Filtering 文件夹中的 FilterByDropDownList.aspx 页面，从 Toolbox 上将一个 DropDownList 拖动到页面的设计器上，并将其 ID 属性设为 Categories 。然后，单击 DropDownList 的智能标记上的 Choose Data Source 链接，以显示Data Source Configuration 向导。

图1 ：指定 DropDownList 的数据源

选择新增一个名为 CategoriesDataSource 的 ObjectDataSource ，它将调用CategoriesBLL 类的 GetCategories() 方法。

图2 ：新增名为 CategoriesDataSource 的 ObjectDataSource

图3 ：选择使用 CategoriesBLL 类

图4 ：配置 ObjectDataSource 以使用 GetCategories() 方法

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

图5 ：在 DropDownList 中显示 CategoryName 字段并使用 CategoryID 作为值

现在，我们有一个 DropDownList 控件，显示来自Categories 表的记录（ 整个操作过程只需要 6 秒左右 ）。图6 显示的是我们通过浏览器看到的当前进度。

图6 ：下拉列表显示当前类别

步骤2 ：添加产品GridView

主/明细报表操作的最后一步是列出与选中类别相关联的产品。操作方法为：向页面添加一个 GridView 并新建一个名为 productsDataSource 的 ObjectDataSource 。设置 productsDataSource 控件从 ProductsBLL 类的 GetProductsByCategoryID(categoryID) 方法中选择数据。

图7 ：选择 GetProductsByCategoryID(categoryID) 方法

选择该方法后，ObjectDataSource 向导将提示为方法的categoryID 参数赋值。要使用所选取的类别 DropDownList 项的值，则将 Parameter 源设置为 Control ，将 ControlID 设置为 Categories 。

图8 ：用 Categories DropDownList 的值为 categoryID 参数赋值

花点时间在浏览器中检查一下进度。首次访问页面时，将显示属于选中类别的产品 (Beverages) ，如图9 所示。但修改 DropDownList 并不会更新数据。这是因为更新 GridView 必须进行回传。可通过如下两种方式进行回传（两者都不用编写代码）：

• 将DropDownList的类别的AutoPostBack 属性设为True。（ 可以通过选择 DropDownList 的智能标记的 Enable AutoPostBack 选项完成 ）这样 ， 一旦用户更改 DropDownList 的选中项，回传即被触发。因此，当用户从 DropDownList 中选择一个新类别时，便发生一次回传，并且 GridView 将随新选中的类别的产品而更新。（本教程使用的就是该方法）
• 在DropDownList旁边添加一个Button Web控件。将 Text 属性设为 Refresh 或类似值。通过此方法，用户将需要选择一个新类别然后单击 Button 。单击 Button 可以引发回传，并更新 GridView 使其列出选中类别的产品。

图 9 和 10 显示了起作用的主/明细报表。

图9 ：首次访问页面时显示的 Beverage 产品

图10 ：选择一个新产品 (Produce) 将自动引发回传并更新 GridView

添加 “-- Choose a Category – ” 列表项

首次访问FilterByDropDownList.aspx 页面时，DropDownList 类别的第一个列表项 (Beverages) 被默认选中，在GridView 中显示饮料产品。我们可能不想显示第一个类别的产品，而是想显示一个类似“ -- Choose a Category -- ”的 DropDownList 项。

要向DropDownList 中添加一个新列表项，则转至 Properties 窗口，单击 Items 属性的椭圆形。新增一个列表项，内容为“ -- Choose a Category -- ”，且值为 - 1 。

图11 ：添加一个 “-- Choose a Category – ” 列表项

另外，还可以通过向 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 。这是因为如果 AppendDataBoundItems 不为 True ，当类别被绑定到ObjectDataSource 的 DropDownList 时会覆盖所有手动添加的列表项。

图12 ：将 AppendDataBoundItems 属性设置为 True

完成上述更改后，首次访问页面时，“-- Choose a Category -- ” 选项被选中，且不显示任何产品。

图13 ：初始页面不显示任何产品

选中 “-- Choose a Category -- ” 列表项时不显示任何产品的原因是因为其值为-1 ，而数据库中没有CategoryID 为 -1 的任何产品。所以如果您不想显示产品，这个操作就对了！但如果您想在选中“ -- Choose a Category -- ”列表项时显示所有类别，请返回 ProductsBLL 类并自定义 GetProductsByCategoryID(categoryID) 方法，使其在categoryID parameter 中传递的值小于零时调用 GetProducts() 方法。

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

此处使用的方式类似于前面的声明式参数 教程中显示所有供应商的方法。不同的是，本例中使用值 -1 ，而不是零，对所有记录进行检索。这是因为传递给 GetProductsByCategoryID(categoryID) 方法的 categoryID 参数的一般都是整数，而“声明式参数”教程中传递的为字符串输入参数。

图14 为选中 “-- Choose a Category -- ” 选项时 FilterByDropDownList.aspx 的页面截图。此处默认显示所有产品，用户可以通过选择特定类别来缩小显示范围。

图14 ：默认显示所有产品

小结

当显示与等级相关的数据时，可以使用主/明细报表来展示，用户可以从该报告看到详尽的数据—— 从最高等级到深度细节。本教程详细介绍了如何构建一个简单的主/明细报表，显示选中类别所属的产品。此过程是通过使用针对该类别列表的 DropDownList 和针对选中类别所属产品的 GridView 来实现的。

下一篇教程将通过两个 DropDownList 进一步深入介绍 DropDownList 界面。

快乐编程！

下一篇教程