■RadioButtonListとGridViewを連動させる (GridView08.aspx)
WebページにRadioButtonListとGridViewを配置して連動させるサンプルを作成します。RadioButtonListにはCategoriesテーブルを表示します。RadioButtonListから商品区分を選択したらGridViewに該当する商品を表示します。このサンプルは、以下のノウハウを習得することができます。
▼ RadioButtonListにテーブルを表示する方法
▼ RadioButtonListとGridViewを連動させる方法
RadioButtonListから「飲料」を選択する
GridViewに「飲料」が該当する商品が表示された
図RadioButtonListから商品区分を選択するとGridViewに該当する表品が表示される
1. 新規Webページ作成
ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView08.aspx」を作成します。
2. コントロール作成
デザイナにGridView08.aspxが表示されたら、ツールボックスの「標準」タブから[RadioButtonList]をドラッグ＆ドロップします。デザイナにRadioButtonList1のオブジェクトが作成されたら、「RadioButtonListタスク」メニューから[データソースの選択]をクリックします。データソース構成ウィザードが起動されて、「データソースの選択」が表示されたら、「データソースの選択」から[<新しいデータソース>]を選択して、App_Dataフォルダに格納されているNwindSQL.mdfデータベースのCategoriesテーブルからCategoryIDとCategoryName列を選択してウィザードを完了させます。
「データソースの選択」に戻ったら、「RadioButtonListで表示するデータフィールドの選択」から[CategoryName]を選択して[OK]をクリックします。
図 「RadioButtonListで表示するデータフィールドの選択」から[CategoryName]を選択する
「RadioButtonListタスク」メニューから「AutoPostBackを有効にする」をチェックします。RadioButtonList1のプロパティウィンドウからRepeatColumnsプロパティに「4」、RepeatDirectionプロパティに「Horizontal」を設定します。
ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されたら、「GridViewタスク」メニューから[オートフォーマット]を選択して「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動したら、App_Dataフォルダに格納されているNwindSQL.mdfデータベースを接続して、Productsテーブルから「ProductID」、「ProdctName」、「QuantityPerUnit」、「UnitPrice」の列を選択します。「Selectステートメントの構成」から[WHERE]ボタンをクリックします。
図 Productsテーブルから列を選択したら[WHERE]ボタンをクリックする
「WHERE句の追加」が表示されたら、「列」から[CategoryID]を選択します。「演算子」からは[=]、「ソース」からは[Control]を選択します。右側の「パラメータのプロパティ」の「コントロールID」から[RadioButtonList1]を選択します。「値」に「RadioButtonList1.SelectedValue」が表示されたら[追加]ボタンをクリックします。
「WHERE句」にSQL式と値が表示されたら[OK]をクリックして閉じます。
図 パラメータ変数(@CategoryID)にRadioButtonList.SelectedValueを代入
「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。
デザイナに戻ったら、「GridViewタスク」メニューの「ページングを有効にする」をチェックしてから、[列の編集]を選択します。
「フィールド」が表示されたら「選択されたフィールド」からフィールドを選択して、BoundFiledプロパティのHeaderTextプロパティを日本語に書き換えます。「単価」のDataFormatStringプロパティに「{0:c0}」を入力して通貨型で表示されるようにフォーマットします。DataFormatStringに書式を設定してフォーマットするときは、HtmlEncodeプロパティに「False」を設定することを忘れないでください。[OK]をクリックして「フィールド」を閉じます。
図 GridViewに表示する列を追加して各種プロパティを設定する
3. ブラウザに表示
VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、RadioButtonListに商品区分が表示されます。RadioButtonListから商品区分を選択すると、GridlViewに該当する商品が表示されます。
Tip
|
単価を右揃えで表示するには GridViewの「単価」を右揃えで表示するには、「GridViewタスク」から[列の編集]を選択します。「フィールド」が表示されたら、「選択されたフィールド」から[単価]をしてBoundFieldプロパティからItemStyleを展開してHorizontalAlignプロパティに[Right]を設定します。 |
図 RadioButtonListとGridVeiwを連動
◆解説
RadioButtonListとGridViewを連動させるには、それぞれのコントロール別にSqlDataSourceを作成する必要があります。SqlDataSource1のSelectCommandプロパティには、CategoriesテーブルからCategoryIDとCategoryNameを抽出するSELETCTステートメントを格納してRadioButtonListにバインドします。RadioButtonListのDataTextFieldとDataValueFieldプロパティには、「CategoryName」、「CategoryID」を設定してCategoriesテーブルの列と対応させます。
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="CategoryName" DataValueField="CategoryID" ・・・>
</asp:RadioButtonList>
<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で指定されている値(RadioButtonList1.SelectedValue)が代入されます。RadioButtonList1のSelectedValueには、RadioButtonListから選択した商品区分の区分ID(CategoryID)が格納されています。
SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice]
FROM [Products]
WHERE ([CategoryID] = @CategoryID)
<asp:GridView ID="GridView1" runat="server"
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="RadioButtonList1"
Name="CategoryID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
RadioButtonListから商品区分名を選択するとWebページがポストバックされます。このとき、SqlDataSource2のSELECTステートメントが実行されてGridViewにバインドされて表示されます。