使用 DropDownList 的主/明细筛选33

简介

在前面的 使用 DropDownList 的主/ 明细报表 教程中我们最初使用 GridView 创建的主/ 明细报表，首先显示几组 “ 主要 ” 报表。用户可以深入到一个主要报表，从而查看该主要报表的“详细信息”。对于可视化一对多关系和显示特别“广泛”的表（有许多列的表）中的详细信息，主 / 明细报表是理想的选择。在前面的教程中，我们探讨了如何使用 GridView 和 DetailsView 控件来实现主 / 明细报表。本教程以及后面的两个教程中，我们将重新讨论这些概念，但重点集中在使用 DataList 和 Repeater 控件上。

本教程中，我们将了解使用 DropDownList 来包含“主要” 记录使用 DataList 显示“ 明细”记录 。

步骤1 ：添加主/ 明细教程网页

在开始学习此教程之前，让我们首先花一些时间添加本教程需要的文件夹和ASP.NET 页，然后使用 DataList 和 Repeater 控件处理主/ 明细报表。首先在工程中创建一个名称为 DataListRepeaterFiltering 的新的文件夹。然后，将以下五个 ASP.NET 页添加到此文件夹，将它们全部配置为使用母版页 Site.master ：

• Default.aspx
• FilterByDropDownList.aspx
• CategoryListMaster.aspx
• ProductsForCategoryDetails.aspx
• CategoriesAndProducts.aspx

图1 ：创建一个DataListRepeaterFiltering 文件夹并添加教程的 ASP.NET 页

下一步，打开 Default.aspx 页并将 SectionLevelTutorialListing.ascx 用户控件从 UserControls 文件夹拖放到设计界面上。我们在母版页和站点导航 教程中创建的此用户控件可以枚举站点地图并在项目符号列表中显示当前部分的教程。

图2 ：向 Default.aspx 添加 SectionLevelTutorialListing.ascx 用户控件

为了使项目符号列表显示我们将要创建的主/ 明细教程，需要将它们添加到站点地图。打开 Web.sitemap 文件并在“Displaying Data with the DataList and Repeater” 站点地图节点标记之后添加以下标记：

<siteMapNode 
    title="Master/Detail Reports with the DataList and Repeater" 
    description="Samples of Reports that Use the DataList and Repeater Controls" 
    url="~/DataListRepeaterFiltering/Default.aspx"> 
 
    <siteMapNode 
        title="Filter by Drop-Down List" 
        description="Filter results using a drop-down list." 
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" /> 
 
    <siteMapNode 
        title="Master/Detail Across Two Pages" 
        description="Master records on one page, detail records on another." 
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" /> 
 
    <siteMapNode 
        title="Maser/Detail on One Page" 
        description="Master records in the left column, details on the right, 
                      both on the same page." 
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" /> 
 
</siteMapNode>

图3 ：更新站点地图以包括新的 ASP.NET 页

步骤2 ：在DropDownList中显示类别

主/ 明细报表将在 DropDownList 中列出类别，所选择的列表项的产品进一步在页面上在DataList 中显示。那么，摆在我们面前的第一项任务是在 DropDownList 中显示类别。首先打开 DataListRepeaterFiltering 文件夹中的 FilterByDropDownList.aspx 页，并且从工具箱上将一个 DropDownList 拖放到页面设计器上。然后，将 DropDownList 的 ID 属性设置为 Categories 。单击 DropDownList 的智能标记上的 Choose Data Source 链接并创建一个名称为 CategoriesDataSource 的新的 ObjectDataSource 。

图4 ：添加一个新的名称为 CategoriesDataSource 的 ObjectDataSource

配置新的 ObjectDataSource 以便使它调用 CategoriesBLL 类的 GetCategories() 方法。配置完 ObjectDataSource 之后，还需要指定在 DropDownList 中显示哪些数据源字段以及应该将哪个字段关联为每个列表项的值。使 CategoryName 字段作为显示， CategoryID 作为每个列表项的值。

图5 ：使 DropDownList 显示 CategoryName 字段，使用 CategoryID 作为值

现在有一个用 Categories 表的记录填充的 DropDownList 控件（大约 6 秒全部完成）图 6 显示的是我们通过浏览器看到的当前进度。

图6 ：下拉列表列出当前的类别

步骤2：添加产品的DataList

我们的主/ 明细报表中的最后一步是列出与选择的类别相关联的产品。要完成此目标，可以向页面添加一个 DataList 并创建一个新的名称为 ProductsByCategoryDataSource 的 ObjectDataSource 。使 ProductsByCategoryDataSource 控件从 ProductsBLL 类的 GetProductsByCategoryID(categoryID) 方法检索它的数据。由于此主/ 明细报表是只读的，在 INSERT 、UPDATE 和 DELETE 选项卡中选择 (None) 选项。

图7 ：选择GetProductsByCategoryID(categoryID) 方法

单击 Next 之后，ObjectDataSource 向导提示要求我们指定 GetProductsByCategoryID(categoryID) 方法的categoryID 参数的值的源。若要使用在DropDownList 中选择的类别的值，将 Parameter 源设置为 Control ， 将 ControlID 设置为 Categories 。

图8 ：将 categoryID参数设置为 Categories DropDownList 的值

完成 Configure Data Source 向导后，Visual Studio 将自动为 DataList 生成 ItemTemplate ，用它来显示每个数据字段的名称和值。让我们对 DataList 进行增强，使它使用一个 ItemTemplate ，该 ItemTemplate 只显示产品的名称、类别、供应商、每单位数量和价格以及在每项之间注入 <hr> 元素的 SeparatorTemplate 。我打算使用 使用 DataList 和 Repeater 控件显示数据 教程中的示例 ItemTemplate ，但是可以随意使用您认为最有视觉吸引力的任何模板标记。

进行这些更改之后，DataList 以及它的 ObjectDataSource 的标记应该与以下类似：

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" 
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False"> 
    <ItemTemplate> 
        <h4> 
            <asp:Label ID="ProductNameLabel" runat="server" 
                Text='<%# Eval("ProductName") %>' /> 
        </h4> 
        <table border="0"> 
            <tr> 
                <td class="ProductPropertyLabel">Category:</td> 
                <td><asp:Label ID="CategoryNameLabel" runat="server" 
                    Text='<%# Eval("CategoryName") %>' /></td> 
                <td class="ProductPropertyLabel">Supplier:</td> 
                <td><asp:Label ID="SupplierNameLabel" runat="server" 
                    Text='<%# Eval("SupplierName") %>' /></td> 
            </tr> 
            <tr> 
                <td class="ProductPropertyLabel">Qty/Unit:</td> 
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server" 
                    Text='<%# Eval("QuantityPerUnit") %>' /></td> 
                <td class="ProductPropertyLabel">Price:</td> 
                <td><asp:Label ID="UnitPriceLabel" runat="server" 
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td> 
            </tr> 
        </table> 
    </ItemTemplate> 
    <SeparatorTemplate> 
        <hr /> 
    </SeparatorTemplate> 
</asp:DataList> 
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}" 
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL"> 
    <SelectParameters> 
        <asp:ControlParameter ControlID="Categories" Name="categoryID" 
            PropertyName="SelectedValue" Type="Int32" /> 
    </SelectParameters> 
</asp:ObjectDataSource>

花点时间在浏览器中查看一下进度。当第一次访问页面时，属于选择的类别（饮料）的那些产品显示出来（如图 9 所示），但是更改 DropDownList 并没有更新数据。这是因为为要使 DataList 更新必须发生回传。为此，我们可以将 DropDownList 的 AutoPostBack 属性设置为 true 或者向页面添加一个 Button Web 控件。对于此教程，我选择将 DropDownList 的 AutoPostBack 属性设置为 true 。

图 9 和图 10 对正在工作的 主/明细 报表进行说明。

图9 ：当第一次访问页面时，饮料产品显示出来

图10 ：选择一种新的产品（农产品）会自动引起一个回发，更新 DataList

添加一个“-- Choose a Category --” 列表项

当第一次访问FilterByDropDownList.aspx 页时，类别 DropDownList 的第一个列表项（饮料）在默认情况下是选中的，在 DataList 中显示饮料产品。在使用 DropDownList 的主/明细筛选 教程中，我们向 DropDownList 添加一个 “-- Choose a Category --” 选项，默认情况下该选项是选中的，该选项选中时显示数据库中的所有产品。当在 GridView 中列出产品时，这样的方法是易管理的，因为每个产品行占据少量的屏幕资源。但是，使用 DataList 时，每种产品的信息使用很多的大块屏幕。我们还是添加一个 “-- Choose a Category --” 选项并使其在默认情况下选中，但是不是让它在选中时显示所有的产品，而是将其配置为不显示产品。

要向 DropDownList 添加一个新的列表项，可以转至 Properties 窗口，单击 Items 属性的椭圆形。添加一个新的文本为“-- Choose a Category --” 、值为 0 的列表项。

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

另外，还可以通过向 DropDownList 添加以下标记来添加列表项：

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

此外，需要将 DropDownList 控件的 AppendDataBoundItems 设置为 true ，因为如果将它设置为false（默认），当类别从 ObjectDataSource 绑定到 DropDownList 时，它们将重写任何手动添加的列表项。

图12 ：将 AppendDataBoundItems 属性设置为 True

为 “-- Choose a Category --” 列表项选择值 0 是因为系统中没有值为 0 的类别，因此选中 “-- Choose a Category --” 列表项时将不返回产品。要对此进行确认，花些时间通过浏览器访问页面。如图 13 所示，当开始查看页面时，“-- Choose a Category --” 列表项是选中的并且没有显示产品。

图13 ：当选中 “-- Choose a Category --” 列表项时，没有显示出产品

如果想要在选中 “-- Choose a Category --” 选项时显示所有的产品，改为使用值 -1 。敏锐的读者会记得在使用 DropDownList的 Master/Detail 筛选 教程中，我更新了 ProductsBLL 类的 GetProductsByCategoryID(categoryID) 方法以便传入的categoryID 值为 -1 时，返回所有产品的记录。

小结

当显示与层次相关的数据时，使用主/ 明细报表来呈现数据通常是有帮助的，用户可以从报表最顶层开始仔细阅读数据并可以深入到详细的数据。本教程中，我们探讨了构建一个显示所选类别的产品的简单的主 / 明细报表。这是通过使用用于类别列表的 DropDownList 和用于属于所选类别的产品的 DataList 来实现的。

在下一篇教程中，我们探讨将主报表和明细报表分离到两个页面。在第一个页面中，将显示“主”报表的列表，其中包括一个链接以查看详细信息。单击链接将使用户转到第二个页面，该页将显示所选的主报表的详细信息。

快乐编程！