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

发布时间：2014年10月30日 / 分类：ASP.NET / 13,374 次浏览 / 评论

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

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

var prm = Sys.WebForms.PageRequestManager.getInstance();

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

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

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

 // 开始请求事件
 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

 // 结束请求事件
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

BeginRequestHandler和EndRequestHandler稍后给出。

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

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

引入js文件：

<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.blockUI.min.js"></script>

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

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

function BeginRequestHandler(sender, args) {
	$.blockUI({ message: '<h2>正在处理中...</h2>' });
}

function EndRequestHandler(sender, args) {
	$.blockUI({
		message: "获取完毕",
		fadeIn: 700,
		fadeOut: 700,
		timeout: 2000,
		showOverlay: false,
		centerY: false,
		css: {
			width: '200px',
			top: '10px',
			left: '',
			right: '10px',
			border: 'none',
			padding: '5px',
			backgroundColor: '#000',
			'-webkit-border-radius': '10px',
			'-moz-border-radius': '10px',
			opacity: .6,
			color: '#fff'
		}
	});
}

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

先看看效果：

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

WebForm1.aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/jquery.blockUI.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 官方参考：http://msdn.microsoft.com/zh-cn/library/bb311028.aspx

            // 绑定开始请求事件
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

            // 绑定结束请求事件
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function BeginRequestHandler(sender, args) {
                $.blockUI({ message: '<h2>正在处理中...</h2>' });
            }

            function EndRequestHandler(sender, args) {
                $.blockUI({
                    message: "获取完毕",
                    fadeIn: 700,
                    fadeOut: 700,
                    timeout: 2000,
                    showOverlay: false,
                    centerY: false,
                    css: {
                        width: '200px',
                        top: '10px',
                        left: '',
                        right: '10px',
                        border: 'none',
                        padding: '5px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .6,
                        color: '#fff'
                    }
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    北京当前天气：<asp:Literal ID="Literal1" runat="server" Text="还没获取过..."></asp:Literal>
                    <br />
                    <br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="获取" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

WebForm1.aspx.cs文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Text;

namespace WebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            using (WebClient client = new WebClient())
            {
                client.Encoding = Encoding.UTF8;
                var result = client.DownloadString("http://www.weather.com.cn/data/sk/101010100.html");
                var jsonObject = JObject.Parse(result);

                Literal1.Text = string.Format("温度：{0}℃，湿度：{1}，时间：{2}。", jsonObject["weatherinfo"]["temp"].ToString(), jsonObject["weatherinfo"]["SD"].ToString(), DateTime.Now.ToString());
            }
        }
    }
}

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

关键字: blockUI UpdatePanel