Asp.net+Jquery+UpdatePanelAnimationExtender达成loading效果-优快云博客

在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

</script>

當然囉 ... 可以自己寫 ... 我這邊的範例是做一個有Loading圖片和資料載入中... 字樣的message，麻煩自由發揮 ...

以下是重點囉~~~

在你有UpdatePanel的地方都給他放上一個UpdatePanelAnimationExtender

TargetControlID 記得要設定你的UpdataPanel ... 不然沒有用的唷~

然後請看以下程式

0 1 < ajaxToolkit:UpdatePanelAnimationExtender ID ="UpdatePanelAnimationExtender" runat ="server" TargetControlID ="UpdatePanel1" >
0 2 < Animations >
0 3 < OnUpdating >
0 4 < Sequence >
0 5 < ScriptAction script ="ajaxStart();" />
0 6 </Sequence>
0 7 </OnUpdating>
0 8 < OnUpdated >
0 9 < sequence >
10 < ScriptAction script ="ajaxStop();" />
11 </sequence>
12 </OnUpdated>
13 </Animations>
14 </ajaxToolkit:UpdatePanelAnimationExtender>

大略說明一下好了 ... 在<Animations>標籤可以設定你再非同步執行開始的時候要做什麼事情<OnUpdating>，在非同步執行結束的時候要做什麼事情<OnUpdated>

所以呢 ~ 我們就在這邊呼叫剛剛寫在<head> 裡面的javascript

這樣就大功告成了~~

其實這個方法蠻簡單的 ...當然可以做的更花俏~畢竟UpdatePanelAnimationExtender不是吃素的

假如我希望在完成後順便提示使用者完成了 ... 我該怎麼做呢!?

首先在剛剛加入的javascript裡面新增一個function

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 ...

至於其他變化型，請自由發揮囉 ~

以上