ボタンが押されたときに確認ダイアログを表示する方法

サンプルコードのダウンロード (aspnettips_ClientClick.msi, 251 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 Beta 2 が必要です。

従来の ASP.NET で、ユーザーが何かボタンを押したときに、確認のダイアログボックスを表示したい場合、少し処理が煩雑でした。Button コントロールの Attributes プロパティを使って、最終的に生成される HTML の input タグ中に、ダイアログを表示するスクリプトを挿入するような処理を追加していました。 ASP.NET 2.0 では、OnClientClick プロパティを使って、簡単に確認ダイアログを表示させることができます。

次のようなページを作成してみます（図１）。このページには、2 つの Button コントロールがあります。これらのボタンを押すと、ページタイトルを変えたり、別ページへジャンプしたりできますが、その前に確認ダイアログボックスが表示されます。

　

　図1 今回作成するページ

今回は、次の手順でページを作成します。

使用するページとコントロールの用意
OnClientClick プロパティの設定
実行

(1) 使用するページとコントロールの用意

Default.aspx に、2 つ Button コントロールを貼り付けてください（図２）。各プロパティは、次表のようにしてください。

　

　図2 2 つの Button コントロール

Buttonコントロール 1

プロパティ	設定値
ID	Button1
Text	タイトルを変える

Buttonコントロール 2

プロパティ	設定値
ID	Button2
Text	マイクロソフトのページへ

2 つのボタンを押したときの処理を記述します。Default.aspx.vb に次のように記述してください。

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Page.Title = "OnClientClickプロパティの使い方"
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        Response.Redirect("http://www.microsoft.com/japan/")
    End Sub
End Class

リスト 1 Default.aspx.vb

(2) OnClientClick プロパティの設定

確認のダイアログボックスを表示させるため、2 つの Button コントロールの OnClientClick プロパティに、Java スクリプトを記述します（図３）。

　

　図3 OnClientClick プロパティ

それぞれ、次のように記述してください。

return confirm("タイトルを変更してもよろしいですか？");

リスト 2 Button1 の OnClientClick プロパティ

return confirm("マイクロソフトのページへ移動してもよろしいですか？");

リスト 3 Button2 の OnClientClick プロパティ

(3) 実行

実行してみます。[タイトルを変える] ボタンを押すと、確認のダイアログボックスが表示され（図４）、そこで [OK] ボタンを押すと、実際にタイトルが変わります。[キャンセル] ボタンを押すと、何も起こりません。[マイクロソフトのページへ] ボタンも同様で、確認ダイアログで [OK] ボタンを押すと、マイクロソフトのページへ切り替わります。

　

　図4 [タイトルを変える] ボタンを押したところ

以上のように、ASP.NET 2.0 では、ボタンが押されたときの確認ダイアログを簡単に表示することができます。