2016-11-15

ASP.NETでJavaScriptのアラートダイアログを表示する

ASP.NET C# JavaScript

ASP.NETで作ったWebアプリケーションで、JavaScriptのアラートダイアログを表示する方法についてちょっと苦労したので、紹介します。
最初は、C#のメッセージボックスを使ってダイアログを表示しようとしたのですが、ASP.NETでは使えません。
そのため、JavaScriptでダイアログを表示する方法を調べたのですが、情報を見つけるのに少し時間がかかりました。

今回は、ボタンがクリックされた時にJavaScriptのアラートを表示する方法を紹介します。

しかし、条件によってアラートを表示するかどうか判断したい場合があると思います。
しかも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#に引数を渡すこともできます。

JavaScript

<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>