Tips - ASP.NET

 【TOP】
Client Callback
ASP.NET2.0のClient Callback機能を使用することで、非同期にサーバと通信し、不要なポストバックをしないように することができます。必ずしもXMLでやりとりをする訳ではないので、Ajaxとは呼べないかもしれませんが、広義の Ajaxと呼んでもよいかもしれません。ASP.NETの次のバージョン「Atlas」ではAjaxをサポートするようです。

Client Callbackを使用するにはサーバ側でSystem.Web.UI.ICallbackEventHandlerインタフェースを実装します。
System.Web.UI.ICallbackEventHandlerには2つのメソッドが定義されており、次のような役割をはたします。

・RaiseCallbackEventメソッド
クライアントからサーバへの非同期呼び出しに対する処理を行います。

・GetCallbackResultメソッド
クライアントへ処理結果を送信します。

一方、クライアント側には次の関数を定義します。（名前は任意）
・サーバと非同期通信する引き金となる関数（以下の例のLookUp関数）
・サーバからデータを受け取る関数（以下の例のReceiveDataFromServer関数）
・実際にサーバへ要求を送信する関数（以下の例のCallServer関数）
クライアントとサーバをつなぐCallServer関数は、ページロード時にサーバサイドで生成、クライアントに送信されます。
そこで使用するのがPage.ClientScript.GetCallbackEventReferenceメソッドです。
このメソッドでサーバからの返却文字列を受け取るReceiveDataFromServerクライアント関数の参照を取得、CallServerクライアント関数を生成します。

まず、サーバサイドのソースコードを以下に示します。 


public partial class ClientCallbackSample : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
    // クライアントへ返す文字列
    private string returnValue = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        // ClientScriptManagerを取得
        ClientScriptManager csMgr = Page.ClientScript;

        // ReceiveDataFromServerクライアント関数への参照を取得
        string cbRef 
            = csMgr.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context");

        // CallServer関数を生成
        string callbackScript = "function CallServer(arg, context){" + cbRef + ";}";
        csMgr.RegisterClientScriptBlock(this.GetType(), "CallServerScript", callbackScript, true);
    }

    // クライアントへ処理結果文字列を返却
    public string GetCallbackResult()
    {
        return returnValue;
    }

    // クライアントからの要求を処理
    public void RaiseCallbackEvent(string eventArgument)
    {
        // ===========================================================
        // クライアントから送信された文字列eventArgumentをもとに
        // データベース検索などの処理を行う
        // ===========================================================

        returnValue = 結果;
    }
}
次に、クライアントサイドのソースコードを以下に示します。 

    <script type="text/javascript">
    <!--

    // サーバからの処理結果を受け取る
    function ReceiveDataFromServer(retValue, context)
    {
        document.getElementById("dispArea").innerHTML = retValue;
    }
    
    function LookUp()
    {
        var sendStr = "これ頼みます";

        // サーバへ送信
        CallServer(sendStr, null);
    }
    //-->
    </script>
この機能を使って郵便番号検索を作ってみました。
【戻る】