2012年7月31日 星期二

Asp.net+Jquery+UpdatePanelAnimationExtender达成loading效果

http://blog.csdn.net/lee576/article/details/3215978
在AJAX有個很讚的控制項(應該是說 在AJAX Control ToolKit裡面)
他就叫做 UpdatePanelAnimationExtender
為什麼會使用它呢 ...!? jQuary的構成 ... 不外乎就是JavaScript
使用 UpdatePanelAnimationExtender 的動畫效果(恩 可以用來呼叫javascript) 可以輕鬆的達到我們的目標呢
現在 讓我們開始吧 ...
對了 附帶一提 ... 其實我沒有在<head> 裡面引入jquery.js,jquery.blockUI.js 我用了另一種方法 ...
在AJAX的ScriptManager 加入Scripts 如下(恩 這個其實是Control ToolKit裡面的控制項,跟ScriptManager有同樣效果) 

        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager" runat="server" EnableScriptGlobalization="True" EnablePageMethods="True">
            <Scripts>
                <asp:ScriptReference Path="js/jquery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Path="js/jquery.blockUI.js">
                </asp:ScriptReference>
            </Scripts>
        </ajaxToolkit:ToolkitScriptManager>

  首先 在<heade> </head>之間 加入以下JavaScript 
1     <script type="text/javascript">
2         function ajaxStart(){ $.blockUI({message: '<h3></br><img src="img/loading/Loading2.gif" /> 資料載入中...</h3>'}); }
3         function ajaxStop(){ $.unblockUI(); }
4     </script>
當然囉 ... 可以自己寫 ... 我這邊的範例 是做一個 有Loading圖片 和 資料載入中... 字樣的message,麻煩自由發揮 ...

以下 是重點囉~~~
在你有UpdatePanel的地方 都給他放上一個UpdatePanelAnimationExtender
TargetControlID 記得要設定你的UpdataPanel ... 不然沒有用的唷~
然後 請看以下程式
01         <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender" runat="server" TargetControlID="UpdatePanel1">
02                             <Animations>
03                     <OnUpdating>
04                         <Sequence>
05                             <ScriptAction script="ajaxStart();" />
06                         </Sequence>
07                     </OnUpdating>
08                     <OnUpdated>
09                         <sequence>
10                             <ScriptAction script="ajaxStop();" />
11                         </sequence>
12                     </OnUpdated>
13                 </Animations>
14         </ajaxToolkit:UpdatePanelAnimationExtender>

大略說明一下好了 ... 在<Animations>標籤 可以設定 你再非同步執行開始的時候 要做什麼事情<OnUpdating>,在非同步執行結束的時候要做什麼事情<OnUpdated>
所以呢 ~ 我們就在這邊 呼叫剛剛寫在<head> 裡面的javascript
這樣就大功告成了~~

其實 這個方法蠻簡單的 ...當然 可以做的更花俏~畢竟UpdatePanelAnimationExtender不是吃素的
假如 我希望在完成後 順便提示使用者 完成了 ... 我該怎麼做呢!?
首先 在剛剛加入的javascript裡面 新增一個function
1 function ajaxComplete(){ 
2   $.blockUI({message: '<h3></br><img src="img/complete.gif" /> 資料載入完成</h3>'}); 
3   }
然後 在<OnUpdated>的地方 稍微增加一些東西 ...
1                     <OnUpdated> 
2                         <sequence> 
3                             <ScriptAction script="ajaxStop();" /> 
4                             <ScriptAction script="ajaxComplete();" /> 
5                             <ScriptAction Duration="1" script="ajaxStop();" /> 
6                         </sequence> 
7                 </OnUpdated>
好了好了 完成了 ... 這邊意思是
第三行 -在非同步執行完成後 先呼叫ajaxStop();
第四行 -呼叫 剛剛加入的ajaxComplete(); 讓它顯示出 資料載入完成的字樣
第五行 -1秒過後 (Duration) 呼叫ajaxStop(); 解除頁面Block ...
至於其他變化型,請自由發揮囉 ~

沒有留言:

張貼留言