使用 DropDownList 和 DataList (VB) 的主要/詳細數據篩選

發行項
03/08/2024

在本教學課程中，我們將瞭解如何使用DropDownLists 在單一網頁中顯示主報表/詳細數據報表，以顯示「主要」記錄和DataList以顯示「詳細數據」。

簡介

我們在先前的 Master/Detail Filtering With a 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頁面，然後將 [使用者控件] 從UserControls資料夾拖曳SectionLevelTutorialListing.ascx到 [設計] 介面。我們在主版頁面和網站導覽教學課程中建立的這個使用者控件會列舉網站地圖，並在點符清單中顯示目前區段的教學課程。

圖 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中。從開啟資料夾中的頁面DataListRepeaterFiltering開始，FilterByDropDownList.aspx並將DropDownList 從 [工具箱] 拖曳至頁面的設計工具。接下來，將 DropDownList 的 ID 屬性設定為 Categories。按兩下DropDownList智慧標記中的 [選擇資料源] 連結，然後建立名為 CategoriesDataSource的新 ObjectDataSource。

圖 4：新增名為 CategoriesDataSource (的 ObjectDataSource 按兩下即可檢視大小完整的影像)

設定新的 ObjectDataSource，使其叫用 CategoriesBLL 類別的 GetCategories() 方法。設定 ObjectDataSource 之後，我們仍然需要指定DropDownList 中應該顯示的數據源欄位，以及哪些數據源字段應該與每個清單專案的值相關聯。 CategoryName讓欄位顯示為顯示，以及CategoryID作為每個清單專案的值。

圖 5：讓 DropDownList 顯示 CategoryName 欄位並使用 CategoryID 作為值 (按兩下即可檢視完整大小的影像)

此時，我們有一個DropDownList控件，其中會填入數據表中的 Categories 記錄， (大約六秒) 完成。圖 6 顯示我們到目前為止透過瀏覽器檢視時的進度。

圖 6：Drop-Down 清單目前類別 (按兩下以檢視完整大小的影像)

步驟 2：新增產品 DataList

我們主要/詳細數據報表的最後一個步驟是列出與所選類別相關聯的產品。若要完成此作業，請將 DataList 新增至頁面，並建立名為 ProductsByCategoryDataSource的新 ObjectDataSource。 ProductsByCategoryDataSource讓控件從 ProductsBLL 類別的 GetProductsByCategoryID(categoryID) 方法擷取其數據。由於此主要/詳細數據報表是只讀的，請在 [插入]、[更新] 和 [刪除] 索引標籤中選擇 ([無) ] 選項。

圖 7：選取 GetProductsByCategoryID(categoryID) 方法 (按兩下以檢視完整大小的影像)

按兩下 [下一步] 之後，ObjectDataSource 精靈會提示我們輸入方法categoryID參數值GetProductsByCategoryID(categoryID)的來源。若要使用所選 categories 取 DropDownList 專案的值，請將 [參數來源] 設定為 Control，並將 ControlID 設定為 Categories。

圖 8：將 categoryID 參數設定為 DropDownList 的值 Categories ， (按兩下即可檢視大小完整的影像)

完成 [設定數據源精靈] 之後，Visual Studio 會自動為 DataList 產生， ItemTemplate 以顯示每個數據欄位的名稱和值。讓我們增強 DataList，改為使用 ItemTemplate ，只顯示產品名稱、類別、供應商、每個單位的數量和價格，以及 SeparatorTemplate 在每個項目之間插入 <hr> 元素的。我將會使用 ItemTemplateDataList 和 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的 AutoPostBack 屬性設定為 true ，或將Button Web控件新增至頁面。在本教學課程中，我已選擇將DropDownList的 AutoPostBack 屬性設定為 true。

圖 9 和 10 說明主要/詳細數據報表的運作情形。

圖 9：第一次瀏覽頁面時，[ (按兩下] 即可檢視完整大小的影像)

圖 10：選取新產品 ([產生) 自動造成回傳，更新 DataList (按兩下即可檢視完整大小的影像)

新增 “-- 選擇類別 --” 列表專案

第一次瀏覽 FilterByDropDownList.aspx 頁面時，預設會選取DropDownList 第一個清單專案 () 類別，並在DataList中顯示配料產品。在 [使用 DropDownList 篩選主要/詳細數據篩選 ] 教學課程中，我們已將 “-- Choose a Category --” 選項新增至預設選取的 DropDownList，並在選取時顯示資料庫中 的所有 產品。在 GridView 中列出產品時，可以管理這種方法，因為每個產品數據列佔用少量的螢幕實際空間。不過，使用 DataList 時，每個產品的信息都會耗用較大的螢幕區塊。讓我們仍新增 [-- 選擇類別 --] 選項，並預設選取它，但不要在選取時顯示所有產品，讓我們將其設定為不顯示任何產品。

若要將新的清單專案新增至DropDownList，請移至屬性視窗，然後按兩下屬性中的Items省略號。使用「-- Choose a Category --」和 Value0新增清單專案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

我們為「-- Choose a Category --」清單項目選擇值00的原因是系統中沒有值為的類別，因此在選取 [-- 選擇類別 --] 列表專案時，不會傳回任何產品記錄。若要確認這一點，請花一點時間瀏覽網頁瀏覽瀏覽器。如圖 13 所示，一開始檢視頁面時，會選取 [-- 選擇類別 --] 列表專案，且不會顯示任何產品。

圖 13：當 [選擇類別] --“ 列表專案已選取時，按兩下即可檢視完整大小的影像 (按兩下即可檢視完整大小的影像)

如果您想要在選取 [-- 選擇類別 --] 選項時顯示所有產品，請改用的值 -1 。 astute 讀取器會回想一下，在 Master/Detail Filtering With a DropDownList 教學課程中，我們更新 ProductsBLL 了類別的 GetProductsByCategoryID(categoryID) 方法，如此一 categoryID 來，如果傳入的值 -1 ，則會傳回所有產品記錄。

摘要

顯示階層式相關數據時，通常有助於使用主要/詳細數據報告來呈現數據，讓使用者可以從中開始從階層頂端查看數據，並向下切入到詳細數據。在本教學課程中，我們檢查了建置顯示所選類別產品之簡單主要/詳細數據報表。這是使用DropDownList作為類別清單，以及屬於所選類別之產品的DataList來完成。

在下一個教學課程中，我們將探討將主要和詳細數據記錄分成兩個頁面。在第一頁中，會顯示「主要」記錄清單，並顯示可檢視詳細數據的連結。按兩下連結會讓使用者前往第二個頁面，以顯示所選主記錄的詳細數據。

快樂的程序設計！

關於作者

Scott Mitchell 是 1998 年以來，1998 年與 Microsoft Web 技術合作的七篇 ASP/ASP.NET 書籍和 4GuysFromRolla.com 作者。 Scott 是獨立顧問、訓練員和作者。他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 2.0。您可以透過mitchell@4GuysFromRolla.com部落格來連線到，您可以在找到http://ScottOnWriting.NET。

特別感謝...

本教學課程系列是由許多實用的檢閱者檢閱。本教學課程的首席檢閱者是 Randy Schmidt。有興趣檢閱即將推出的 MSDN 文章嗎？如果是，請將一行 mitchell@4GuysFromRolla.com放在。

上一個下一個

共用方式為