用AJAX.NET的客户端脚本实现UpdateProgress的效果

用过ajax.net框架里的updatePanel的用户肯定会知道updateprogress的作用，专门用来在执行异步操作显示等待信息，用法非常简单，往里面放一些图片或文字即可实现看起来很不错的效果。但是这种方式是在页面运行之前就已经设置好了，不管什么操作都显示同一张图片或者文字，不能针对某个具体的按钮或者发送对象来显示信息，比如针对保存操作就显示"保存中...",提交操作就显示"提交中...",也就是能通过编程方式稍微灵活控制一下。也许有人说可以多设置几个updatepanel，给每个updatepanel分配一个updateProgress，这也是种方法，但是生成的标记未免多了点。
最近看了一下AJAX.NET的客户端脚本文档，知道通过框架提供的脚本能够更加细微的控制要显示的内容，并且还可以加上"取消"按钮或连接，点击取消可停止asyncPostback。通过脚本实现需要自己定制个类似updateProgress的div或者span，另外还要添加页面事件，控制提示信息的可见性。主要用到的是客户端脚本里的页面事件，具体简单实现如下：

Code
 1<script language="javascript" type="text/javascript">
 2    function pageLoad()
 3    {
 4        // 添加事件
 5        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onBeginRequest);
 6        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);   
 7    }
 8    
 9    function onBeginRequest(sender, e)
10    {
11        var elem = e.get_postBackElement();
12        var requestManager = Sys.WebForms.PageRequestManager.getInstance(); 
13        
14        // 点击取消则停止 
15        if (requestManager.get_isInAsyncPostBack() & elem.id == "btnCancel" )
16        {
17             requestManager.abortPostBack();
18        }
19        
20        // 显示正在处理的信息 
21        if (elem.id != "btnCancel")
22        {  
23            dispUpdateProgress(String.format("{0} oper is processing.", elem.value), "");
24        } 
25    }
26    
27    function onEndRequest(sender, e)
28    {
29        dispUpdateProgress("", "none");
30    }
31    
32    //  控制显示提示信息
33    function dispUpdateProgress(msg, display)
34    {
35        $get("updateProgress").style.display = display;
36        $get("processingMsg").innerHTML = msg;
37    }
38    </script>
39 <form id="form1" runat="server">
40        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
41    <asp:UpdatePanel ID="up" runat="server">
42    <ContentTemplate>
43    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />&nbsp;&nbsp;
44    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSave_Click" />
45    <div id="updateProgress" style="display:none">
46    <span id="processingMsg"></span>
47    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
48    </div>
49    </ContentTemplate>
50    </asp:UpdatePanel> 
51    </form>

cs
1protected void btnSave_Click(object sender, EventArgs e)
2        {
3            Thread.Sleep(4000);
4        }