ASP.NET GridViewのホームへ戻る

GridViewの編集時DropDownListから選択させる (GridView06.aspx)

 

GridViewNwindSQL.mdfデータベースのProductsテーブルを表示して編集時、DropDownListから商品区分IDを選択するサンプルを作成します。このサンプルは、以下のノウハウを習得することができます。

 

  BoundFieldTemlateFieldに変換する方法

  GridViewDropDownListをネストさせる方法

  DropDownListから選択した商品区分IDをデータベースに反映させる方法

 

図 商品区分をドロップダウンリストから選択する

 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

デザイナにGridView06.aspxが表示されたら、ツールボックスの「データ」タブから[SqlDataSource]をドラッグ&ドロップします。デザイナにSqlDataSource1のオブジェクトが作成されたら、「SqlDataSourceタスク」から[データソースの構成]をクリックします。データソースの構成ウィザードが起動したら、App_Dataフォルダに格納されているNwindSQL.mdfを接続して、Productsテーブルから「ProductID」、「ProductName」、「CategoryID」、「QuantityPerUnit」、「UnitPrice」の列を選択します。「Selectステートメントの構成」から[詳細設定]ボタンをクリックします。「SQL生成の詳細オプション」が表示されたら、「INSERTUPDATE、およびDELETEステートメントの生成」をチェックして[OK]をクリックして閉じます。「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。

 

 

図 Productsテーブルから列を選択したら[詳細設定]ボタンをクリックする

 

ツールボックスの「データ」タブからSqlDataSourceをドラッグ&ドロップします。デザイナにSqlDataSource2のオブジェクトが作成されたら、「SqlDataSourceタスク」から[データソースの構成]をクリックします。データソース構成ウィザードが起動したら、NwindSQL.mdfデータベースを接続してCategoriesテーブルから「CategoryID」と「CategoryName」を選択してウィザードを完了させます。

 

図 CategoriesテーブルからCategoryIDCategoryName列を選択

 

ツールボックスの「データ」タブから[GridView]をドラッグ&ドロップします。「GridViewタスク」メニューから[オートフォーマット]を選択します。「オートフォーマット」が表示されたら、「スキームの選択」から[砂と空]を選択して[OK]をクリックして閉じます。「GridViewタスク」メニューの「データソースの選択」から[SqlDataSource1]を選択します。「GridViewタスク」メニューから「ページングを有効にする」と「編集を有効にする」をクリックしてチェックマークを付けたら、[列の編集]を選択します。

 

「フィールド」が表示されたら、「選択されたフィールド」から[編集、更新、キャンセル]を選択します。CommandFieldプロパティからButtonTypeプロパティに「Button」を設定します。BoundFieldプロパティのHeaderTextプロパティを日本語に書き換えます。「選択されたフィールド」から[区分(CategoryID)]を選択したら、「このフィールドをTemplateFieldに変換します」をクリックします。BoundFieldTemplateFiledに変換されたら[OK]をクリックして閉じます。

 

図「区分」をテンプレート列に変換する

 

 

図 GridViewに編集ボタンをProductsテーブルのフィールドが表示された

 

デザイナの最下位から[ソース]をクリックします。ソースビューが表示されたら、TemplateField<EditItemTemplate>…</EditItemTempalte>からTextBoxコントロールを削除して、次のDropDownListコントロールを入力します。

 

<EditItemTempalte>

  <asp:DropDownList ID="DropDownList1" runat="server"

    DataSourceID="SqlDataSource2"

    DataTextField="CategoryName"

    DataValueField="CategoryID"

    SelectedValue='<%# Bind("CategoryID") %>'>

  </asp:DropDownList>

</EditItemTempalte>

 

図 EditItemTemplateDropDownListを追加

 

 

3. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewProductsテーブルが表示されます。GridViewから[編集]ボタンをクリックすると、区分にDropDownListがネストされて表示されます。DropDownListから区分名を選択して[更新]ボタンをクリックするとデータベースが更新されます。

 

図 区分列に区分のドロップダウンリストが表示された

 

Tip

単価の小数点以下を表示しないようにするには

 

このサンプルは、GridViewの単価に小数点以下4桁の数値が表示されます。単価の小数点以下を表示したくないときは、BoundFieldに「DataFormatString="{0:n0}"」を追加します。レコード編集時もこのフォーマットを適用させるには、「ApplyFormatInEditMode="True"」を追加します。

 

DataFormatStringを指定するときは、HtmlEncodeプロパティに「False」を設定する必要があります。

 

<asp:BoundField DataField="UnitPrice"

  HeaderText="単価"

  SortExpression="UnitPrice"

  ApplyFormatInEditMode="True"

  DataFormatString="{0:n0}"
HtmlEncode="False"
/>

 

 

 

◆解説

 

GridViewから[編集]ボタンをクリックしたときに、DropDownListを表示するにはBoundFieldTemplateFieldに変換します。<EditItemTemplate>…</EditItemTemplate>には、商品区分名を表示するためのDropDownListを挿入します。[編集]ボタンをクリックしたときに、DropDownListにデフォルトのアイテムを表示するには、SelectedValueプロパティにカレントの区分ID(CategoryID)を設定します。CategoryIDをバインドするには、EvalメソッドとBindメソッドを利用する方法があります。Evalは参照、Bindは更新するときに使用します。ここでは、DropDownListから選択したCategoryIDProductsテーブルに反映する必要がありますので、Bindメソッドを使用します。

 

<asp:TemplateField HeaderText="区分" SortExpression="CategoryID">

  <ItemTemplate>

    <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryID") %>'></asp:Label>

  </ItemTemplate>

  <EditItemTemplate>

    <asp:DropDownList ID="DropDownList1" runat="server"

      DataSourceID="SqlDataSource2"

      DataTextField="CategoryName"

      DataValueField="CategoryID"

      SelectedValue='<%# Bind("CategoryID") %>'>

    </asp:DropDownList>

  </EditItemTemplate>

</asp:TemplateField>

 

 

ASP.NET GridViewのホームへ戻る