波斯马BOSSMA Information Technology

使用jQuery blockUI插件为UpdatePanel提升用户体验

发布时间:2014年10月30日 / 分类:ASP.NET / 8,229 次浏览 / 评论

ASP.NET Webform开发模式中提供了一套对AJAX支持的控件,通过将要异步更新的内容放到UpdatePanel中,还是采用CodeBehind的开发模式,不需要编写额外的Javascript,即可以轻松的实现AJAX效果。当然如果想有些绚丽好看的动画效果,让异步更新不显得那么突兀,让用户等待时心里更有底,还得自己搞些CSS样式,写点Javascript脚本,甚至弄点图片点缀一下。这篇文章就是通过使用jQuery blockUI插件为UpdatePanel增加一些动画效果,从而提升用户体验。

ASP.NET中的UpdatePanel实现异步更新也是借助了Javascript的脚本能力,我们这里只关心其中的一个类:Sys.WebForms.PageRequestManager,这个类管理 UpdatePanel 控件在浏览器中的部分页更新。在使用UpdatePanel的页面中会自动生成这个类的实例,通过如下的方式即可获取到:

像服务器控件提供了一些事件可以绑定一样,PageRequestManager提供了一些事件,对应于其异步更新的一些处理节点,这里直接从MSDN摘抄过来:

initializeRequest 在开始处理异步请求之前引发。 可以使用此事件取消回发。
beginRequest 在开始处理异步回发、将回发发送到服务器之前引发。 可以使用此事件来设置请求标头,或开始一个动画以指示正在处理页面。
pageLoading 在收到服务器对异步回发的响应之后、页上任何内容更新之前引发。 可以使用此事件为更新的内容提供自定义转换效果。
pageLoaded 在因同步回发或异步回发而刷新页上的所有内容之后引发。 可以使用此事件为更新的内容提供自定义转换效果。
endRequest 在异步回发完成,并且控制权返回到浏览器之后引发。 可以使用此事件向用户提供通知或将错误记录到日志。

根据这些信息,只需要处理beginRequest和endRequest事件即可实现异步更新的提示效果:

BeginRequestHandler和EndRequestHandler稍后给出。

然后再看一下jQuery blockUI:这是一个很棒的弹出层插件,支持iframe,支持modal,样式可以随意定制。

使用Visual Studio的童鞋直接通过nuget安装即可jQuery blockUI,或者去https://github.com/malsup/blockui下载。

引入js文件:

对应PageRequestManager中的事件编写响应的处理代码:

请求时弹出“正在处理”的全屏半透明遮罩提示,请求完毕后右上角弹出“获取完毕”提示。

如果本地测试程序处理的比较快,正在处理的提示可能一闪而过,这里通过获取一个天气数据的例子来进行演示。

先看看效果:

updatepanel-process

updatepanel-success

源代码全部奉上,其中用了Newtonsoft.Json,记得先引用哦。

WebForm1.aspx文件:

WebForm1.aspx.cs文件:

 

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《使用jQuery blockUI插件为UpdatePanel提升用户体验

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论