ASP.NET GridViewのホームへ戻る

DropDownListGridViewを連動させる (GridView09.aspx)

 

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

 

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

  DropDownListの先頭に「選択してください」を表示する方法

  DropDownListGridViewを連動させる方法

 

 

DropDownListから[調味料]を選択する

 

 

GridViewに調味料の商品が表示された

 

DropDownListGridViewを連動させる 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

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

 

「データソースの選択」に戻ったら、[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テーブルからProductIDProdctNameQuantityPerUnitUnitPriceの列を選択します。「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に該当する商品が表示されます。

 

図 DropDowListGridViewを連動

 

 

◆解説

 

DropDownListGridViewを連動させるには、それぞれのコントロール別にSqlDataSourceを作成する必要があります。SqlDataSource1SelecteCommnadプロパティには、CategoriesテーブルからCategoryIDCategoryNameを抽出するSELECTステートメントを格納してDropDownListにバインドします。

 

DropDownListDataTextFieldDataValueFieldプロパティには、「CategoryName」、「CategoryID」を設定してCategoriesテーブルの列と対応させています。DropDownListの先頭に「選択してください!」を表示するには、ListItemタグを追加して、DropDownListAppendDataBoundItemsプロパティに「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>

 

SqlDataSource2SelectCommandプロパティには、ProductsテーブルからProductIDProductNameQuantityPerUnitUnitPrice列を抽出するSELECTステートメントを格納してGridViewにバインドします。SELECTステートメントのWHERE句に記述されているパラメータ変数(@CategoryID)には、SelectParametesControlParameterで指定されている値(DropDownList1.SelectedValue)が代入されます。DropDownList1SelectedValueには、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ページがポストバックされます。このとき、SqlDataSource2SELECTステートメントが実行されてGridViewにバインドされて表示されます。DropDownListから「選択してください!」をクリックしたときは、DropDownList1.SelectedValueNullが格納されますので、SqlDataSource2SELECTステートメントは実行されません。DropDownList1.SelectedVaueNullが格納されているときもSELECTステートメントを強制的に実行させたいときは、SqlDataSource2CancelSelectOnNullParameterプロパティに「False」を設定します。CancelSelectOnNullParameterプロパティの既定値は「True」に設定されています。

 

ASP.NET GridViewのホームへ戻る