.NET TIPS [ASP.NET]GridViewコントロールの削除ボタンで確認メッセージを表示するには?[2.0、3.0、3.5、C#、VB]山田 祥寛2009/01/22 |
![]() |
|
GridViewコントロールなどで使用されるCommandFieldフィールドによって生成される[削除]ボタンは、デフォルト動作では、ボタンをクリックすると即座に削除処理を実行する。しかし一般的には、削除のような後戻りのできない処理を行う場合には、クライアントサイド・スクリプト(JavaScript)を利用して、確認ダイアログを表示するのが好ましい。これによって、もしも誤って[削除]ボタンをクリックしてしまっても、すぐさまデータが削除されてしまうということは防ぐことができる。
![]() |
[削除]ボタンのクリック時に確認ダイアログを表示するサンプル |
[削除]ボタンをクリックしてもすぐにデータは削除されずに、確認ダイアログで[OK]ボタンをクリックするまで処理待ちとなる。 |
確認ダイアログで[OK]ボタンをクリックすればそのまま削除処理を実行し、[キャンセル]ボタンをクリックした場合には削除処理を取り消すわけだ。
それではさっそく、このような確認ダイアログを実装するための手順を見てみよう。なお、本稿のサンプルは「TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?」で作成したサンプルを基に、その差分のみを解説している。GridViewコントロールそのものの利用方法については、そのTIPSを併せてご参照いただきたい。
1. 既存列をTemplateFieldフィールドに変換する
残念ながら、現在の標準的なCommandField/ButtonFieldフィールドの機能では、確認ダイアログを表示させることはできない。このように標準的なXxxxxFieldフィールドで賄えない機能やレイアウトを実現したい場合には、TemplateFieldフィールドを利用する必要がある。TemplateFieldフィールドに関する詳細は、「TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?」で解説しているので、併せてご参照いただきたい。
今回のケースでは、CommandFieldフィールドがすでにGridViewコントロールに配置されているはずなので、これをTemplateFieldフィールドに置き換えておこう。フィールドの編集を行うには、GridViewコントロールのタスク・メニューから[列の編集]を選択する。
![]() |
[フィールド]ダイアログ |
GridViewコントロール配下の列情報は、ここから編集できる。 |
上の画面のような[フィールド]ダイアログが開くので、ダイアログ左下の[選択されたフィールド]から[CommandField]列を選択したうえで、ダイアログ右下の[このフィールドをTemplateFieldに変換します。]をクリックすればよい。
2. TemplateFieldで定義されたテンプレートを編集する
次に、TemplateFieldフィールドのItemTemplateテンプレート(表示モードで使用するテンプレート)を定義する。
TemplateFieldフィールドには、そのほかにもEditItemTemplateやHeaderTemplateのようなテンプレートが用意されているが、これらテンプレートのレイアウト/設定はBoundFieldフィールドから引き継がれているものをそのまま使用できるので、ここでは設定の必要はない。
テンプレートを編集するには、GridViewコントロールのタスク・メニューから[テンプレートの編集]を選択する。GridViewコントロールが通常の表示からテンプレート表示モードに切り替わるので、さらに[GridViewタスク(テンプレート編集モード)]の[表示]欄から[Column[0]]のItemTemplateを選択する。
![]() |
Column[0] ItemTemplateテンプレート |
もともとはCommandFieldフィールドで定義されていた[編集]/[削除]ボタンがLinkButtonコントロールとして配置されているはずだ。ここでは、[削除]ボタンのOnClientClickプロパティを、次のように変更しておこう。
return confirm('本当に削除しても良いですか?'); |
OnClientClickプロパティは、名前のとおり、ボタン・クリック時に実行されるクライアントサイド・スクリプトを表すためのプロパティである。
(JavaScriptの)confirm関数は、確認ダイアログで[OK]/[キャンセル]ボタンのいずれがクリックされたかをtrue/falseで返す。ここでは、これをreturn命令で呼び出し元に返しているわけだ。これによって、[OK]ボタンがクリックされた場合(戻り値がtrueである場合)はそのままクリック・イベントを継続し、[キャンセル]ボタンがクリックされた場合(戻り値がfalseである場合)にはクリック・イベントも取り消すことができる。return命令を書き忘れてしまうと、[キャンセル]ボタンをクリックしたときに正しく処理がキャンセルされないので、注意すること。
以上を理解できたら、さっそくサンプル・プログラムを実行してみよう。冒頭の画面のように、[削除]ボタンをクリックしたタイミングで確認ダイアログが表示されれば成功である。[OK]ボタンをクリックしたら削除処理が正しく行われることを、[キャンセル]ボタンをクリックしたら処理がキャンセルされることを、それぞれ確認しておこう。
[参考]RowDataBoundイベント・ハンドラ利用との比較 |
本稿で紹介したのと同等の機能を実装するための別解を、「TIPS:[ASP.NET]GridViewコントロールにコマンド・ボタンを配置するには?(応用編)」で紹介している。こちらでは、(TemplateFieldフィールドは使わずに)RowDataBoundイベント・ハンドラを利用して、ButtonFieldフィールド配下のボタン・コントロールを取り出し、直接そのプロパティを設定している。もちろん、これはこれで有効なアプローチであるが、たかだかボタンのプロパティを変更するためだけに、イベント・ハンドラを記述しなければならないことに、いくらかの回りくどさを感じるかもしれない。ボタンのプロパティを変更するだけならば、本稿で紹介したようにTemplateFieldフィールドを利用するのがベターだろう。 |
なお、サンプル実行時にブラウザからソースを確認してみると、グリッドの各行に以下のようなJavaScriptコードが埋め込まれていることが確認できるはずだ。
<a onclick="return confirm('本当に削除しても良いですか?');" id="grid_ctl03_LinkButton2" href="javascript:__doPostBack('grid$ctl03$LinkButton2','')">削除</a> |
もちろん、この程度であればほとんど気にすることはないが、JavaScriptのコードが長くなった場合、あるいは確認ダイアログに表示する文字列が多くなった場合には、データ量の増加が気になるところかもしれない。その場合には、呼び出すべきJavaScriptのコードを別に関数としてまとめておき、OnClientClickメソッドでは「return fnc()」のように関数呼び出しのコードだけを記述するようにするとよいだろう。
利用可能バージョン:.NET Framework 2.0 利用可能バージョン:.NET Framework 3.0 利用可能バージョン:.NET Framework 3.5 カテゴリ:Webフォーム 処理対象:GridViewコントロール 使用ライブラリ:GridViewコントロール 関連TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには? 関連TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには? 関連TIPS:[ASP.NET]GridViewコントロールにコマンド・ボタンを配置するには?(応用編) |
![]() |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |