ASP.NETでJavaScriptのアラートダイアログを表示する
ASP.NETで作ったWebアプリケーションで、JavaScriptのアラートダイアログを表示する方法についてちょっと苦労したので、紹介します。
最初は、C#のメッセージボックスを使ってダイアログを表示しようとしたのですが、ASP.NETでは使えません。
そのため、JavaScriptでダイアログを表示する方法を調べたのですが、情報を見つけるのに少し時間がかかりました。
今回は、ボタンがクリックされた時にJavaScriptのアラートを表示する方法を紹介します。
目次
- 単純なアラートダイアログ表示
- アラートダイアログ表示の有無をC#側で判断する
単純なアラートダイアログ表示
単純にボタンがクリックされた時に、アラートを必ず表示したいということであれば、ボタンコントロールのOnClientClickプロパティを設定するだけで実現できます。
aspx
<asp:Button ID="test" runat="server" OnClientClick="sayHello();" />
JavaScript(aspxファイル内に書きます)
<script> function sayHello() { alert("Hello!"); } </script>
アラートダイアログ表示の有無をC#側で判断する
しかし、条件によってアラートを表示するかどうか判断したい場合があると思います。
しかもJavaScriptではなく、C#側で判断したいケース。
私の場合もそうでした。。。
その場合は、もうちょっと手順を踏む必要があります。
手順
1. aspxファイルにScriptManagerタグを定義し、EnablePageMethodsプロパティをtrueに設定する。
2. ボタンコントロールに、OnClientClickプロパティを設定する。
3. aspx.csファイルに、JavaScriptから呼び出されるメソッドを定義する。
4. aspxファイルのscriptタグに、OnClientClickプロパティに指定するメソッドを定義する。
1. aspxファイルにScriptManagerタグを定義し、EnablePageMethodsプロパティをtrueに設定する。
aspxファイルに以下のようにScriptManagerタグを定義します。
JavaScriptからC#のメソッドを呼び出すためには、EnablePageMethodsプロパティをtrueにする必要があるので、trueに設定します。
aspx
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
2. ボタンコントロールに、OnClientClickプロパティを設定する。
アラートを表示したいボタンコントロールにOnClientClickプロパティを設定します。
値には、ボタンが押下された時に最初に呼び出されるJavaScriptのメソッドを設定します。
aspx
<asp:Button ID="test" runat="server" Text="クリック" OnClientClick="sayHello();" />
3. aspx.csファイルに、JavaScriptから呼び出されるメソッドを定義する。
aspx.csファイルに、JavaScriptから呼び出されるメソッドを定義します。
このメソッドは、staticメソッドである必要があります。
また、「System.Web.Services.WebMethod」属性を付与します。
JavaScript側へ戻り値を返すこともできます。
aspx.cs
[System.Web.Services.WebMethod] public static bool sayHello(int count) { return count == 0 ? true : false; }
4. aspxファイルのscriptタグに、OnClientClickプロパティに指定するメソッドを定義する。
ボタンが押された時に、処理が渡るメソッドを、記述します。
このメソッドから、先ほどC#で定義したstaticメソッドへ処理が進みます。
ここでは、C#メソッドを呼び出した結果がコールバックとしてJavaScript側に返ってくるので、処理に成功した時に呼ばれるSuccessメソッドと失敗した時に呼ばれるErrorメソッドを定義しておきます。
JavaScriptからC#に引数を渡すこともできます。
<script> function sayHello() { PageMethods.sayHello(0, onSuccess, onError); } function onSuccess(result, userContext, methodName) { if (result === true) { alert("count is 0."); } } function onError(result, userContext, methodName) { // エラー時の処理 } </script>
以上でアラートダイアログを表示することができます。