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

[アーティクル]
05/30/2024

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

はじめに

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

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

手順 1: DropDownList 内でのカテゴリの表示

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

図 1: DropDownList のデータソースを指定する (クリックするとフルサイズの画像が表示されます)

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

図 2: CategoriesDataSource という名前の新しい ObjectDataSource を追加します (クリックするとフルサイズの画像が表示されます)

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

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

ObjectDataSource を構成した後も、DropDownList 内に表示する必要がある、およびリスト項目の値として関連付ける必要があるデータソースフィールドを指定する必要があります。各リスト項目の表示として CategoryName フィールドを、値として CategoryID を使用します。

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

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

図 6: 現在のカテゴリのドロップダウン一覧表示 (クリックするとフルサイズの画像が表示されます)

手順 2: Products GridView の追加

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

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

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

図 8: categoryID パラメーターを Categories DropDownList の値に設定する (クリックするとフルサイズの画像が表示されます)

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

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

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

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

図 10: 新しい製品 (農畜産物) を選択すると自動的にポストバックが発生し、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>

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

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

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

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

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

[-- カテゴリの選択 --] リスト項目が選択されている場合に製品が表示されない理由は、その値が -1 であり、データベース内には CategoryID が -1 の製品が存在しないためです。これが期待した動作である場合は、この時点で完了です。しかし、[-- カテゴリの選択 --] リスト項目が選択されている場合にカテゴリの "すべて" を表示する場合は、ProductsBLL クラスに戻って GetProductsByCategoryID(categoryID) メソッドをカスタマイズし、渡された categoryID パラメーターがゼロ未満の場合に GetProducts() メソッドを呼び出すようにします。

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

ここで使用した手法は、宣言パラメーターのチュートリアルの中ですべてのサプライヤーを表示するために使用したアプローチに似ていますが、この例では null とは対照的に、すべてのレコードを取得する必要があることを示す値の -1 を使用しています。これは、GetProductsByCategoryID(categoryID) メソッドの categoryID パラメーターが整数値として渡されることが想定されるのに対し、宣言パラメーターのチュートリアルでは文字列の入力パラメーターを渡していたためです。

図 14 は、[-- カテゴリの選択 --] オプションが選択されている場合の FilterByDropDownList.aspx のスクリーンショットを示しています。ここでは、すべての製品が既定で表示され、ユーザーは特定のカテゴリを選択して表示を絞り込むことができます。

図 14: すべての製品が既定で一覧表示されるようになりました (クリックすると、フルサイズの画像が表示されます)

まとめ

階層的に関連するデータを表示する場合、多くの場合、マスター/詳細レポートを使用したデータの表示が役立ちます。このレポートにより、ユーザーは階層の上部からデータを確認し、詳細をドリルダウンできるからです。このチュートリアルでは、選択したカテゴリの製品を示す単純なマスター/詳細レポートの作成について説明しました。これは、カテゴリの一覧に DropDownList を使用し、選択したカテゴリに属する製品に GridView を使用して実現しました。

次のチュートリアルでは、2 つの DropDownList を使用して、DropDownList のインターフェイスをもう 1 歩進めます。

プログラミングに満足!

著者について

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

次の方法で共有