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

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


 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>


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

你可能感兴趣的:(progress)