使用 DropDownList 和 DataList (VB) 进行大纲/详细信息筛选

  • 项目

作者 ：Scott Mitchell

下载 PDF

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

简介

在前面的使用 DropDownList 筛选母版/详细信息筛选 教程中，我们首先使用 GridView 创建的大纲/详细信息报表首先显示一组“主”记录。 然后，用户可以向下钻取到其中一条主记录，从而查看该主记录的“详细信息”。大纲/详细信息报表是可视化一对多关系和显示来自特别“宽”表的详细信息 (具有大量列) 表的理想选择。 我们在前面的教程中探索了如何使用 GridView 和 DetailsView 控件实现主报表/详细信息报表。 在本教程和接下来的两个教程中，我们将重新审视这些概念，但重点在于改用 DataList 和 Repeater 控件。

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

步骤 1：添加大纲/详细信息教程网页

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

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

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

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

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

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

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

为了使项目符号列表显示我们将创建的大纲/详细信息教程，我们需要将它们添加到站点地图。 打开 文件， 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.aspxDataListRepeaterFiltering，然后将“工具箱”中的 DropDownList 拖到页面的设计器上。 接下来，将 DropDownList 的 ID 属性设置为 Categories。 单击 DropDownList 的智能标记中的“选择数据源”链接，并创建名为 CategoriesDataSource的新 ObjectDataSource。

添加名为 CategoriesDataSource 的新 ObjectDataSource

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

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

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

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

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

当前类别 Drop-Down Lists

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

步骤 2：添加产品数据列表

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

选择 GetProductsByCategoryID (categoryID) 方法

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

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

将 categoryID 参数设置为 Categories DropDownList 的值

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

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

进行这些更改后，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：首次访问页面时，将显示饮料产品 (单击以查看全尺寸图像)

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

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

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

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

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

添加

图 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 控件的 AppendDataBoundItems 设置为 true ，因为如果它设置为 false (默认) ，则当类别从 ObjectDataSource 绑定到 DropDownList 时，它们将覆盖任何手动添加的列表项。

将 AppendDataBoundItems 属性设置为 True

图 12：将 AppendDataBoundItems 属性设置为 True

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

在 Windows 计算机上安装

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

如果想要在选择“---选择类别--”选项时显示 所有 产品，请改用值 -1 。 精明的读者会记得，在 使用 DropDownList 筛选母版/详细信息筛选 教程中，我们更新 ProductsBLL 了类的 GetProductsByCategoryID(categoryID) 方法，以便如果 categoryID 传入值 -1 ，则返回所有产品记录。

总结

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

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

编程愉快！

关于作者

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

特别感谢...

本教程系列由许多有用的审阅者审阅。 本教程的首席审阅者是 Randy Schmidt。 有兴趣查看我即将发布的 MSDN 文章？ 如果是，请在 处mitchell@4GuysFromRolla.com放置一行。

上一页下一页