[ ASP.NET ] ボタンクリック時に静的に埋め込んだ Javascript を実行する ( OnClientClick )

ボタンクリック時に実行する Javascript を静的に HTML に埋め込むには、ボタンコントロールの OnClientClick プロパティに、実行する Javascript を記述すればよいだけです ( VB.NET と C# で共通 )。
サンプルで使用する Javascript は、alert 関数でメッセージダイアログを出力するだけの簡単なものになっています。

OnClientClick プロパティに Javascript を設定

ASPX

 <form id="form1" runat="server">
 <div>
   <asp:Button id="Button1" runat="server" Text="Button" 
               OnClientClick='alert("click"); return false;' />
 </div>
 </form>
    

なお、静的に定義した Javascript は false をリターンしているため、Clickイベントハンドラが定義されている場合でも何も実行されません。 true をリターンすると、定義されているClickイベントハンドラが実行されます。ここでの当たり前かつ重要なポイントは、

• falseを返した場合は、クライアント上で処理が完結し、サーバーでの処理は実行されない
• trueを返した場合は、ブラウザで Javascript が実行されたのち、サーバー上でイベントハンドラが実行される

ということです。

OnClientClick プロパティの使用が想定されるような場面としては、

• 削除ボタンなどで、処理を続行するか確認を行う場合（この場合は、alert関数ではなく、confirm関数を使用するだろう）
• 連絡先が未入力なので「入力してください」とダイアログまたは画面上にメッセージを出力する

といったケースなどがあげられます。

HTML タグに任意の属性を追加する

ボタンコントロールの OnClientClick プロパティに設定した Javascript は、HTML 変換後の onclick 属性に 設定されます。ここでは、ASP.NET プログラム内から設定する方法を確認してみたいと思います。具体的には、 Button.Attributes プロパティを使用しています。

VB.NET

 Button1.Attributes("onclick") = "return false;" ' 上書きされる
 Button1.Attributes("value") = "戻るぞ" ' 最後尾に追加される
 Button1.Attributes("useradd") = "useradd" ' 最後尾に追加される

C#

 Button1.Attributes["onclick"] = "return false;" ' 上書きされる
 Button1.Attributes["value"] = "戻るぞ" ' 最後尾に追加される
 Button1.Attributes["useradd"] = "useradd" ' 最後尾に追加される

下記の結果は実験的に、事前にデザイナで Button.Text プロパティと Button.OnClientClick プロパティにそれぞれ、” 戻る “、 ” history.back(); return false; ” を設定してある状態で、上記のプログラムから任意の属性の設定を行った場合ときに ASP.NET によって出力された HTML です。（見やすいように一部省略してあります）

 <input type="submit" value="戻る" 
        onclick="history.back(); return false; return false;" 
        value="戻るぞ" useradd="useradd" />

出力結果のまとめ

1. onclick 属性では、OnClientClick プロパティに設定してあった Javascript に追記された
2. value 属性がすでに、Button.Text プロパティによって設定されている場合は、さらに最後尾に value 属性が追加された （ただし、最初の属性が有効になり、プログラムから追加された属性は画面上に反映されなかった。今は亡き IE6 での確認）
3. ユーザーが任意に追加した useradd 属性は最後尾に追加された