Tweet

.NET TIPS ［ASP.NET AJAX］ConfirmButtonコントロールでボタン・クリック時に確認ダイアログを表示するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/09/06

　　ConfirmButtonコントロール（ConfirmButtonExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、標準のボタン系コントロール（Button、LinkButton、ImageButton）に確認ダイアログを表示する機能を追加する。

ConfirmButtonコントロールによる確認ダイアログの表示

ボタン・クリックのタイミングで確認ダイアログを表示する。［OK］を選択した場合にはそのままクリック・イベントの処理を実行し、［キャンセル］を選択した場合はキャンセルする。

　誤解のしようもないシンプルなコントロールであるので、以下ではさっそく、ConfirmButtonコントロールを利用するための基本的な手順を見ていくことにしよう。

　なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

●基本的なConfirmButtonコントロールの使い方

　新規のWebフォーム（ConfirmButton.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、以下の表の内容でプロパティ値を設定しておこう。

Webフォーム（ConfirmButton.aspx）のフォーム・レイアウト

各コントロールのプロパティ設定値は以下のとおり。 コントロール（ID） プロパティ 設定値 ToolkitScriptManager （manager*） − − TextBox（txtNam） − − Button（btnSend） Text 送信 ConfirmButton （cbe） TargetControlID btnSend ConfirmText 送信してもよろしいですか？

* ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロール。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」も参照してほしい。

　ConfirmButtonコントロールのTargetControlIDプロパティは、ダイアログ機能を関連付けるButtonコントロールを指定するものだ。本稿の例では、これによって、ButtonコントロールbtnSendにConfirmButtonコントロールの機能が付与されたことになるわけだ。

　なお、ConfirmButtonコントロールのそのほかのプロパティを設定する場合、（ConfirmButtonコントロールそのものではなく）関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Buttonコントロールのプロパティ・ウィンドウに「cbe（ConfirmButtonExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

　ここでは最低限、ConfirmButtonコントロールの動作に必要な設定として、ConfirmTextプロパティ（確認ダイアログに表示するテキスト）を設定しておくことにしよう。

　ConfirmButtonコントロールを利用するための手続きは、実にこれだけだ。作成したサンプル・プログラムを実行し、冒頭の画面のような動作を確認できれば、まずは成功である。

●OnClientClickプロパティとConfirmButtonコントロール

　もっとも、これだけの動作ならば、ASP.NET標準のボタン系コントロールに用意されたOnClientClickプロパティを利用してもよいのではないかと思われるかもしれない。OnClientClickプロパティは名前のとおり、ボタン・クリック時にクライアント側で実行されるスクリプトを指定するためのプロパティで、もちろん、確認ダイアログを表示する場合にも利用が可能だ。

　例えば、先ほどのConfirmButton.aspxを、OnClientClickプロパティで置き換えるならば、ConfirmButtonコントロールを削除したうえで、Button.OnClientClickプロパティに、

return confirm("送信してもよろしいですか？");

と指定するだけでよい。

ConfirmButton.aspxをコピーして修正したConfirmButton2.aspxのフォーム・レイアウト

このようにレイアウトを変更する。

ConfirmButtonコントロール（cbe）を削除。。

　もちろん、これだけのコードであるとはいえ、定型的な動作を実現するためにいちいちJavaScriptのコードは書きたくないという意見もあるかもしれない。そうした意味では、一切、JavaScriptを排除したConfirmButtonコントロールを利用するメリットもあるわけであるが、一方で、この程度ならば標準の機能だけで実現したいという意見もあるだろう。

　そのとおり、ただ単に確認ダイアログの表示を行うだけならば、さほどにConfirmButtonコントロールを利用するメリットはない、と筆者も思う。しかし、ここに検証コントロールが絡んでくると、やや話が変わってくるのだ。具体的な例を見てみよう。

ConfirmButton2.aspxに検証コントロールを追加

コントロールのプロパティ設定値は以下のとおり。 コントロール（ID） プロパティ 設定値 RequiredFieldValidator（reqNam） ControlToValidate txtNam ErrorMessage 名前は必須です。

　［名前］欄に必須検証機能を付与しただけの、ごく単純なページだ。この状態で、ページを実行してみるとどうだろう。

ConfirmButton2.aspxの実行結果

検証エラーとなる場合にも確認ダイアログが表示されてしまう。

　上の画面のように、［名前］欄に入力がされていないにもかかわらず、確認ダイアログが表示されてしまうのだ。その後、確認ダイアログで［はい］をクリックすると、そのままポストバックが発生し、ポストバック「後」に初めて検証エラーが表示されることが確認できるはずだ（つまり、検証コントロール本来のクライアントサイド検証が働いていない）。

　このような挙動は、当然、エンド・ユーザーにとって好ましいことではない。無駄なポストバックが発生することももちろんであるが、そもそも検証エラーがあることが分かっているのに先に確認ダイアログが表示されてしまうこと自体、余計な挙動であるのだ。先に検証処理を行い、すべての検証項目がクリアになった場合にのみ確認ダイアログを表示するのがあるべき姿なのである。

●ConfirmButtonコントロールと検証コントロール

　そこで再び登場するのが、ConfirmButtonコントロールなのである。ここで先ほど修正したConfirmButton.aspxを、さらにConfirmButtonコントロールを利用して書き直してみよう。

ConfirmButton2.aspxをコピーして修正したConfirmButton3.aspxのフォーム・レイアウト

コントロールのプロパティ設定値は以下のとおり。 コントロール（ID） プロパティ 設定値 ConfirmButtonExtender （cbe） TargetControlID btnSend ConfirmText 送信してもよろしいですか？ ConfirmOnFormSubmit True

　ここでポイントとなるのは、ConfirmButtonコントロールのConfirmOnFormSubmitプロパティだ。ConfirmOnFormSubmitプロパティがTrue（デフォルトはFalse）の場合、ConfirmButtonコントロールは、検証をクリアした場合にのみダイアログを表示する。従って、このサンプル・アプリケーションを実行してみると、以下のような動きをするはずだ。

ConfirmButton3.aspxの実行結果

検証コントロールがエラーを検出した場合には、確認ダイアログは表示されない。

　このように、検証コントロールを含んだページで、確認ダイアログを表示したいというケースでは、ConfirmButtonコントロールを利用するのが好ましい。

■

　以上が、ConfirmButtonコントロールの主要な機能だ。最後にConfirmButtonコントロールで利用可能なプロパティを、いま一度、まとめておく。

プロパティ	概要
TargetControlID	ダイアログ表示を関連付けるボタン・コントロールのID値
ConfirmText	確認ダイアログに表示するテキスト（「
」（＝改行）のようなHTMLエンティティも利用可能）
OnClientCancel	確認ダイアログ上で［キャンセル］ボタンがクリックされた場合に実行されるクライアントサイド・スクリプト
ConfirmOnFormSubmit	Trueの場合、かつ、検証コントロールでエラーが検出された場合には確認ダイアログを表示しない
ConfirmButtonコントロールの主なプロパティ

　自分で開発する際の参考にしてほしい。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］ValidatorCalloutコントロールで検証メッセージをバルーン表示するには？ ［ASP.NET］複数のボタンを持つフォームで検証コントロールを利用するには？ ［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ ［ASP.NET AJAX］MaskedEditValidatorコントロールでマスク機能付きテキストボックスへの入力値を検証するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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