ASP.NET GridViewのホームへ戻る

RadioButtonListGridViewを連動させる (GridView08.aspx)

 

WebページにRadioButtonListGridViewを配置して連動させるサンプルを作成します。RadioButtonListにはCategoriesテーブルを表示します。RadioButtonListから商品区分を選択したらGridViewに該当する商品を表示します。このサンプルは、以下のノウハウを習得することができます。

 

  RadioButtonListにテーブルを表示する方法

  RadioButtonListGridViewを連動させる方法

 

 

RadioButtonListから「飲料」を選択する

 

GridViewに「飲料」が該当する商品が表示された

 

RadioButtonListから商品区分を選択するとGridViewに該当する表品が表示される

 

1. 新規Webページ作成

 

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView08.aspx」を作成します。

 

 

2. コントロール作成

 

デザイナにGridView08.aspxが表示されたら、ツールボックスの「標準」タブから[RadioButtonList]をドラッグ&ドロップします。デザイナにRadioButtonList1のオブジェクトが作成されたら、「RadioButtonListタスク」メニューから[データソースの選択]をクリックします。データソース構成ウィザードが起動されて、「データソースの選択」が表示されたら、「データソースの選択」から[<新しいデータソース>]を選択して、App_Dataフォルダに格納されているNwindSQL.mdfデータベースのCategoriesテーブルからCategoryIDCategoryName列を選択してウィザードを完了させます。

 

「データソースの選択」に戻ったら、「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]を設定します。

 

 

 

図 RadioButtonListGridVeiwを連動

 

◆解説

 

RadioButtonListGridViewを連動させるには、それぞれのコントロール別にSqlDataSourceを作成する必要があります。SqlDataSource1SelectCommandプロパティには、CategoriesテーブルからCategoryIDCategoryNameを抽出するSELETCTステートメントを格納してRadioButtonListにバインドします。RadioButtonListDataTextFieldDataValueFieldプロパティには、「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>

 

SqlDataSource2SelectCommandプロパティには、ProductsテーブルからProductIDProductNameQuantityPerUnitUnitPrice列を抽出するSELECTステートメントを格納してGridViewにバインドします。SELECTステートメントのWHERE句に記述されているパラメータ変数(@CategoryID)には、SelectParametesControlParameterで指定されている値(RadioButtonList1.SelectedValue)が代入されます。RadioButtonList1SelectedValueには、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ページがポストバックされます。このとき、SqlDataSource2SELECTステートメントが実行されてGridViewにバインドされて表示されます。

 

ASP.NET GridViewのホームへ戻る