All articles(网络文学目录) All Pictures(图片目录) All Softwares(软件目录)

 
不用组件实现Ajax效果_[AJAX教程]

Writer: 归海一刀 Article type: Programming skills(编程技巧) Time: 2014/3/16 2:53:33 Browse times: 355 Comment times: 0

不用组件实现Ajax效果_[AJAX教程]


Head photo

Go homepage
Upload pictures
Write articles

不用组件实现Ajax效果_[AJAX教程]























现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢?




大家应该都知道ASP.NET页面调用时的几种方式:Postback/Cross-page posting/Server transfer/Callback,如果你还不太了解,你可以看看MSDN:How t Determine How ASP.NET Web Pages Were Invoked




现在要说的,就是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...."。









你可能有些迷糊,就得到了吗?连个什么XMLHttpRequest都没有哩……




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()" />




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




已经完了。如果你还是一头雾水,没关系,下面看一个实例




我们写一个检测用户是否已经注册的小程序,这在每个用户注册页面上都可以用到。




前台Default.aspx:




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



ICallbackEventHandler Demo













onclick="callServer()" />

查询用户是否被使用。










上面有一个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", "");//上面的第3步,取得这个客户端函数名,script的值可能是这样的:WebForm_DoCallback('__Page',arg,GetFlag,\"\",null,false)
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);
//上面这一行有点长了,第二个参数最长,看到function callServer()了吗,这就是和前台对应的那个函数名onclick=XXX,请记得,一定要在callServer函数中加入script的值,也就是上一行的上一行(17行)那个值。注意后面的var arg=...,这个arg和17行的arg是对应的。
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
System.Threading.Thread.Sleep(1000);//让线程睡一会,我们好看效果。这是用来模拟不良网络状况的。
return _arg;//返回一个string型,这个string在RaiseCallbackEvent函数中是赋过值的,看下面哦。
}
public void RaiseCallbackEvent(string eventArgument)
{
if (eventArgument.Equals("99love") || eventArgument.Equals("blueidea"))//假设这两个名字不能注册,实际操作中,你要是比对数据库记录的,我们现在简化处理了。
_arg = string.Format("很遗憾,{0} 已被使用。", eventArgument);//要么已经注册了
else
_arg = string.Format("恭喜您,{0} 可以注册。", eventArgument);//要么就可以注册
}
#endregion
}




运行截图:
















源码下载




希望这篇文章能在某些时候对您有所帮助。




来源:蓝色理想





































There are 0 records,
Comment:
Must be registered users to comment(必须是注册用户才能发表评论)

Disclaimer Privacy Policy About us Site Map
Copyright ©2011-
uuhomepage.com, Inc. All rights reserved.