在 AJAX Extention 中有一個很方便的 UpdateProgress 可以使用, 我想這大家應該都已經知道了。不過, 我總覺得, 雖然這個 UpdateProgress 很好用, 它卻有一個很大的缺點, 就是你沒辦法把它放得很大、很明顯。像我習慣把它放在網頁的最上方 (也就是在 Update Panel 的上面), 但一旦使用者稍為捲動一下畫面, 這個 Progress Bar 就看不見了, 達不到提醒使用者的目的...
在 AJAX Extention 中有一個很方便的 UpdateProgress 可以使用, 我想這大家應該都已經知道了。不過, 我總覺得, 雖然這個 UpdateProgress 很好用, 它卻有一個很大的缺點, 就是你沒辦法把它放得很大、很明顯。像我習慣把它放在網頁的最上方 (也就是在 Update Panel 的上面), 但一旦使用者稍為捲動一下畫面, 這個 Progress Bar 就看不見了, 達不到提醒使用者的目的。
今天我總算找到一個簡單的方法, 使得原本單調的 Progress Bar 變得類似 Modal Window 的樣子, 效果並沒有差別太大。其原理是改用 AJAX Toolkit 裡的 UpdatePanelAnimationExtender, 並配合 IE 的 filter 效果。範例程式如下:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
...<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" BehaviorID="animation"
runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Sequence>
<Parallel duration="0" Fps="30">
<Condition ConditionScript="true">
<ScriptAction script="divWait.style.display='block';" />
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration="0" Fps="30">
<Condition ConditionScript="true">
<ScriptAction script="divWait.style.display='none';" />
</Condition>
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender><div id="divWait" style='display: none;'>
<div style='position: absolute; width: 100%; height: 200%; top: 0; left: 0; background: Black;
text-align: center; vertical-align: middle; filter: alpha(opacity=45);" >
</div>
<div style='position: absolute; left: 43%; top: 70%; background: White; text-align: center;
vertical-align: middle;">
<table border="1">
<tr>
<td>
<table>
<tr>
<td>
<asp:Image ID="Image1" runat="server" BorderStyle='None' ImageUrl='~/Images/Wheel.gif' />
</td>
<td>
<asp:Label ID="progressLabel" runat="server" Text="作業處理中，請稍候..." />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div><asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>
這裡有 UpdatePanelAnimationExtender 的說明與示範。不過在這個範例裡沒有解釋 ScriptAction 這個效果, 所以你如果對它特別有興趣, 必須在另一個網頁中進行查詢。原則上, 這個範例的重點在於 UpdatePanel 上方的幾個 div 項目, 或許你可以花點時間研究研究。
對了, 或許你會懷疑, 為什麼我會在最外圈的 div 下了 height: 200% 這個 style? 這是因為 CSS 裡的百分比單位是以視窗的長寬為準, 而不是以網頁的實際長寬為準。所以如果使用者捲動了網頁, 可能會看到奇怪的畫面。在我的網頁中, 把它調整為 200% 就行了。至於你的網頁, 請你自行調整。
此外, 當然, 我既然用了 IE 專用的 filter 效果, 就表示這個範例在 FireFox, Chrome 等其它瀏覽器上可能無效; 或許要等到類似 opacity 這個指令被所有瀏覽器都公開支援才會有簡單的解法。