ASP.NETの開発でAjaxを使う機会も増えているんじゃないかと思います。
今日は、ASP.NET2.0から追加された機能である、ClientCallbackの使い方などを書いてみたいと思います。
ClientCallbackとは、文字通りクライアントからサーバーのメソッドがコールバックされる仕組みで、通信にはXMLHttpRequestが使われています。
通信部分のスクリプトはASP.NETが勝手に出力してくれますので、私達は簡単なスクリプトを少し書くだけでOKといった感じですね。
もちろん、Ajaxでゴリゴリやる場合はそうもいきませんが、例えば郵便番号が入力されたら住所を自動入力するといった補助的なものなら、割と簡単に行うことができます。
ClientCallback使うには、いくつかの決まり事があります。
まず1つ目の決まりとして、そのページまたはコントロールが ICallbackEventHandler インターフェイスを実装していなければなりません。
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Example : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string GetCallbackResult()
{
//ここに、クライアントに値を返すコードを書く
return "Hello World";
}
public void RaiseCallbackEvent(string eventArgument)
{
//このメソッドが、クライアントから呼び出される
}
}
このRaiseCallbackEventがクライアントからコールバックされ、GetCallbackResultメソッドにクライアントに値を返すコードを実装します。
しかし、これだけではまだコールバックイベントは発生しません。
2つ目の決まりとして、当然ではありますが、コールバックイベントを発生させるための関数とサーバーから値を受け取る
関数がそれぞれJavaScriptで定義されていなければなりません。
そこで、まず aspx に値を受け取る関数を記述します。
<script type="text/javascript">
function ReceiveData(data)
{
alert(data);
}
</script>
名前は何でも構いませんが、ここではReceiveDataという名前の関数を作成しました。
引数は、サーバーから返される値になります。
次に、コールバックを発生させるJavaScriptの関数を作成する必要がありますが、これはサーバー側で作成して出力します。
とりあえず、Page_Loadメソッドに記述してみましょう。
protected void Page_Load(object sender, EventArgs e)
{
string callBackRef =
Page.ClientScript.GetCallbackEventReference(
this, "arg", "ReceiveData", "context");
string script = "function CallServerMethod(arg, context){" + callBackRef + ";}";
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(), "CallbackScript", script, true);
}
まず、ClientScriptManagerのGetCallbackEventReferenceメソッドを使って、ASP.NETが自動生成するJavaScriptの関数を呼び出すコードを得ます。
GetCallbackEventReferenceメソッドの引数は、
第1引数：ICallbackEventHandlerを実装しているページまたはコントロール
第2引数：コールバックを実行するJavaScriptの関数の第1引数の名前
第3引数：結果を受け取るJavaScriptの関数名
第4引数：コールバックを実行するJavaScriptの関数の第2引数の名前
となっています。
恐らく第2引数と第4引数がわかり辛いと思います。
ココの説明はMSDNの記述も意味がよくわかりませんが、単に、その後に記述してある
string script = "function CallServerMethod(arg, context){" + callBackRef + ";}";
の呼び出し側JavaScript関数の引数である "arg"、"context"の変数名を渡せばOKです。
ちなみに、このJavaScript関数の第1引数はサーバーに渡される値、第2引数はサーバーのメソッドをコールバックする前に実行するJavaScriptの関数またはコードになります。
あとは、このスクリプトを RegisterClientScriptBlock メソッドでページに登録して完了です。
ただ、この RegisterClientScriptBlock メソッドはASP.NET 2.0から変更されています。
以前はPageクラスのRegisterClientScriptBlockメソッドを呼び出して登録していましたが、2.0からはこのメソッドは使わずにClientScriptManagerの
RegisterClientScriptBlockメソッドを使って登録します。
最後に、以下のようボタンを追加して登録したJavaScriptの関数を実際に呼び出してみましょう。
<button onclick="CallServerMethod();">Call</button>
Hello Worldのalertが表示されると思います。
