使用ICallbackEventHandler达到Ajax效果

　　现在.NET的Ajax组件确实不少了，微软的ajax extensions用起来很方便，一个UpdatePanel就可以搞定一切。不过，可能有些朋友更愿意自己来写。那么在.NET里，你是否知道ICallbackEventHandler呢？
大家应该都知道ASP.NET页面调用时的几种方式：Postback/Cross-page posting/Server transfer/Callback，如果你还不太了解，你可以看看MSDN
现在要说的，就是Callback这种调用方式。
简单的说，使用Callback可以得到你平常看到那么Ajax效果，即不刷新整个页面，只更新其中一个部分。

使用Callback，只需要做以下4步：
1、在你的页面中继承System.Web.UI.ICallbackEventHandler接口。

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

{

protected void Page_Load(object sender, EventArgs e)

{

}

#region ICallbackEventHandler Members

public string GetCallbackResult()

{

}

public void RaiseCallbackEvent(string eventArgument)

{

}

#endregion

}

如果你没有使用code-behind，那你也可以在aspx页面顶部加入下面的代码

<% @ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

2、在前台写一段自定义的javascript，更新页面
这一段javascript用来更新页面的某个局部，就像你平常操作的一样，写些document.getElementById("xxx").innerHTML="working on your request...."。

function GetFlag(arg)
{

document.getElementById("result").innerHTML=arg;
}

</script>

Code:

3、在Page_Load中再注册一段javascript

string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), .......//省略了一大串

上面的GetCallbackEventReference是用来得到客户端函数的引用，发起一个callback到服务器端的，你不必知道详细内容。
你只需要了解
第一个参数填this,用来handle客户端的callback的，它必须继承ICallbackEventHandler接口并提供 RaiseCallbackEvent方法，我们已经在继承了这个接口，上面第一点中的代码也有RaiseCallbackEvent方法，只是还没有具体写内容呢。
第二个参数就是那个从客户端传到服务器端的参数。如果你想要注册的检查用户是否可用，那么这里的值就是用户输的那个值。
第二个参数是前台的javascript函数名，在第二步中我们写的名字是：GetFlag。当数据好了，这个javascript函数就会用到。
第四个参数一般用不上。

返回值：一个函数的名字，是客户端调用的函数名。这个函数会调用到服务器端了。

4、调用你的函数。

上面一定是 onclick="callServer()"吗？呵呵，这要看你了，你在Page.ClientScript.RegisterClientScriptBlock注册的什么javascript函数名字，就是什么名字了。（在第3步的第二行code中）

已经完了。如果你还是一头雾水，没关系，下面看一个实例：
我们写一个检测用户是否已经注册的小程序，这在每个用户注册页面上都可以用到。

前台Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ICallbackEventHandler Demo</title>

*{font: 12px "verdana";}

#user{border:1px solid #080; height:50px;width:500px;padding:20px;}

input{border:1px solid #508FCC;background:#FFF;}

.ok{color:#090;}

.bad{color:#F00}

#result{display:inline;margin: 0 5px 0;}

</style>

function GetFlag(arg)

{

document.getElementById("result").innerHTML=arg;

}

</script>

</head>

<body>

<input type="button" value="check it!" onclick="callServer()" /><div id="result">查询用户是否被使用。</div>

</div>

</form>

</body>

</html>

上面有一个<input type="button" value="check it!" onclick="callServer()" />，这是我说的第5步的内容，这个函数名字callServer应该和Lage_Load中注册的相对应的。

后台Default.aspx.cs：

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 _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

{

private string _arg = string.Empty;

protected void Page_Load(object sender, EventArgs e)

{

string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callServer", "\nfunction callServer(){\ndocument.getElementById(\"result\").innerHTML=\"正在检查\"+document.getElementById(\"userid\").value+\" 的可用性，请稍候...\";\nvar arg=document.getElementById(\"userid\").value;\n" + script + ";\n}", true);

}

#region ICallbackEventHandler Members

public string GetCallbackResult()

{

System.Threading.Thread.Sleep(1000);

return _arg;

}

public void RaiseCallbackEvent(string eventArgument)

{

if (eventArgument.Equals("99love") || eventArgument.Equals("blueidea"))

_arg = string.Format("<span class=\"bad\">很遗憾，{0} 已被使用。</span>", eventArgument);

else

_arg = string.Format("<span class=\"ok\">恭喜您，{0} 可以注册。</span>", eventArgument);

}

#endregion

}

你可以看看运行截图和源码。

希望这篇文章能在某些时候对您有所帮助（别忘了转载注明出处）。

使用ICallbackEventHandler达到Ajax效果

你可能感兴趣的:(callback)