[VS2010/.NET 4.0贈書活動自我修練] AJAX設計方法之一 ICallbackEventHandler

2010-10-17

4319
0
2010-12-07

上一篇提到實現AJAX的幾個方式及簡單的use UpdatePanel，本篇即針對方法之一的ICallbackEventHandler做介紹

ICallbackEventHandler是.NET Framework 2.0 版所提供，用來實作Client 端Callback的一個介面

因此若要採用此種方式則必須實作此介面及所屬的二方法.GetCallbackResult()與.RaiseCallbackEvent(string eventArgument)

相較於use UpdatePanel，此種方式必須撰寫少許的JavaScript Code

以下就拿上一篇所提及的範例，以ICallbackEventHandler方式來實作

(1)在Page本身必須實作ICallbackEventHandler介面(命名空間： System.Web.UI)

(2) RaiseCallbackEvent 方法的實作(進行你所要作業的Server端動作)

以本範例來說，在RaiseCallbackEvent 裡，進行Data Query的動作，以準備好要回傳的資料

此方法所接收的傳入參數值是字串型態

(3) GetCallbackResult 方法的實作(用以將Callback結果回傳Client端)

#region ICallbackEventHandler Members
private  string resultstr = "";
public string GetCallbackResult()
{
    return resultstr;
}

public void RaiseCallbackEvent(string eventArgument)
{
    if (!string.IsNullOrEmpty(eventArgument))
    {

        SqlConnection conn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["Demo2010ConnectionString"].ToString());

        using (SqlCommand command = new SqlCommand())
        {
            conn.Open();
            command.Connection = conn;
            command.CommandText = "select ........ logonid=@logonid ";
            command.Parameters.Add("@logonid", System.Data.SqlDbType.VarChar, 20).Value = eventArgument;
            object result = command.ExecuteScalar();
            if (result != null)
                resultstr = (string)result.ToString();
            command.Connection.Close();
        }
    }
}

#endregion

(4) 到這裡會發現到，目前所撰寫的code都是Server端的，那前端如何做AJAX的呼叫呢?

接著就要利用Page.ClientScript.GetCallbackEventReference來協助了

本文一開始就提到了，使用此方式進行AJAX必須撰寫少量的JavaScript，所以接下來就是這個部份了

以本範例來說，需要在TextBox輸入完畢後，立即進行AJAX動作到資料庫取得資料，並顯示於畫面上

因此我們利用onblur來進行，以下總共準備三個JAVA Script function

function AjaxGetUser(logonid) : TextBox註冊onblur滑鼠事件, 當輸入完帳號游標離開輸入框時, call AjaxGetUser並傳入所輸入的帳號

function CallServer(args,context) : 用以call後端server method

function ClientCallBack(args,context)：接受回傳值並處理前端所要展現的相關動作

protected void Page_Load(object sender, EventArgs e)

{

string jscript = "<script language=javascript> \n" +

"function AjaxGetUser(logonid) \n" +