Ajax: Modal UpdateProgress for UpdatePanel with

xblues

在页面中引入部分更新面板，是页面动态更新，而不刷新页面。
同时显示一个进度状态，让用户知道这是需要等待的操作。
最有用的是：更新的时候增加了一个蒙板效果，遮住整个页面，是用户不能够在更新的时候，操作页面，只能等待。



首先建立如下两个样式

1. /*Modal UpdateProgress for UpdatePanel*/
   
2. #progressBackgroundFilter {
   
3.     position:fixed;
   
4.     top:0px;
   
5.     bottom:0px;
   
6.     left:0px;
   
7.     right:0px;
   
8.     overflow:hidden;
   
9.     padding:0;
   
10.     margin:0;
    
11.     background-color:#000;
    
12.     filter:alpha(opacity=50);
    
13.     opacity:0.5;
    
14.     z-index:1000;
    
15. }
    
16. 
    
17. #processMessage  
    
18. {
    
19.     text-align:center;
    
20.     width:20%;
    
21.     border:solid 1px #000;
    
22.     padding:10px;
    
23.     background-color:#fff;
    
24.     z-index:1001;
    
25.     position:fixed;
    
26.     top:30%;
    
27.     left:40%;
    
28. }/*Modal UpdateProgress for UpdatePanel*/

复制代码

在页面中引入ScriptManager

1.     <asp:ScriptManager ID="ScriptManager1" runat="server">
   
2.     </asp:ScriptManager>

复制代码

再增加UpdatePanel

1.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   
2.         <ContentTemplate>
   
3.             <fieldset>
   
4.                 <legend>Title here</legend>
   
5.                 <div style="text-align:center;">
   
6.                 <asp:Button ID="btn1" Text="Hit Me!" runat="server" onclick="btn1_Click" />
   
7.                 <asp:UpdateProgress ID="UpdateProgress1" runat="server"
   
8.                     AssociatedUpdatePanelID="UpdatePanel1"
   
9.                     DisplayAfter="100"
   
10.                     DynamicLayout="true">
    
11.                     <ProgressTemplate>
    
12.                         <div id="progressBackgroundFilter"></div>
    
13.                         <div id="processMessage">
    
14.                             <img src="../images/loading.gif" alt="Progress" /> Please Wait...
    
15.                         </div>
    
16.                     </ProgressTemplate>
    
17.                 </asp:UpdateProgress>
    
18.                 <asp:Label ID="lbMSG" Width="500" runat="server" Text="" />
    
19.                 </div>
    
20.             </fieldset>
    
21.         </ContentTemplate>
    
22.     </asp:UpdatePanel>

复制代码

解释一下，上面的代码：
<fieldset> 边框线
<legend> 出现在边框线中的标题
<div style="text-align:center;"> 是边框线内部的所有元素居中
<asp:Button ID="btn1" Text="Hit Me!" runat="server" onclick="btn1_Click" /> 触发页面更新的按钮（一般是需要时间比较长的后台处理功能）
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 进度条部分
AssociatedUpdatePanelID="UpdatePanel1" 把进度条和更新面板ID联系起来
DisplayAfter="100" 延迟100毫秒才显示进度条（防止页面闪烁）
DynamicLayout="true"> 动态生成进度条
<div id="progressBackgroundFilter"></div> 加入灰色半透明遮罩，罩住整个浏览器页面，防止页面更新期间，用户对页面进行任何操作。
<div id="processMessage"> 在这个层里面显示进度状态条
<img src="../images/loading.gif" alt="rogress" /> Please Wait... 进度条其实是一个动态的GIF
<aspabel ID="lbMSG" Width="500" runat="server" Text="" /> 用于从后台返回更新成功的消息（页面postback以后返回的内容）


具体可以参考这一篇文章：
http://blogs.visoftinc.com/archive/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited.aspx

效果如下图：

                               
登录/注册后可看大图

xblues

这里还有一篇是通过逐个关闭页面上的控件（按钮）来达到使用户在页面更新期间不能够操作页面的。
要加入好几个脚本, 但是这几个脚本都是固定的，copy过来就用的固定脚本。所以要想了解原理的话去看看原理。
有时间的话，copy就可以了。

参考文章：
http://aspnet.4guysfromrolla.com/articles/061108-1.aspx

直接在页面中加入这部分代码，就可以单独禁用按钮，和蒙版的作用一样，当然没有蒙版COOL啦。

1.         <h3>Client-Side Event Handler Log</h3>
   
2.         <div id="logOutput" />
   
3. 
   
4.         <script type="text/javascript">
   
5.             // Create the event handlers for PageRequestManager
   
6.             var prm = Sys.WebForms.PageRequestManager.getInstance();
   
7.             
   
8.             prm.add_initializeRequest(PageRequestManager_initializeRequest);
   
9.             prm.add_beginRequest(PageRequestManager_beginRequest);
   
10.             prm.add_endRequest(PageRequestManager_endRequest);
    
11.             
    
12.             function PageRequestManager_initializeRequest(sender, args)
    
13.             {
    
14.                 logEvent("initializeRequest");
    
15.             }
    
16. 
    
17.             var uiId = '';
    
18. 
    
19.             function PageRequestManager_beginRequest(sender, args)
    
20.             {
    
21.                 logEvent("beginRequest");
    
22. 
    
23.                 var postbackElem = args.get_postBackElement();
    
24.                 uiId = postbackElem.id;
    
25.                
    
26.                 postbackElem.disabled = true;
    
27.             }
    
28. 
    
29.             function PageRequestManager_endRequest(sender, args)
    
30.             {
    
31.                 logEvent("endRequest");
    
32.             }
    
33.             
    
34.             var count = 1;
    
35.             function logEvent(msg)
    
36.             {
    
37.                 var logOutput = document.getElementById('logOutput');
    
38.                 var rightNow = new Date();               
    
39.                 logOutput.innerHTML += '(' + count + ') ' + msg + ' (' + rightNow.toTimeString() + ')
    
40. ';
    
41.                 count++;
    
42.             }
    
43.         </script>

复制代码

                               
登录/注册后可看大图

hoopoos

如果IE成为这世界上唯一的浏览器，脚本要多强大有多强大，效率要多高有多高，但是这是不可能的事情，所以这就是个悖论。这就好像只有暴政的帝国才能造就伟大的工程（长城，金字塔）