Leon.Zhou-技术变革的年代!

活到老,学到老!

ASP.NET 2.0 正式版中无刷新页面的开发

示例代码下载4K
   在已经发布的
ASP.NET2.0 中,无刷新页面开发相关部分同 beta2 有不少改动。而且在越来越多的 Ajax 开发包被开发出来的情况下, ASP.NET2.0 自带的无刷新页面技术没有被很多人了解,甚至不少人认为该功能有些“鸡肋”。但如果我们仅仅是在程序中加入很少部分的 Ajax 特性, Atlas Ajax.Net 等就显得有些“杀鸡用牛刀”的感觉了。而且,我认为使用 ASP.NET2.0 提供的方法进行开发并不很复杂,相反,使用很少的代码就可以做出来很棒的效果!

   下面我来一步一步的带大家开发无刷新的页面!

 第一步:实现 ICallbackEventHandler 接口

   ICallbackEventHandler接口位于System.Web.UI命名空间下。在beta2时,ICallbackEventHandler只包含一个RaiseCallbackEvent方法,即处理回调事件,又返回处理结果。在正式版中,它变成了包含GetCallbackResultRaiseCallbackEvent两个成员方法,第一个用来返回回调事件的结果,第二个用来出来回调事件。这个变化主要是为了编写Web控件而做的改动,具体可以看一下GridView等控件中的实现代码。

建立一个 Web 网站,我们来修改 default.aspx.cs 文件:

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

 1     private string str;
 2     public void RaiseCallbackEvent(string eventArgument)
 3     {
 4         //可以根据传递的参数不同,调用不同的处理逻辑
 5         str = "从服务器端返回的内容:" + eventArgument;
 6     }
 7 
 8     public string GetCallbackResult()
 9     {
10         return str;
11     }
12 

  第二步:注册回调方法

   我们在 default.aspx 页面中添加一个 TextBox ,一个 Label 和一个 Html 控件 Button ,并给 Button 添加 onclick 事件:
1 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
2 <input id="Button1" type="button" value="提交到Label1" onclick="CallServer(TextBox1, Label1)"/><br/>
3 <asp:Label ID="Label1" runat="server" Text="Label1:"></asp:Label>
4 

 1     <script type="text/javascript"> 
 2        //由button调用
 3        function CallServer(inputcontrol, context)
 4        { 
 5             context.innerHTML = "Loading";
 6             arg = inputcontrol.value;
 7             //注册回调方法
 8             <%= ClientScript.GetCallbackEventReference(this"arg""ReceiveServerData""context")%>
 9         }
10         //在回调方法中注册的接收返回结果的函数
11         function ReceiveServerData(result, context) 
12         {
13             context.innerHTML = result;
14         }
15     </script>
16 

   好了,一个无刷新的页面就开发完了,它可以将你在 TextBox 中输入的文字,通过服务器代码写回到页面的 Label 中。是不是很简单?你可以运行一下你的程序看看效果啦!

   下面我们来分析一下这些代码。

   首先,我们看
<%= ClientScript.GetCallbackEventReference(this, "arg""ReceiveServerData""context")%>;

   ClientScriptSystem.Web.UI.Page对象的一个属性,它是System.Web.UI.ClientScriptManager对象。用于管理客户端脚本,GetCallbackEventReference方法用于注册一个服务器端事件的客户端回调。它的第四个参数“Context”非常重要,但在MSDN中并没有相关的例子和详细的说明。在我上面给的代码中可以看到,调用CallServer方法时,传递的Context参数就是Label1ReceiveServerData的第二个参数“Context”就是被传递过来的Label1。在我的例子中,Context被我用于设定一个用来显示服务端返回结果的控件。其实,你可以将任意的对象赋值给Context,它都会被传递给本地端处理回调返回结果的函数,这样,你就可以根据调用前指定的“上下文”灵活的操作返回结果了!在我给出的完整例子中,你可以看到一个使用Context做的无刷新显示GridView的例子。

   在这里我要说个题外话,Context这么重要的参数在MSDN中不但没有详细的说明,而且VS2005中文正式版MSDN中关于回调的例子竟然还是beta2时的实现!这个版本的MSDN可以说是我用过的版本中品质最差的。不过现在的MSND可以用“相当”庞大来形容,出错也是在所难免的,希望下个版本的MSND会好一些。

   OK,在ASP.NET 2.0中开发具有Ajax特性的东东不难吧!其实就是两步:

1、              Server端实现ICallbackEventHandler接口,在接口包含的方法中根据传递的参数分别调用不同的处理方法,然后返回结果;

2、              Client端注册回调函数(当然你也可以在Server端注册),然后实现处理回调结果的函数。其中,如果对Context能干灵活运行,你就可以做出非常好的效果了。

   在我给出的完整例子中,你们可以看到更完整的处理逻辑和更漂亮的特效,当然,增加的代码还是很少的!

 

   有将近一年没有写Blog了,手也比较生了。以前cnblogs的文章我是基本上天天都看的,现在一两个星期看一次就不错了,还是走马观花的浏览几篇而已。如今每天都是为了生活而奔波,人在江湖,身不由己呀!

   发了半天牢骚,我也预告一下,我会在最近写一些介绍Atlas的文章。其实Atlas也有很多人都写过了,不过大都是根据官方文档的模式写的,而最近发布的几版CTP变化挺大的(实现的功能也比较诱人!),对新特性介绍的文章比较少,所以我就来献丑了,希望对大家使用Atlas有所帮助。

posted on 2006-03-31 10:47 Leon.Zhou 阅读(15858) 评论(36)  编辑 收藏 所属分类: .Net

评论

#1楼  2006-03-31 11:16 涟漪勇      

不错,说的有理!   回复  引用  查看    

#2楼  2006-03-31 11:34 anchky      

期待博主Atlas的文章!   回复  引用  查看    

#3楼  2006-03-31 13:10 henry      

不知道Asp.net2.0中具有Post功能的控件是实现了主接口.
如果有的话在GetCallbackResult()返回前再加多个委托就更好了.
有空也去了解一下Asp.net 2.0

  回复  引用  查看    

#4楼  2006-03-31 14:27 Dflying Chen      

显然使用UpdatePanel比较简单一点,我觉得这个功能纯粹是鸡肋。   回复  引用  查看    

#5楼  2006-03-31 15:42 Boler Guo      

楼主好样的,这个功能从beta1开始一直变,每版都不一样~   回复  引用  查看    

#6楼  2006-03-31 21:20 AndyDavis      

下载的示例代码,测试基本成功。发现一点小问题,请见:
http://andydavis.cnblogs.com/archive/2006/03/31/363896.html   回复  引用  查看    

#7楼  2006-04-08 23:48 civ3's .NET studying      

不错!这种方式比MagicAjax更灵活!
不过好像对Firefox等浏览器兼容会有些问题?请教有何解决办法?   回复  引用  查看    

#8楼  2006-04-26 23:10 James Chen      

高,实在是高。我在WORKSHOP培训的时候,就因为这个ICallbackEventHandler接口搞得一头雾水。现在看了你的示例之后,感觉很多原本疑惑的地方都清楚了。   回复  引用  查看    

#9楼  2006-04-29 16:50 hayatodragon      

To civ3's .NET studying
博主的代码只要稍微修改一下就可以让Firefox正常显示了
请看一下
http://dragoon.cnblogs.com/archive/2006/04/29/388835.html   回复  引用  查看    

#10楼  2006-05-05 22:26 ★DotDesign      

嘿嘿!下载你了的源码来看啦!很不错!只是在测试的过程中出现了一个Bug,如果将几个结果同时提交到服务器上的话,那么只有最后一个Button的事件事以被处理,其它的(二个)一个处于等待状态。。。   回复  引用  查看    

#11楼  2006-05-15 17:09 乐乐MS [未注册用户]

请问楼主 数据库在那呢?   回复  引用    

#12楼  2006-05-16 14:33 乐乐MS [未注册用户]

把onclick="CallServer1(TextBox1, Label1)"换成CallServer1(TextBox1, Literal1)" 为什么就不行了   回复  引用    

#13楼  2006-06-23 12:44 nZAI [未注册用户]

神奇的代码,特别的gridview的刷新,正是我所找寻的代码,比苦苦啃Atlas有滋味多了   回复  引用    

#14楼  2006-07-07 00:12 ylhyh [未注册用户]

我的VS版本是:8.0.50727.42 (RTM.050727-4200)
两个函数的声明方式必须这样:

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{

}
string ICallbackEventHandler.GetCallbackResult()
{

}

不能以public修饰!
  回复  引用    

#15楼  2006-07-07 19:11 ylhyh [未注册用户]

Leon.Zhou ,还有一个问题请教,比如说我有两个DropDownList,暂且说DDL1和DDL2吧:

DDL1 onchange时,我用这种刷新方法更新了DDL2中的Items,但为什么我在后台代码中却取不到DDL2的SelectedItem?

  回复  引用    

#16楼  2006-07-23 23:45 O_O [未注册用户]

代码有问题, 版主没有测过就放上来....
TextBox1, Label1 在生成页面时就已经不是TextBox1, Label1的名称了,
CallServer(TextBox1, Label1) 根本就找不到这两个对象...   回复  引用    

#17楼  2006-07-27 10:25 志清 [未注册用户]

@ylhyh
因为是页面中脚本生成的Items,服务器端并不知道,所以第二个DDL可以用Request来得到值,这个控件一定要记得有name属性,不然也得不到值。   回复  引用    

#18楼  2006-08-31 18:13 fzsf [未注册用户]

本人加上了一个文件上传控件<INPUT id="FileCollection" type="file" name="File" style="width: 437px">,想在选择了上传的图片后,点击某个按钮,回调后台的生成缩略图的方法ShowSmallImg(),发现方法中:
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;

上面的files 为空。但是如果我点击的是一个服务器的bttn按钮,不通过回调,二是直接执行该服务器bttn按钮在后台的Click事件代码,发现其中代码
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
定义的files 确有一个对象,不为空。
请问这是为什么?

我现在福州做项目,想做一个批量上传图片并在本页面浏览缩略图的网页,用这种回调的方法能否实现在同一个页面浏览刚上传的图片?
好急的哦
  回复  引用    

#19楼  2006-09-06 21:12 黄鹤鹏      

好东西喔,不过复制这个代码测试时发现注册的事件ReceiveServerData根本就不执行,是什么原因喔   回复  引用  查看    

#20楼  2006-09-21 22:53 suqx520 [未注册用户]

为什么我测试你上面所写的代码根本就不行呀!
说什么少了对象了呀!
晕……

<%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;
说这段代码少了一个对象了呀!   回复  引用    

#21楼  2006-09-24 17:56 杨[匿名] [未注册用户]

在有些空间上用不了,怪,说是缺少对象,不知道为什么?   回复  引用    

#22楼  2006-11-07 20:16 张辰      

@杨[匿名]
你们肯定少了在页面继承接口ICallbackEventHandler   回复  引用  查看    

#23楼  2006-12-07 11:25 赵翔 [未注册用户]

请问一下,这个无刷新的方法,可以使用在自定义的控件上吗?我试过了提示出错。请大家帮一下忙了   回复  引用    

#24楼  2006-12-21 15:29 nwp [未注册用户]

能否解释一下"context = gridspan;'得用意,如果要修改为其他空间的一步刷新该如何修改"context"的参数呢?   回复  引用    

#25楼  2006-12-31 14:38 哑哑 [未注册用户]

谢谢博主的代码跟分析,真好!   回复  引用    

#26楼  2007-03-05 17:05 Ооo酷鱼      

看来微软还是有留一手的,不支持firefox   回复  引用  查看    

#27楼  2007-04-18 09:17 小闫 [未注册用户]

为什么输入的是中文就是乱码呢   回复  引用    

#28楼  2007-05-29 17:46 朋友 [未注册用户]

你的为什么不支持中文,恳请回答,回调显示的是乱码   回复  引用    

#29楼  2007-09-08 15:54 style [未注册用户]

谢谢博主的代码跟分析,真好

There are plenty of brands of very
fashionable shoes and boots that give you extra height. I'm
5'10 normally and 6'1 in the kick-ass pair of black buckled
dress shoes that have a couple of inches underneath.   回复  引用    

#30楼  2007-09-08 15:55 seduction [未注册用户]

好东西喔   回复  引用    

#31楼  2007-11-02 15:19 dfsdfsdf [未注册用户]

这个分析很好!楼主是怎样知道GetCallbackEventReference(control,string,string,string)第三个参数中函数的形式呢?在msdn的说明中还有对第四个参数的说明,楼主可以说一下吗?我看了很久也不是很明白,它说是用可以用第四个参数来传递第三个参数的值,好像和你说的不一样,请多多指教   回复  引用    

#32楼  2007-11-12 21:39 戴正凌      

真是恶梦, FF居然不行~~~~!~!拉倒了!!~~!~!~!
微软是不是做得太绝了?!   回复  引用  查看    

#33楼  2008-04-09 19:06 freewiller      

注册是时候为什么可以直接写控件的idCallServer(TextBox1, Label1)

所以 貌似如果是让usercontrol继承ICallbackEventHandler
会提示找不到控件的问题   回复  引用  查看    

#34楼  2008-05-04 13:07 ^_^ [未注册用户]

RaiseCallbackEvent 里面写 Response.Redirect("xxx.aspx");后就不执行了。怎么解决???   回复  引用    

#35楼  2008-05-05 17:16 星星fire [未注册用户]

还行!
如果对于那个gridview有许多数据,现要进行分页,能够实现吗?
请指教!   回复  引用    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      


相关链接: