用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 }

来源：http://www.cnblogs.com/shenba