使用ICallbackEventHandler达到Ajax效果
2009-12-24 11:34
375 查看
声明:转载
现在.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...."。
<script type="text/javascript">
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、调用你的函数。
<input type="button" value="check it!" onclick="callServer()" />
上面一定是 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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ICallbackEventHandler Demo</title>
<style type="text/css">
*{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>
<script type="text/javascript">
function GetFlag(arg)
{
document.getElementById("result").innerHTML=arg;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="user">
<input type="text" value="99love" maxlength="10" id="userid" />
<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
}
你可以看看运行截图和源码。
希望这篇文章能在某些时候对您有所帮助(别忘了转载注明出处)。
现在.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...."。
<script type="text/javascript">
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、调用你的函数。
<input type="button" value="check it!" onclick="callServer()" />
上面一定是 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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ICallbackEventHandler Demo</title>
<style type="text/css">
*{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>
<script type="text/javascript">
function GetFlag(arg)
{
document.getElementById("result").innerHTML=arg;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="user">
<input type="text" value="99love" maxlength="10" id="userid" />
<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
}
你可以看看运行截图和源码。
希望这篇文章能在某些时候对您有所帮助(别忘了转载注明出处)。
相关文章推荐
- 使用JQuery达到Ajax分页的效果
- 使用ICallbackEventHandler搞掂ASP.NET的AJAX应用
- net 中 等同与ajax的效果 ICallbackEventHandler
- 利用ICallbackEventHandler接口实现Ajax效果
- 使用三层实现分页利用ajax实现无刷新的效果
- 六步使用ICallbackEventHandler实现无刷新回调
- 尝试在电脑端使用调试模式修改手机游戏的参数达到外挂效果
- 传智播客erp项目学习,使用Ajax提高用户体验效果
- 使用jQuery实现AJAX帐号验证效果
- 【JAVASCRIPT】如何不使用jquery函数和ajax框架实现ajax效果
- 在网页中使用按钮达到IE中后退按钮的效果
- 不使用XMLHttpRequest对象实现Ajax效果
- 【Vegas原创】使用GreyBox组件实现ajax弹出式窗口效果
- 六步使用ICallbackEventHandler实现无刷新回调
- 【转】 使用ASP.NET AJAX实现幻灯片效果
- 使用script的src实现跨域和类似ajax效果
- 六步使用ICallbackEventHandler实现无刷新回调
- Ajax使用jQuery和PHP实现功能开关效果
- JavaScript 中使用 replace 达到 replaceAll的效果
- WebForm开发形式操作时使用层达到遮罩效果