DropDownList コントロールと GridView を使用したマスター/詳細フィルター処理 (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、DropDownList コントロールにマスター レコードを表示する方法と、GridView で選択したリスト アイテムの詳細を表示する方法について説明します。

はじめに

レポートの一般的な種類は 、マスター/詳細レポートです。このレポートは、いくつかの "マスター" レコードのセットを表示することによって開始されます。 その後、ユーザーはいずれかのマスター レコードにドリルダウンして、そのマスター レコードの "詳細" を表示できます。マスター/詳細レポートは、すべてのカテゴリを示すレポートなど、一対多のリレーションシップを視覚化し、ユーザーが特定のカテゴリを選択してその関連製品を表示できるようにする場合に最適です。 さらに、マスター/詳細レポートは、特に "幅の広い" テーブル (列が多いテーブル) の詳細情報を表示するのに役立ちます。 たとえば、マスター/詳細レポートの "マスター" レベルには、データベース内の製品の製品名と単価だけが表示され、特定の製品にドリルダウンすると、追加の製品フィールド (カテゴリ、仕入先、単位あたりの数量など) が表示されます。

マスター/詳細レポートを実装する方法は多数あります。 このチュートリアルと次の 3 つのチュートリアルでは、さまざまなマスター/詳細レポートについて説明します。 このチュートリアルでは、 DropDownList コントロール にマスター レコードを表示する方法と、GridView で選択したリスト アイテムの詳細を表示する方法について説明します。 特に、このチュートリアルのマスター/詳細レポートには、カテゴリと製品情報が一覧表示されます。

手順 1: DropDownList にカテゴリを表示する

マスター/詳細レポートでは、DropDownList のカテゴリが一覧表示され、選択したリスト アイテムの製品が GridView のページの下に表示されます。 次に、最初のタスクは、カテゴリを DropDownList に表示することです。 フォルダー内のページをFilterByDropDownList.aspxFiltering開き、ツールボックスからページのデザイナーに DropDownList をドラッグし、そのプロパティを ID にCategories設定します。 次に、DropDownList のスマート タグから [データ ソースの選択] リンクをクリックします。 これにより、データ ソース構成ウィザードが表示されます。

DropDownList のデータ ソースを指定する

図 1: DropDownList のデータ ソースを指定する (フルサイズの画像を表示する場合はクリックします)

クラスGetCategories()の メソッドを呼び出す という名前CategoriesDataSourceの新しい ObjectDataSource をCategoriesBLL追加することを選択します。

CategoriesDataSource という名前の新しい ObjectDataSource を追加する

図 2: 名前付きの CategoriesDataSource 新しい ObjectDataSource を追加する (フルサイズの画像を表示する場合はクリックします)

CategoriesBLL クラスの使用を選択する

図 3: クラスの使用を選択する CategoriesBLL (クリックするとフルサイズの画像が表示されます)

GetCategories() メソッドを使用するように ObjectDataSource を構成する

図 4: メソッドを使用 GetCategories() するように ObjectDataSource を構成する (フルサイズの画像を表示するにはクリックします)

ObjectDataSource を構成した後も、DropDownList に表示するデータ ソース フィールドと、リスト アイテムの値として関連付けるデータ ソース フィールドを指定する必要があります。 フィールドを CategoryName 表示として、 CategoryID 各リスト アイテムの値として指定します。

DropDownList に CategoryName フィールドを表示し、値として CategoryID を使用する

図 5: DropDownList にフィールドを CategoryName 表示し、値として使用 CategoryID する (フルサイズの画像を表示する場合にクリックします)

この時点で、テーブルの Categories レコードが設定された DropDownList コントロールがあります (すべてが約 6 秒で実行されます)。 図 6 は、ブラウザーから見たときのこれまでの進行状況を示しています。

Drop-Downは現在のカテゴリを一覧表示します

図 6: Drop-Down現在のカテゴリの一覧 (フルサイズの画像を表示する 場合はクリックします)

手順 2: Products GridView の追加

マスター/詳細レポートの最後の手順は、選択したカテゴリに関連付けられている製品を一覧表示することです。 これを実現するには、ページに GridView を追加し、 という名前 productsDataSourceの新しい ObjectDataSource を作成します。 コントロールに、クラスGetProductsByCategoryID(categoryID)の productsDataSource メソッドからデータをProductsBLL収集させます。

GetProductsByCategoryID(categoryID) メソッドを選択します

図 7: メソッドを選択します GetProductsByCategoryID(categoryID) (クリックするとフルサイズの画像が表示されます)

このメソッドを選択すると、ObjectDataSource ウィザードによって、メソッド categoryID のパラメーターの値の入力が求められます。 選択した categories DropDownList 項目の値を使用するには、パラメーター ソースを Control に、ControlID を に Categories設定します。

categoryID パラメーターを Categories DropDownList の値に設定します

図 8: パラメーターを categoryID DropDownList の値に Categories 設定します (フルサイズの画像を表示する場合は、ここをクリックします)

ブラウザーで進行状況をチェックしてください。 最初にページにアクセスすると、選択したカテゴリ (飲料) に属する製品が表示されますが (図 9 を参照)、DropDownList を変更してもデータは更新されません。 これは、GridView を更新するにはポストバックが発生する必要があるためです。 これを実現するには、次の 2 つのオプションがあります (どちらもコードを記述する必要はありません)。

  • カテゴリ DropDownList のAutoPostBack プロパティを True に 設定します (これを実現するには、DropDownList のスマート タグで [自動ポストバックを有効にする] オプションをオンにします)。これにより、DropDownList の選択した項目がユーザーによって変更されるたびにポストバックがトリガーされます。 したがって、ユーザーが DropDownList から新しいカテゴリを選択すると、ポストバックが実行され、GridView が新しく選択されたカテゴリの製品で更新されます。 (これは、このチュートリアルで使用したアプローチです)。
  • DropDownList の横にボタン Web コントロールを追加します。 そのプロパティを Text Refresh などに設定します。 この方法では、ユーザーは新しいカテゴリを選択し、[ボタン] をクリックする必要があります。 ボタンをクリックするとポストバックが発生し、GridView が更新されて、選択したカテゴリの製品が一覧表示されます。

図 9 と図 10 は、マスター/詳細レポートの動作を示しています。

最初にページにアクセスすると、飲料製品が表示されます

図 9: 最初にページにアクセスすると、飲料製品が表示されます (クリックするとフルサイズの画像が表示されます)

新しい製品 (生成) を選択すると、自動的にポストバックが発生し、GridView が更新されます

図 10: 新しい製品 (生成) を選択すると自動的に PostBack が発生し、GridView が更新される (フルサイズの画像を表示する場合をクリックします)

"-- カテゴリの選択 --" リスト アイテムの追加

最初にページに FilterByDropDownList.aspx アクセスすると、カテゴリ DropDownList の最初のリスト アイテム (飲料) が既定で選択され、GridView に飲料製品が表示されます。 最初のカテゴリの製品を表示するのではなく、"-- カテゴリの選択 --" のような DropDownList 項目を選択することをお勧めします。

DropDownList に新しいリスト アイテムを追加するには、プロパティ ウィンドウに移動し、 プロパティの省略記号をItemsクリックします。 "-- カテゴリの選択 --" と を Text 含む新しいリスト アイテムを追加します Value-1。

[追加] -- カテゴリの選択 -- リスト アイテム

図 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>

さらに、カテゴリが ObjectDataSource から DropDownList にバインドされている場合、手動で追加されたリスト アイテムが True でない場合AppendDataBoundItemsは上書きされるため、DropDownList コントロールAppendDataBoundItemsの を True に設定する必要があります。

AppendDataBoundItems プロパティを True に設定します

図 12: プロパティを AppendDataBoundItems True に設定する

これらの変更後、最初にページにアクセスすると、"-- カテゴリの選択 --" オプションが選択され、製品は表示されません。

初期ページ読み込み時に製品が表示されない

図 13: 初期ページ読み込み時に製品が表示されない (クリックするとフルサイズの画像が表示されます)

"-- カテゴリの選択 --" リスト アイテムが選択されている場合に製品が表示されない理由は、その値が -1 であり、 が の-1製品がデータベースCategoryIDにないためです。 これが目的の動作である場合は、この時点で完了です。 ただし、[カテゴリの選択] リスト 項目が選択されているときにすべてのカテゴリを表示する場合は、 クラスにProductsBLL戻り、渡されたcategoryIDパラメーターが 0 未満の場合にメソッドを呼び出GetProducts()すようにメソッドをカスタマイズGetProductsByCategoryID(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 を使用して実現しました。

次の チュートリアル では、2 つの DropDownList を使用して、DropDownList インターフェイスをさらに 1 ステップ進めます。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

次へ