■DropDownListとGridViewを連動させる (GridView09.aspx)
WebページにDropDownListとGridViewを配置して連動させるサンプルを作成します。DropDownListにはCategoriesテーブルを表示します。DropDownListから商品区分を選択したらGridViewに該当する商品を表示します。このサンプルは、以下のノウハウを習得することができます。
▼ DropDownListにテーブルを表示する方法
▼ DropDownListの先頭に「選択してください」を表示する方法
▼ DropDownListとGridViewを連動させる方法
DropDownListから[調味料]を選択する
GridViewに調味料の商品が表示された
図DropDownListとGridViewを連動させる
1. 新規Webページ作成
ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView09.aspx」を作成します。
2. コントロール作成
デザイナにGridView09.aspxが表示されたら、ツールボックスの「標準」タブから[DropDownList]をドラッグ＆ドロップします。デザイナにDropDownList1のオブジェクトが作成されたら、「DropDownListタスク」メニューから[データソースの選択]をクリックします。データソース構成ウィザードが起動されて、「データソースの選択」が表示されたら、「データソースの選択」から[<新しいデータソース>]を選択して、App_Dataフォルダに格納されているNwindSQL.mdfデータベースのCategoriesテーブルからCategoryIDとCategoryName列を選択してウィザードを完了せます。
「データソースの選択」に戻ったら、[DropDownListで表示するデータフィールドの選択]あから[CategoryName]を選択して[OK]をクリックします。
図「DropDownListで表示するデータフィールドの選択」から[CategoryName]を選択する
「DropDownListタスク」メニューから「AutoPostBackを有効にする」をチェックします。DropDownList1のプロパティウィンドウからAppendDataBoundItemsプロパティに「True」を設定します。デザイナの最下位から[ソース]をクリックします。ソースビューが表示されたら、DropDownListに次のListItemを追加します。
<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="CategoryName" DataValueField="CategoryID"
AppendDataBoundItems="True">
<asp:ListItem>選択してください！
</asp:ListItem>
</asp:DropDownList>
ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されたら、「GridViewタスク」メニューから[オートフォーマット]を選択して「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動したら、App_Dataフォルダに格納されているNwindSQL.mdfデータベースを接続して、ProductsテーブルからProductID、ProdctName、QuantityPerUnit、UnitPriceの列を選択します。「Selectステートメントの構成」から[WHERE]ボタンをクリックします。
図 Productsテーブルから列を選択したら[WHERE]ボタンをクリックする
「WHERE句の追加」が表示されたら、「列」から[CategoryID]を選択します。「演算子」からは[=]、「ソース」からは[Control]を選択します。右側の「パラメータのプロパティ」の「コントロールID」から[DropDownList1]を選択します。「値」に「DropDownList1.SelectedValue」が表示されたら[追加]ボタンをクリックします。
「WHERE句」にSQL式と値が表示されたら[OK]をクリックして閉じます。
図 パラメータ変数(@CategoryID)にDropDownList1.SelectedValueを代入する
「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。
デザイナに戻ったら、「GridViewタスク」メニューの「ページングを有効にする」をチェックしてから、[列の編集]を選択します。
「フィールド」が表示されたら「選択されたフィールド」からフィールドを選択して、BoundFiledプロパティのHeaderTextプロパティを日本語に書き換えます。「単価」のDataFormatStringプロパティに「{0:c0}」を入力して通貨型で表示されるようにフォーマットします。DataFormatStringに書式を設定してフォーマットするときは、HtmlEncodeプロパティに「False」を設定することを忘れないでください。[OK]をクリックして「フィールド」を閉じます。
3. ブラウザに表示
VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザを表示します。ブラウザが起動されたら、DropDownListから商品区分を選択します。GridlViewに該当する商品が表示されます。
図 DropDowListとGridViewを連動
◆解説
DropDownListとGridViewを連動させるには、それぞれのコントロール別にSqlDataSourceを作成する必要があります。SqlDataSource1のSelecteCommnadプロパティには、CategoriesテーブルからCategoryIDとCategoryNameを抽出するSELECTステートメントを格納してDropDownListにバインドします。
DropDownListのDataTextFieldとDataValueFieldプロパティには、「CategoryName」、「CategoryID」を設定してCategoriesテーブルの列と対応させています。DropDownListの先頭に「選択してください！」を表示するには、ListItemタグを追加して、DropDownListのAppendDataBoundItemsプロパティに「True」を設定します。
<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="CategoryName" DataValueField="CategoryID"
AppendDataBoundItems="True">
<asp:ListItem Value="">選択してください！ </asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
</asp:SqlDataSource>
SqlDataSource2のSelectCommandプロパティには、ProductsテーブルからProductID、ProductName、QuantityPerUnit、UnitPrice列を抽出するSELECTステートメントを格納してGridViewにバインドします。SELECTステートメントのWHERE句に記述されているパラメータ変数(@CategoryID)には、SelectParametesのControlParameterで指定されている値(DropDownList1.SelectedValue)が代入されます。DropDownList1のSelectedValueには、DropDownListから選択した商品区分の区分ID(CategoryID)が格納されています。
SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice]
FROM [Products]
WHERE ([CategoryID] = @CategoryID)
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="SqlDataSource2"・・・ >
<Columns>
・・・
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="CategoryID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
DropDownListから商品区分名を選択するとWebページがポストバックされます。このとき、SqlDataSource2のSELECTステートメントが実行されてGridViewにバインドされて表示されます。DropDownListから「選択してください！」をクリックしたときは、DropDownList1.SelectedValueにNullが格納されますので、SqlDataSource2のSELECTステートメントは実行されません。DropDownList1.SelectedVaueにNullが格納されているときもSELECTステートメントを強制的に実行させたいときは、SqlDataSource2のCancelSelectOnNullParameterプロパティに「False」を設定します。CancelSelectOnNullParameterプロパティの既定値は「True」に設定されています。