使用DropDownList控件和 GridView (C#) 進行主要/詳細數據篩選

  • 發行項

作者 ：Scott Mitchell

下載 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 (Click 以檢視完整大小的影像)

選擇使用 CategoriesBLL 類別

圖 3：選擇使用 CategoriesBLL 類別 (按鍵即可檢視完整大小的影像)

將 ObjectDataSource 設定為使用 GetCategories () 方法

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

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

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

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

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

目前類別 Drop-Down 清單

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

步驟 2：新增 Products GridView

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

選取 GetProductsByCategoryID (categoryID) 方法

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

選擇此方法之後，ObjectDataSource 精靈會提示我們輸入方法 categoryID 參數的值。 若要使用所選 categories 取 DropDownList 專案的值，請將 [參數來源] 設定為 Control，並將 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專案，其顯示類似 “-- Choose a Category --”。

若要將新的清單專案新增至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 Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

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

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

所有產品預設都會列出

圖 14：依預設會列出所有產品， (按兩下即可檢視完整大小的影像)

摘要

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

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

快樂的程序設計！

關於作者

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

下一步