通过

使用 DropDownList 和 DataList 进行大纲/详细信息筛选 （C#）

  • 项目

作者 ：斯科特·米切尔

下载 PDF

在本教程中，我们将了解如何使用 DropDownList 在单个网页中显示主报表/详细信息报表，以显示“master”记录和 DataList 以显示“详细信息”。

介绍

在前面的 Master/Detail Filtering With a DropDownList 教程中使用 GridView 创建的主/详细信息报表首先显示一组“master”记录。 然后，用户可以向下钻取到其中一个主记录，从而查看主记录的“详细信息”。主报表/详细信息报表是可视化一对多关系以及显示来自特别“宽”表的详细信息（包含大量列）的理想选择。 我们探讨了如何使用上一教程中的 GridView 和 DetailsView 控件实现主报表/详细信息报表。 在本教程和接下来的两个教程中，我们将重新审视这些概念，但重点介绍如何改用 DataList 和 Repeater 控件。

在本教程中，我们将了解如何使用 DropDownList 来包含“master”记录，其中“详细信息”记录显示在 DataList 中。

步骤 1：添加母版/详细信息教程网页

在开始本教程之前，让我们先花点时间添加本教程所需的文件夹和 ASP.NET 页面，接下来的两个操作是使用 DataList 和 Repeater 控件处理主/详细信息报表。 首先在名为 <a0/a0> 的项目中创建一个新文件夹。 接下来，将以下五个 ASP.NET 页添加到此文件夹中，其中所有页面都配置为使用母版页 Site.master：

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

创建 DataListRepeaterFiltering 文件夹并添加教程 ASP.NET 页面

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

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

将 SectionLevelTutorialListing.ascx 用户控件添加到 Default.aspx

图 2：将用户控件Default.aspx添加到 SectionLevelTutorialListing.ascx （单击以查看全尺寸图像）

为了使项目符号列表显示要创建的主/详细信息教程，需要将它们添加到站点地图。 Web.sitemap打开该文件，并在“使用 DataList 和 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>

更新网站地图以包括新的 ASP.NET 页面

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

步骤 2：在 DropDownList 中显示类别

我们的主/详细信息报表将列出 DropDownList 中的类别，其中所选列表项的产品在 DataList 的页面中进一步显示。 然后，我们前面的第一项任务是在 DropDownList 中显示类别。 首先在 FilterByDropDownList.aspx 文件夹中打开页面 DataListRepeaterFiltering ，然后将一个 DropDownList 从工具箱拖动到页面的设计器上。 接下来，将 DropDownList 的属性 ID 设置为 Categories. 单击 DropDownList 智能标记中的“选择数据源”链接，并创建名为 CategoriesDataSource 的新 ObjectDataSource。

添加名为 CategoriesDataSource 的新 ObjectDataSource

图 4：添加名为 CategoriesDataSource 的新 ObjectDataSource（单击以查看全尺寸图像）

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

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

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

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

下拉列表列出当前类别

图 6：下拉列表列出当前类别（单击以查看全尺寸图像）

步骤 2：添加产品 DataList

主/详细信息报告中的最后一步是列出与所选类别关联的产品。 为此，请将 DataList 添加到页面并创建名为 ProductsByCategoryDataSource 的新 ObjectDataSource。 让 ProductsByCategoryDataSource 控件从 ProductsBLL 类 GetProductsByCategoryID(categoryID) 的方法中检索其数据。 由于此主/详细信息报表是只读的，因此请在 INSERT、UPDATE 和 DELETE 选项卡中选择“无”选项。

选择 GetProductsByCategoryID（categoryID） 方法

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

单击“下一步”后，ObjectDataSource 向导会提示我们输入方法categoryID参数的值GetProductsByCategoryID(categoryID)的源。 若要使用所选 categories DropDownList 项的值，请将参数源设置为 Control，并将 ControlID 设置为 Categories。

将 categoryID 参数设置为 Categories DropDownList 的值

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

完成“配置数据源”向导后，Visual Studio 将自动生成一个 ItemTemplate 用于显示每个数据字段的名称和值的 DataList。 让我们增强 DataList，以便改用ItemTemplate仅显示产品的名称、类别、供应商、单位数量和价格，以及在每个项之间注入<hr>元素的元素SeparatorTemplate。 我要在 ItemTemplate DataList 和 Repeater Controls 教程中使用“显示数据”中的示例，但可以随意使用最有视觉吸引力的任何模板标记。

进行这些更改后，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 的属性AutoPostBacktrue设置为或向页面添加 Button Web 控件。 在本教程中，我已选择将 DropDownList AutoPostBack 的属性设置为 true。

图 9 和 10 说明了操作中的主/详细信息报告。

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

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

选择新产品（生成）自动导致 PostBack，更新 DataList

图 10：选择新产品（生成）自动导致 PostBack，更新 DataList（单击以查看全尺寸图像）

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

首次访问 FilterByDropDownList.aspx 页面时，默认情况下会选择 DropDownList 的第一个列表项（饮料）类别，并在 DataList 中显示饮料产品。 在 Master/Detail Filtering With a DropDownList 教程中，我们向默认选择的 DropDownList 添加了“-- 选择类别 --”选项，并在选中时显示 数据库中的所有 产品。 在 GridView 中列出产品时，这种方法是可以管理的，因为每个产品行占用了少量的屏幕空间。 但是，使用 DataList 时，每个产品的信息会占用大得多的屏幕区块。 我们仍然添加一个“-- 选择类别 --”选项，并默认选中它，但不要让它显示所有产品，让我们对其进行配置，使其不显示任何产品。

若要向 DropDownList 添加新列表项，请转到属性窗口并单击属性中的Items省略号。 使用“-- 选择类别 --”和 <0a0/> 添加新的列表项Text。

添加

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

或者，可以通过将以下标记添加到 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 控件AppendDataBoundItemstrue设置为，因为如果它设置为 false （默认值），则当类别绑定到 ObjectDataSource 中的 DropDownList 时，它们将覆盖任何手动添加的列表项。

将 AppendDataBoundItems 属性设置为 True

图 12：将 AppendDataBoundItems 属性设置为 True

之所以选择“-- 选择类别--”列表项的值 0 是因为系统中没有值为 0的类别，因此在选择“--选择类别”列表项时，不会返回任何产品记录。 若要确认这一点，请花点时间通过浏览器访问页面。 如图 13 所示，最初查看页面时，选择了“-- 选择类别 --”列表项，并且不显示任何产品。

何时

图 13：当“-选择类别--”列表项处于选中状态时，不会显示任何产品（单击以查看全尺寸图像）

如果选择“-- 选择类别 --”选项，则使用值-1而不是显示所有产品。 精明的读者会回想一下，在 Master/Detail Filtering With a DropDownList 教程中，我们更新ProductsBLL了类GetProductsByCategoryID(categoryID)的方法，以便在传入某个categoryID值-1时返回所有产品记录。

总结

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

在下一个教程中，我们将介绍在两个页面中分隔主记录和详细信息记录。 在第一页中，将显示“master”记录列表，其中包含用于查看详细信息的链接。 单击链接会将用户移动到第二页，该页面将显示所选主记录的详细信息。

快乐编程！

关于作者

斯科特·米切尔，七本 ASP/ASP.NET 书籍的作者和 4GuysFromRolla.com 的创始人，自1998年以来一直在与Microsoft Web 技术合作。 斯科特担任独立顾问、教练和作家。 他的最新书是 山姆斯在24小时内 ASP.NET 2.0。 他可以通过他的博客联系到mitchell@4GuysFromRolla.com他，可以在该博客中找到http://ScottOnWriting.NET。

特别感谢...

本教程系列由许多有用的审阅者审阅。 本教程的主要审阅者是 Randy Schmidt。 有兴趣查看即将发布的 MSDN 文章？ 如果是这样，请把我扔一条线。mitchell@4GuysFromRolla.com

下一页