共用方式為

使用 DropDownList 控件和 GridView 的主要/詳細數據篩選 （VB）

  • 發行項

由斯科特· 米切爾

下載 PDF

在本教學課程中，我們將瞭解如何在DropDownList控件中顯示主要記錄，以及 GridView 中所選清單專案的詳細數據。

簡介

常見的報表類型是 主要/詳細數據報表，報表的開頭是顯示一組「主要」記錄。 然後，使用者可以向下切入至其中一個主要記錄，藉此檢視該主記錄的「詳細數據」。主要/詳細數據報表是可視化一對多關聯性的理想選擇，例如顯示所有類別的報表，然後允許使用者選取特定類別並顯示其相關聯的產品。 此外，主要/詳細數據報表對於顯示來自特別「寬」數據表的詳細資訊很有用（有許多數據行）。 例如，主要/詳細數據的「主要」層級可能會只顯示資料庫中產品的產品名稱和單價，並向下切入至特定產品會顯示其他產品字段（類別、供應商、每個單位的數量等等）。

有許多方式可以實作主要/詳細數據報表。 在此教學課程和接下來的三個教學課程中，我們將探討各種主要/詳細數據報告。 在本教學課程中，我們將瞭解如何在DropDownList控件中顯示主要記錄，以及 GridView 中所選清單專案的詳細數據。 特別是，本教學課程的主要/詳細數據報表會列出類別和產品資訊。

步驟 1：顯示 DropDownList 中的類別

我們的主要/詳細數據報表會列出DropDownList中的類別，且所選清單專案的產品會在 GridView 的頁面中進一步顯示。 然後，我們前面的第一項工作是讓類別顯示在DropDownList中。 FilterByDropDownList.aspx開啟資料夾中的頁面Filtering，將 [工具箱] 中的 DropDownList 拖曳到頁面的設計工具上，並將其屬性設定ID為 Categories。 接下來，按兩下DropDownList智慧標記中的 [選擇資料源] 連結。 這會顯示 [數據源組態精靈]。

指定DropDownList的數據源

圖 1：指定 DropDownList 的數據源 （按兩下以檢視完整大小的影像）

選擇加入名為 CategoriesDataSource 的新 ObjectDataSource，以叫用 CategoriesBLL 類別的 GetCategories() 方法。

新增名為 CategoriesDataSource 的新 ObjectDataSource

圖 2：新增名為 CategoriesDataSource 的 ObjectDataSource （按兩下以檢視完整大小的影像）

選擇使用 CategoriesBLL 類別

圖 3：選擇使用 CategoriesBLL 類別 （按兩下以檢視完整大小的影像）

將 ObjectDataSource 設定為使用 GetCategories（） 方法

圖 4：將 ObjectDataSource 設定為使用 GetCategories() 方法 （按兩下以檢視完整大小的影像）

設定 ObjectDataSource 之後，我們仍然需要指定DropDownList 中應該顯示的數據源欄位，以及應該將哪一個字段關聯為清單專案的值。 讓 CategoryName 欄位顯示為顯示，並 CategoryID 作為每個清單專案的值。

讓DropDownList顯示CategoryName欄位並使用 CategoryID 做為值

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

此時，我們有一個DropDownList控件，其中包含數據表中的記錄 Categories （全部在大約六秒內完成）。 圖 6 顯示到目前為止透過瀏覽器檢視時的進度。

下拉式清單列出目前的類別

圖 6：下拉式清單目前類別 （按兩下以檢視完整大小的影像）

步驟 2：新增 Products GridView

主要/詳細數據報告中的最後一個步驟是列出與所選類別相關聯的產品。 若要達成此目的，請將 GridView 新增至頁面，並建立名為 productsDataSource的新 ObjectDataSource。 productsDataSource讓控件從 ProductsBLL 類別的 GetProductsByCategoryID(categoryID) 方法擷取其數據。

選取 GetProductsByCategoryID（categoryID） 方法

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

選擇此方法之後，ObjectDataSource 精靈會提示我們輸入方法 categoryID 參數的值。 若要使用所選 categories 取 DropDownList 專案的值，請將 [參數來源] 設定為 [控件]，並將 ControlID 設定為 Categories。

將 categoryID 參數設定為 Categories DropDownList 的值

圖 8：將 categoryID 參數設定為 DropDownList 的值 Categories （按兩下以檢視完整大小的影像）

花點時間查看瀏覽器中的進度。 第一次流覽頁面時，會顯示這些產品屬於所選類別（飲料）（如圖 9 所示），但變更 DropDownList 並不會更新數據。 這是因為 GridView 必須進行回傳才能更新。 若要達成此目的，我們有兩個選項（這兩個選項都不需要撰寫任何程式代碼）：

  • 將DropDownList的AutoPostBack 屬性類別設定為 True 。（您可以在 DropDownList 的智慧標記中檢查 [啟用 AutoPostBack] 選項來完成這項作業。每當用戶變更 DropDownList 選取的專案時，這會觸發回傳。 因此，當使用者從DropDownList選取新類別時，回傳將會隨之發生，且 GridView 會更新為新選取類別的產品。 （這是我在本教學課程中使用的方法。
  • 在DropDownList旁新增Button Web控件。 Text將其 屬性設定為 Refresh 或類似專案。 使用此方法時，用戶必須選取新的類別，然後按兩下 [按鈕]。 按兩下 [按鈕] 會導致回傳並更新 GridView，以列出所選類別的這些產品。

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

第一次瀏覽頁面時，會顯示飲料產品

圖 9：第一次瀏覽頁面時，會顯示飲料產品（按兩下以檢視全尺寸影像）

選取新產品 （產生） 會自動造成回傳，更新 GridView

圖 10：選取新產品 （產生） 自動造成回傳、更新 GridView （按兩下以檢視完整大小的影像）

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

第一次瀏覽 FilterByDropDownList.aspx 頁面時，預設會選取DropDownList的第一個清單專案（飲料）類別，並在 GridView 中顯示飲料產品。 我們可能不會顯示第一個類別的產品，而是想要改為選取DropDownList專案，指出類似 「-- 選擇類別 --」。

若要將新的清單專案新增至DropDownList，請移至 屬性視窗，然後按兩下屬性中的Items省略號。 使用 「-- Choose a Category --」 和 來Value-1新增清單專案Text。

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

圖 11：新增 -- 選擇類別 -- 清單專案 （按一下以檢視完整大小的影像）

或者，您可以將下列標記新增至DropDownList來新增清單專案：

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

此外，我們需要將DropDownList控件的 AppendDataBoundItems 設為True，因為當類別系結至 ObjectDataSource 中的DropDownList時，如果 AppendDataBoundItems 不是 True，則會覆寫任何手動新增的清單專案。

將 AppendDataBoundItems 屬性設定為 True

圖 12：將 AppendDataBoundItems 屬性設定為 True

在這些變更之後，第一次瀏覽頁面時，會選取 [選擇類別] --“ 選項，且不會顯示任何產品。

在 [初始頁面載入未顯示任何產品] 上

圖 13：在初始頁面載入未顯示任何產品 （按兩下以檢視完整大小的影像）

因為已選取 「-- Choose a Category --」 列表專案，因此不會顯示任何產品的原因是其值為 -1 ，而且資料庫中 CategoryID 沒有具有的 -1產品。 如果這是您想要的行為，您此時就會完成！ 不過，如果您想要在選取 「-- Choose a Category --」 清單項目時顯示 所有 類別，請返回 ProductsBLL 類別並自定義 GetProductsByCategoryID(categoryID) 方法，以便在 GetProducts() 傳入 categoryID 的參數小於零時叫用 方法：

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

此處所使用的技術類似於我們用來在宣告式參數教學課程中顯示所有供應商的方法，不過在此範例中，我們使用的值-1來指出應該擷取所有記錄，而不是 Nothing。 這是因為 categoryID 方法的參數 GetProductsByCategoryID(categoryID) 預期為傳入的整數值，而在宣告式參數教學課程中，我們會傳入字元串輸入參數。

圖 14 顯示選取 [-- 選擇類別 - - ] 選項時的螢幕快照 FilterByDropDownList.aspx 。 在這裡，所有產品預設都會顯示，而且使用者可以選擇特定類別來縮小顯示範圍。

所有產品現在預設都會列出

圖 14：所有產品現在預設都會列出 （按兩下以檢視完整大小的影像）

摘要

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

在下一個教學課程中，我們將使用兩個DropDownLists，進一步採取DropDownList介面。

快樂的程序設計！

關於作者

斯科特·米切爾，七本 ASP/ASP.NET 書籍和 4GuysFromRolla.com 創始人的作者，自1998年以來一直與Microsoft Web 技術合作。 斯科特擔任獨立顧問、教練和作家。 他的最新書是 山姆斯在24小時內 ASP.NET 2.0。 他可以到達 mitchell@4GuysFromRolla.com， 或通過他的博客，可以在 找到 http://ScottOnWriting.NET。

上一個下一個