使用 DropDownList 和 DataList (C#) 进行大纲/详细信息筛选
在本教程中,我们将了解如何使用 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
图 1:创建 DataListRepeaterFiltering
文件夹并添加教程 ASP.NET 页面
接下来,打开页面, Default.aspx
将“用户控件” SectionLevelTutorialListing.ascx
从 UserControls
文件夹拖到“设计”图面上。 我们在 母版页和网站导航 教程中创建的此用户控件枚举网站地图,并在项目符号列表中显示当前部分中的教程。
图 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>
图 3:更新站点地图以包含新 ASP.NET 页
步骤 2:在 DropDownList 中显示类别
我们的大纲/详细信息报表将列出 DropDownList 中的类别,所选列表项的产品在 DataList 的页中进一步显示。 然后,摆在我们面前的第一个任务是将类别显示在 DropDownList 中。 首先打开 文件夹中的页面FilterByDropDownList.aspx
DataListRepeaterFiltering
,然后将“工具箱”中的 DropDownList 拖到页面的设计器上。 接下来,将 DropDownList 的 ID
属性设置为 Categories
。 单击 DropDownList 的智能标记中的“选择数据源”链接,并创建名为 CategoriesDataSource
的新 ObjectDataSource。
图 4:添加名为 CategoriesDataSource
的新对象DataSource (单击以查看全尺寸图像)
配置新的 ObjectDataSource,以便调用 CategoriesBLL
类的 GetCategories()
方法。 配置 ObjectDataSource 后,我们仍然需要指定应在 DropDownList 中显示的数据源字段,以及应将哪个字段关联为每个列表项的值。 将 CategoryName
字段作为显示项,将 CategoryID
作为每个列表项的值。
图 5:让 DropDownList 显示 CategoryName
字段并使用 CategoryID
作为值 (单击以查看全尺寸图像)
此时,我们有一个 DropDownList 控件,该控件填充了表中的记录 Categories
, (所有记录在大约六秒) 完成。 图 6 显示了通过浏览器查看时到目前为止的进度。
图 6:Drop-Down Lists 当前类别 (单击以查看全尺寸图像)
步骤 2:添加产品数据列表
主/详细信息报表的最后一步是列出与所选类别关联的产品。 为此,请将 DataList 添加到页面,并创建名为 ProductsByCategoryDataSource
的新 ObjectDataSource。 ProductsByCategoryDataSource
让 控件从 ProductsBLL
类的 GetProductsByCategoryID(categoryID)
方法检索其数据。 由于此大纲/详细信息报表是只读的,因此请在“插入”、“更新”和“删除”选项卡中选择“ (无) ”选项。
图 7:选择 GetProductsByCategoryID(categoryID)
方法 (单击以查看全尺寸图像)
单击“下一步”后,ObjectDataSource 向导会提示我们输入方法categoryID
参数的值GetProductsByCategoryID(categoryID)
的源。 若要使用所选 categories
DropDownList 项的值,请将参数源设置为 Control,将 ControlID 设置为 Categories
。
图 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:首次访问页面时,将显示饮料产品 (单击以查看全尺寸图像)
图 10:选择新产品 (生成) 自动导致回发,更新 DataList (单击以查看全尺寸图像)
添加“-- 选择类别 --”列表项
首次访问 FilterByDropDownList.aspx
页面时,默认情况下会选中 DropDownList 的第一个列表项 (饮料) 类别,并在 DataList 中显示饮料产品。 在 “使用 DropDownList 筛选母版/详细信息筛选 ”教程中,我们向默认选择的 DropDownList 添加了“-- 选择类别 --”选项,并在选中后显示数据库中 的所有 产品。 在 GridView 中列出产品时,这种方法是可管理的,因为每个产品行占用了少量的屏幕空间。 但是,使用 DataList 时,每个产品的信息都会占用更大的屏幕区块。 让我们仍然添加“-- 选择类别 --”选项,并默认将其选中,但不要让它在选中时显示所有产品,而是对其进行配置,使其不显示任何产品。
若要将新列表项添加到 DropDownList,请转到属性窗口并单击 属性中的Items
省略号。 添加包含 Text
“-- 选择类别 --”和 Value
0
的新列表项。
图 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 时,它们将覆盖任何手动添加的列表项。
图 12:将 AppendDataBoundItems
属性设置为 True
我们之所以选择“-- 选择类别 --”列表项的值 0
,是因为系统中没有值为 的 0
类别,因此在选择“-- 选择类别--”列表项时,不会返回任何产品记录。 若要确认这一点,请花点时间通过浏览器访问页面。 如图 13 所示,最初查看页面时,“-- 选择类别 --”列表项处于选中状态,并且不显示任何产品。
图 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放置一行。
反馈
https://aka.ms/ContentUserFeedback。
即将发布:在整个 2024 年,我们将逐步淘汰作为内容反馈机制的“GitHub 问题”,并将其取代为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈