在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>
<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>
<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>
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 }
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>
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 ...
至於其他變化型，請自由發揮囉 ~
沒有留言:
張貼留言