.NET TIPS ［ASP.NET］GridViewコントロールで選択ボックスを表示するには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2008/12/11

　「TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？」などで紹介したように、GridViewコントロールはデータソースの内容を加工／整形するためのXxxxxFieldフィールド（System.Web.UI.WebControls.DataControlFieldクラスの派生クラス）を標準で提供している。これらXxxxxFieldフィールドを利用することで、データソースから取得したデータをハイパーリンク、画像、チェックボックスなどの形式に自在に、しかもプログラムレスでバインドできる。

　もっとも、標準のXxxxxFieldフィールドでは提供されていないコントロールを使って、データを表示したいという状況もままあるだろう。

　例えば、前述のTIPSでも登場したサンプルでは、以下のように出版社名をテキストボックスから入力させていたが、このように入力値があらかじめいくつかに想定できるような場合は、選択ボックス（ドロップダウンリスト）から入力させた方がユーザーも入力しやすく、また間違いも少ないというものだ。

別TIPSのサンプルを編集モードで表示させたところ

　そこで本稿では、「TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？」で作成したサンプルを改良し、編集モードの入力要素としてDropDownListコントロールを適用する方法を紹介する。これにより上記の入力画面は次のようになる。

本稿で作成するサンプルの実行結果

［出版社］欄の入力要素をDropDownListコントロールで差し替えている。

　それではさっそく、具体的な手順を見ていくことにしよう。

1. 既存列をTemplateFieldフィールドに変換する

　標準的なBoundField／CheckBoxField／CommandField／ButtonField／HyperLinkField／ImageFieldフィールドでは賄えない要素を列に配置したい場合には、TemplateFieldフィールドを利用する必要がある。TemplateFieldフィールドに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？」で解説しているので、併せてご参照いただきたい。

　ここでは、［出版社］列はあらかじめBoundFieldフィールドとして定義されているはずなので、これをTemplateFieldフィールドに置き換えておこう。フィールドの編集を行うには、GridViewコントロールのタスク・メニューから［列の編集］を選択する。

［フィールド］ダイアログ

GridViewコントロール配下の列情報は、ここから編集することができる。

　上の画面のような［フィールド］ダイアログが開くので、ダイアログ左下の［選択されたフィールド］から［出版社］列を選択したうえで、ダイアログ右下の［このフィールドをTemplateFieldに変換します。］をクリックすればよい。

2. TemplateFieldで定義されたテンプレートを編集する

　次に、TemplateFieldフィールドのEditItemTemplateテンプレート（編集時に使用するテンプレート）を定義する。TemplateFieldフィールドには、そのほかにもItemTemplateやHeaderTemplateのようなテンプレートが用意されているが、これらテンプレートのレイアウト／設定はBoundFieldフィールドから引き継がれているものをそのまま使用できるので、ここでは設定の必要はない。

　テンプレートを編集するには、GridViewコントロールのタスク・メニューから［テンプレートの編集］を選択する。

　GridViewコントロールの表示が通常の表示からテンプレート表示モードに切り替わるので、さらに［GridViewタスク（テンプレート編集モード）］の［表示］欄から［Column[4] - 出版社］のEditItemTemplateを選択する。

　［出版社］欄の編集用テンプレートが表示されるので、ここでは、以下の画面のように元のTextBoxコントロールを削除したうえで、新たにDropDownListコントロールを配置しておこう。

［出版社−EditItemTemplate］テンプレートのレイアウト

以下のコントロールを配置。

DropDownListコントロール（IDは「list」）を配置。

3. DropDownListコントロールにデータバインドする

　DropDownListコントロール「list」に対しては、出版社の候補値をデータバインドしておこう。これには、DropDownListコントロール右肩のタスク・メニューから［データソースの選択］を選択する。

データソース構成ウィザード

　上の画面のような［データソース構成ウィザード］ダイアログが起動するので、［データソースの選択］欄から［<新しいデータソース>］を選択したうえで、以下の表の要領でデータソースの取得に必要な情報を設定する。データソース構成ウィザードの詳細については、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、こちらも併せて参照していただきたい。

項目	概要
データの種類	データベース
データソースID	sds_list
データ接続の選択	MyDB
Selectステートメントの構成（テーブル）	book
Selectステートメントの構成（列）	publishをチェック
Selectステートメントの構成（一意の行のみを返す）	チェック
データソース構成ウィザードの設定

　［Selectステートメントの構成］画面では、最終的に次のようなSQL命令文が生成されるはずだ（DISTICT句は重複行をまとめるためのもの）*。

SELECT DISTINCT [publish] FROM [book]

* このようなケースでは、本来、きちんと正規化を行い、出版社情報を管理するpublishのようなテーブルを用意するべきだ。ここでは簡略化のために、このようにbookテーブルから直接に出版社情報を取得している。

　一連の作業の後、［完了］ボタンをクリックすると、最初の画面に戻るので、［DropDownListで表示するデータフィールドの選択］と［DropDownListの値のデータフィールドの選択］欄には、それぞれ「publish」を指定する。これで、DropDownListコントロールには出版社名の一覧がバインドされた。

データソース構成ウィザード（2）

4. 選択ボックスのデフォルト値を設定する

　もっとも、これだけではデータベースから取得したbookテーブルの現在値が反映されない。ここでさらに、DropDownListコントロールのデフォルト値として、bookテーブルから取得した出版社情報をバインドしておく必要がある。

　「3. DropDownListコントロールにデータバインドする」のデータソース構成ウィザードを終了した後、［DropDownListタスク］メニューから［DataBindingsの編集］を選択する。

［＜コントロールID＞ DataBindings］ダイアログ

　上の画面のような［＜コントロールID＞ DataBindings］ダイアログが開くので、ここでは、ダイアログ左部の［バインド可能プロパティ］欄からSelectedValueプロパティを選択したうえで、［カスタムバインド］−［コード式］にバインド式として次の式を入力する。

Bind("publish")

　これによって、DropDownListコントロールのデフォルト値（SelectedValueプロパティ）として、bookテーブルから取得したpublishフィールドの値がバインドされたことになる。

　これで一連の手順は完了だ。ここで参考までに、ここまでにVisual Studioで自動生成されたコードを引用しておく。

<asp:GridView ID="grid" runat="server" AllowPaging="True" AllowSorting="True"   BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"   CellPadding="4" DataSourceID="sds" AutoGenerateColumns="False"   DataKeyNames="isbn">   <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />   <RowStyle BackColor="White" ForeColor="#003399" />   <Columns>     ……中略……     <%--出版社列のテンプレートを定義--%>     <asp:TemplateField HeaderText="出版社" SortExpression="publish">       <%--編集モードでのテンプレートを定義--%>       <EditItemTemplate>         <%--DropDownListコントロールのデフォルト値にpublishフィールド             をバインド--%>         <asp:DropDownList ID="list" runat="server"            DataSourceID="sds_list" DataTextField="publish"            DataValueField="publish" SelectedValue='<%# Bind("publish") %>'>         </asp:DropDownList>         <%--bookテーブルに登録済みの出版社情報をバインド--%>         <asp:SqlDataSource ID="sds_list" runat="server"           ConnectionString="<%$ ConnectionStrings:MyDB %>"           SelectCommand="SELECT DISTINCT [publish] FROM [book]">         </asp:SqlDataSource>       </EditItemTemplate>       <%--表示モードでのテンプレートを定義--%>       <ItemTemplate>         <asp:Label ID="Label1" runat="server" Text='<%# Bind("publish") %>'>           </asp:Label>       </ItemTemplate>     </asp:TemplateField>     ……中略……   </Columns>   ……中略…… </asp:GridView>

サンプルコードのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、編集モードに切り替えると、出版社欄が選択ボックスとして表示されることが確認できるはずだ。出版社を実際に変更して、その内容が正しくデータベースに反映されていることも確認してほしい。

利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：GridViewコントロール 使用ライブラリ：GridViewコントロール 関連TIPS：TIPS：［ASP.NET］GridViewコントロールで各列の表示書式をカスタマイズするには？ 関連TIPS：［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？ 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］GridViewコントロールを階層表示させるには？ ［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？ ［ASP.NET］GridViewコントロールの表示データを特定条件で絞り込むには？ ［ASP.NET］DetailsViewコントロールの列表示をカスタマイズするには？ ［ASP.NET］GridViewコントロールの削除ボタンで確認メッセージを表示するには？ ［ASP.NET］GridViewコントロールの行に通し番号（行番号）を付けるには？ ［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）