GridViewの編集時DropDownListから選択させる

ASP.NET GridViewのホームへ戻る

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

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

▼ BoundFieldをTemlateFieldに変換する方法

▼ GridViewにDropDownListをネストさせる方法

▼ 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生成の詳細オプション」が表示されたら、「INSERT、UPDATE、およびDELETEステートメントの生成」をチェックして[OK]をクリックして閉じます。「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。

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

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

図　CategoriesテーブルからCategoryIDとCategoryName列を選択

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

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

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

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

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

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

DataSourceID="SqlDataSource2"

DataTextField="CategoryName"

DataValueField="CategoryID"

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

</asp:DropDownList>

</EditItemTempalte>

図　EditItemTemplateにDropDownListを追加

3. ブラウザに表示

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

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

Tip

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

このサンプルは、GridViewの単価に小数点以下４桁の数値が表示されます。単価の小数点以下を表示したくないときは、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を表示するにはBoundFieldをTemplateFieldに変換します。<EditItemTemplate>…</EditItemTemplate>には、商品区分名を表示するためのDropDownListを挿入します。[編集]ボタンをクリックしたときに、DropDownListにデフォルトのアイテムを表示するには、SelectedValueプロパティにカレントの区分ID(CategoryID)を設定します。CategoryIDをバインドするには、EvalメソッドとBindメソッドを利用する方法があります。Evalは参照、Bindは更新するときに使用します。ここでは、DropDownListから選択したCategoryIDをProductsテーブルに反映する必要がありますので、Bindメソッドを使用します。

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

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

</ItemTemplate>