ASP.NETでボタンのクリック時に確認メッセージを表示するには？：.NET TIPS

» 2003年04月18日 05時00分公開

[遠藤孝信，デジタルアドバンテージ]

　Webアプリケーションにおいて、データの削除などの重要な処理をユーザーが実行する前に、クライアント・サイドでメッセージ・ボックスを表示して、本当にそれを実行してよいかを確認したい場合がある。

　既存のHTMLでは、ボタンがクリックされた場合に、処理を進めるかキャンセルするかを問い合わせる確認メッセージ・ボックスを、JavaScriptを使用して次のように記述することができた。

<html>
<body>
<form method="get" action="http://www.atmarkit.co.jp/fdotnet/">
<input type="submit"
value="Insider.NETへ"
onclick="return confirm('本当に移動しますか？');"
>
</form>
</body>
</html>

確認メッセージ・ボックスを表示するサンプルHTML（confirm.html）

　このconfirm.htmlにブラウザでアクセスし、表示される［Insider.NETへ］ボタンをクリックすると、次の画面のような確認のためのメッセージ・ボックスが表示される。これは、inputタグのonclick属性にJavaScriptのconfirm関数を呼び出すためのコードが記述されているためだ。

サンプルHTMLをブラウザで表示
［Insider.NETへ］ボタンをクリックすると、確認メッセージ・ボックスが表示される。

　ここで［OK］ボタンをクリックすればページは遷移するが、［キャンセル］ボタンをクリックすれば、［Insider.NETへ］ボタンへのイベントはキャンセルされ、何の処理も起こらない。

　しかしこれと同様の記述をWebサーバ・コントロールの1つであるButtonコントロールに対して設定することはできない。そもそもButtonコントロールを記述するasp:ButtonタグのOnClick属性（“OnClick”の記述については、大文字／小文字は区別されない）は、ボタンがクリックされたときに呼び出されるイベント・ハンドラを指定するためのものだ。

Attributesプロパティによる属性の設定

　このため、Buttonコントロールでメッセージ・ボックスを表示するには、ASP.NETのページがレンダリングされて、最終的にサーバから送信されるHTML内のinputタグのonclick属性に、JavaScriptのスクリプトが挿入されるような仕組みが必要となる。これには、Buttonコントロールの実体であるButtonクラス（System.Web.UI.WebControls名前空間）のAttributesプロパティを使用する（正確にはAttributesプロパティはButtonクラスの親クラスであるWebControlクラスから継承している）。

　Attributesプロパティは、サーバ・コントロールの属性のコレクションであり、C#では次のようにして、値を追加設定することができる。

Button1.Attributes["onclick"] = "return confirm('本当に移動しますか？');";

　このAttributesプロパティ（AttributeCollectionクラス（System.Web.UI名前空間）のオブジェクト）には、インデクサにより属性名となるキーとその値のペアを、それぞれ文字列で追加することができる。ちなみに、Visual Basic .NETでは、この記述は次のようになる。

Button1.Attributes.Add("onclick","return confirm('本当に移動しますか？');")

　サンプル・プログラムとして、Visual Studio .NETを使用して冒頭のHTMLページと同等のASP.NETページを作成してみよう。

　まずVisual Studio .NETを起動し、新しいプロジェクトとしてC#のASP.NET Webアプリケーションを開く。次にフォーム上に、Buttonコントロールを配置する。

Buttonコントロールを配置したWebフォーム

　次に配置したボタンをダブルクリックし、Button1_Clickメソッドに次のコードを記述する。ここでは、Redirectメソッドによりページを移動させている（ページの移動に関しては、「プログラミングASP.NET：第16回　ASP.NETにおけるページの遷移」を参考にしていただきたい）。

private void Button1_Click(object sender, System.EventArgs e)
{
Response.Redirect("http://www.atmarkit.co.jp/fdotnet/");
}

ボタンのClickイベント・ハンドラに追加するコード
このメソッドはボタンがクリックされると呼び出される。ここではInsider.NETへリダイレクトしている。

　そして、Button1_Clickメソッドのすぐ上にあるPage_Loadメソッドに、先ほどのonclick属性を設定するコードを記述する。

private void Page_Load(object sender, System.EventArgs e)
{
// ページを初期化するユーザーコードをここに挿入します。
Button1.Attributes["onclick"]
= "return confirm('本当に移動しますか？');";
}

フォームのLoadイベント・ハンドラに追加するコード
Attributesプロパティにより、ボタンのonclick属性にJavaScriptのスクリプトを設定している。

　以上で完成だ。［F5］キーを押すなどしてアプリケーションを実行し、表示されるWebページのソース・コードを見れば、次のようなinputタグが生成されているはずだ。