カスケーディング リストは一緒に動作する複数のリストのセットです。エンドユーザーは最初に 1 番目のリストから項目を選択します。このアクションによって、1 番目のリストの選択に基づいて 2 番目のリストがフィルタリングされます。後続の選択によって後続のリストが同様にフィルタリングされます。WebDropDown コントロールの SelectionChanging または SelectionChanged クライアント イベントを使用して、任意の数の WebDropDown™ をカスケードできます。
この詳細なガイドでは、Northwind データベースの Products テーブルにバインドされる WebDropDown コントロールは、Northwind データベースの Categories テーブルにバインドされる別の WebDropDown の選択された項目に基づいて値リストをフィルタリングします。
2 つの WebDropDown コントロールをカスケードする方法を学習します。
Visual Studio™ ツールボックスから、ひとつの ScriptManager コンポーネント、2 つの WebDropDown コントロール、2 つの標準的な Label コントロールそして 2 つの SqlDataSource コンポーネントをフォームにドラッグ アンド ドロップします。WebDropDown コントロールの ID プロパティを "categoryDropDown" と "productDropDown" に設定します。Label1 と Label2 の Text プロパティを "Select a Category:" と "Select a Product:" にそれぞれ設定します。
categoryDropDown が Select a Category Label の隣りに、productsDropDown が Select a Product Label の隣りになるようにコントロールをデザイナーに配置します。
SqlDataSource1 を使用して categoryDropDown を Northwind データベースの Categories テーブルにバインドします。 TextField プロパティを CategoryName に、 ValueField プロパティを CategoryID に設定します。同様に、SqlDataSource2 を使用して、productDropDown を Northwind データベースの Products テーブルにバインドします。TextField プロパティを ProductName に、ValueField プロパティを ProductID に設定します。WebDropDown を SqlDataSource にバインドする方法の詳細は、 「WebDropDown を SQL データ ソースにバインド」を参照してください。
categoryDropDown コントロールの SelectionChanged クライアント側イベントのために javascript 関数 "categoryChanged" を追加します。
JavaScript の場合
// クライアント イベント 'SelectionChanged' は、 2 つのパラメーター センダーと e を取得します
// センダーはイベントを発生するオブジェクトです
// e は DropDownSelectionEventArgs です
function categoryChanged(sender, e) {
//productDropDown への参照を取得します
var productDropDown = $find("productDropDown");
productDropDown.loadItems(e.getNewSelection()[0].get_value());
}
上記のコードで、 loadItems メソッドは、新たに選択された categoryDropDown コントロールの項目の値に基づいて productDropDown で項目をフィルタリングするために productDropDown コントロールの ItemsRequested サーバー側イベント（次の手順で実装される）を発生します。
以下のコードを productDropDown の ItemsRequested サーバー側イベントに追加します:
Visual Basic の場合：
productDropDown.Items.Clear()
SqlDataSource2.SelectCommand =
"SELECT * FROM [Products] where [CategoryID] = '" & DirectCast(e.Value, String) &
"'"
productDropDown.DataBind()
C# の場合：
productDropDown.Items.Clear();
SqlDataSource2.SelectCommand = "SELECT * FROM [Products] where [CategoryID] = \'" + (string)e.Value + "\'";
productDropDown.DataBind();
上記のコードで、フィルタリングは SelectCommand を使用して categoryDropDown で選択された項目の値に等しい CategoryID を持つ項目を選択することによって productDropDown で実行されます。
アプリケーションを保存して実行します。Grains/Cereals カテゴリーと WebForm は以下の画像のようになります:
