當ASP.NET AJAX遇上jQuary -- 使用BlockUI插件

2008-08-05 置頂文章

11172
0
jQuary
2008-08-31

常常~在非同步執行的時候不知道該怎麼告訴使用者 ... 有時候，執行時間過久，使用者等的不耐煩了

或者是，在非同步執行的時候，使用者無聊，亂按按鈕怎麼辦 !?

這時候最常見的作法是把整個頁面Block起來

參考 ASP.NET 魔法學院的例子-->在 ASP.NET 使用 jQuery BlockUI 插件

裡面提到的是把javascript 註冊在ScriptManager裡面 but ... 現在遇到了一個問題 ...

經常!!!只會呼叫$.blockUI(); 不會呼叫到$.unblockUI();

有時候真的覺得很悶(尤其在主板頁裡面)，因為沒呼叫解除，什麼事情都做不了= =、 ...這時候我們該怎麼辦才好呢!?

常常~在非同步執行的時候不知道該怎麼告訴使用者 ... 有時候，執行時間過久，使用者等的不耐煩了

或者是，在非同步執行的時候，使用者無聊，亂按按鈕怎麼辦 !?

這時候最常見的作法是把整個頁面Block起來

參考 ASP.NET 魔法學院的例子-->在 ASP.NET 使用 jQuery BlockUI 插件

裡面提到的是把javascript 註冊在ScriptManager裡面 but ... 現在遇到了一個問題 ...

經常!!!只會呼叫$.blockUI(); 不會呼叫到$.unblockUI();

有時候真的覺得很悶(尤其在主板頁裡面)，因為沒呼叫解除，什麼事情都做不了= =、 ...這時候我們該怎麼辦才好呢!?

當時後研究了一下 ...發現！其實在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 ... 不然沒有用的唷~

然後請看以下程式

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

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

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

以上

Phoenix 8/5

回首頁