Tweet

.NET TIPS ［ASP.NET］GridViewコントロールに選択ボタンを追加するには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2009/01/29

　「TIPS：［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（応用編）」では、ButtonFieldフィールドを用いてグリッド表にコマンド・ボタンを追加する方法について紹介した。ButtonFieldフィールドを利用することで、グリッド表の各行を処理するための任意の機能を持ったコマンド・ボタンを実装することができる。

　ただ、前掲のTIPSでも見たように、ButtonFieldフィールドは汎用的なボタン機能を提供するものであり、機能上の制約を受けにくい半面、ちょっとした機能を実装するにもコードが冗長になりやすいというデメリットがある。

　そこでGridViewコントロールでは、グリッド上の特定の行を選択することに特化した［選択］ボタンを提供している。［選択］ボタンは特定行を指定するという単純な機能を提供するだけのコマンド・ボタンであるが、汎用的なコマンド・ボタン（ButtonFieldフィールド）よりも手軽に利用できるというメリットがある。

　本稿では、この［選択］ボタンを利用する例を、いくつかのサンプル・プログラムとともに解説する。

1. 選択された行の背景色を変更する

　「TIPS：［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（基本編）」で紹介した、行選択時に行の背景色を変更するサンプルを、［選択］ボタンを使って記述してみよう。次の画面はその完成例である。

［選択］ボタンをクリックすると、選択行の背景色が変化する（ButtonSelect.aspx）

　［選択］ボタンを追加するのは簡単である。GridViewコントロール右肩のタスク・メニューから［選択を有効にする］にチェックを付ければよい。

GridViewコントロールで選択ボタンを有効にする

タスク・メニューから［選択を有効にする］をチェックすることで、［選択］ボタンが自動的に追加される。

　［選択］ボタンは、実際にはCommandFieldフィールドによって提供されている。このことは、タスク・メニューから［列の編集］を選択し、［フィールド］ダイアログを開いてみると確認できるはずだ。

［フィールド］ダイアログで［選択］ボタンがCommandFieldフィールドであるのを確認しているところ

　CommandFieldフィールドは、GridViewコントロールで提供されるXxxxxFieldクラス（System.Web.UI.WebControls.DataControlFieldクラスの派生クラス）の1つで、［選択］［更新］［削除］などのコマンド・ボタンを含む列を生成する。

　ここでShowSelectButtonプロパティをTrueにすることでも、［選択］ボタンを追加することが可能だ。ほかのボタンと同様、ButtonType、SelectImageUrl、SelectTextプロパティを指定することで、ボタンの種類やキャプション、イメージ画像を変更することも可能である。

2. 選択時の背景色を指定する

　選択時の背景色は、GridViewコントロールのプロパティから指定できる。プロパティ・ウィンドウからSelectedRowStyle−BackColorサブプロパティ（背景色）を「Azure」、SelectedRowStyle−ForeColorサブプロパティ（文字色）を「Black」と、それぞれ設定する。実に、これだけだ。

　以上の手順を終えたら、さっそくサンプル・プログラムを実行してみよう。冒頭の画面のような結果が得られれば成功である。

　なお、ここで注意していただきたいのは、ButtonFieldフィールドを利用した場合と異なり、選択行は排他的であるということだ。つまり、ある行を選択しておいて、異なる行を選択した場合には、先に選択されていた行の背景色はクリアされる。

　しかし、ButtonFieldフィールドを利用した前掲のTIPSのサンプルで同様の操作をしてみると、こちらは先に選択されていた行の背景色がクリア「されない」ことが確認できるはずだ。

複数の行を続けて選択した場合（ButtonFieldフィールドの例）

3. ［選択］ボタン・クリック時の挙動を定義する

　次に、もう少し実践的な例を見てみよう。通常、［選択］ボタンをクリックした場合、選択行に対して、あるいは、選択行の情報に基づいて何らかの処理を行うのが一般的である。ここでは、「TIPS：［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（応用編）」で紹介したサンプル――選択された行に関する詳細ページにリダイレクトするサンプルを、［選択］ボタンを使って作成してみよう。

　サンプル・コードは、上で作成したButtonSelect.aspxを基に、イベント・ハンドラを追加するものとする。具体的には、SelectedIndexChangedイベント・ハンドラを追加する必要がある。SelectedIndexChangedイベントは、グリッド表の選択行が変更された直後のタイミングで発生するイベントである。

　ちなみに、行が選択状態になる直前に発生するSelectedIndexChangingイベントもある。条件によって選択をキャンセルしたい場合などには、こちらのイベントを利用する必要がある。今回のケースでは選択済みの行を取得する必要があるので、選択「後」に発生するSelectedIndexChangedイベントを利用しなければならないわけだ。

　SelectedIndexChangedイベント・ハンドラを追加するには、コード・エディタを開き、画面上部の選択ボックスから［grid］（GridViewコントロールのID値）−［SelectedIndexChanged］を選択すればよい。もしくは、プロパティ・ウィンドウをイベント表示に切り替え、SelectedIndexChangedの欄をダブルクリックしてもよい。

イベント・ハンドラの骨組を自動生成

　イベント・ハンドラの骨組ができるので、ここでは以下のようなコードを追加する。

　前述のTIPSとコードを比べてみても分かるように、選択行を取得するコードは、コマンド・ボタン（ButtonFieldフィールド）を利用したときに比較してはるかにシンプルだ。

　ここでは、SelectedValueプロパティによって選択行の主キー値を取得しているが、選択行の情報を取得するためにGridViewコントロールはそのほかにも以下のようなプロパティを持っている。上のコードの太字部分を、それぞれのプロパティを使って置き換えた例も含めて、まとめてみた。

プロパティ	概要
例（C#）
例（Visual Basic）
SelectedDataKey	選択行のキー値を表すDataKeyオブジェクトを取得
String isbn = (String)grid.SelectedDataKey.Value;
Dim isbn As String = grid.SelectedDataKey.Value
SelectedIndex	選択行のインデックス値を取得
String isbn = (String)grid.DataKeys[grid.SelectedIndex].Value;
Dim isbn As String = grid.DataKeys(grid.SelectedIndex).Value
SelectedRow	選択行（GridViewRowオブジェクト）を取得
String isbn = (String)grid.DataKeys[grid.SelectedRow.RowIndex].Value;
Dim isbn As String = grid.DataKeys(grid.SelectedRow.RowIndex).Value
選択行に関するプロパティ

　もちろん、今回のようなケースではSelectedValueプロパティを利用するのが簡単であるが、状況に応じて使い分けるようにするとよいだろう。

　なお、「TIPS：［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（応用編）」で紹介したように、主キーにアクセスするにはあらかじめDataKeyNamesプロパティが設定されていることが前提となる。通常はウィザードによって自動生成される項目であるので、意識する必要はないはずであるが、正しく主キー値が取得できない場合にはこちらも確認してみるとよいだろう。

この記事と関連性の高い別の.NET TIPS ［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（基本編） ［ASP.NET］GridViewコントロールにコマンド・ボタンを配置するには？（応用編） ［ASP.NET］DataGridコントロールに選択ボタンを追加するには？ ［ASP.NET］GridViewコントロールの削除ボタンで確認メッセージを表示するには？ ［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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