AJAX筆記之三:UpdateProgress

UpdateProgress 的使用方法非常簡單, 但是卻非常有用. 以下先示範它的用法:

<1>. 向頁面添加一個updatePanel, 並在裡面放一個label 和一個button .
<2>.添加一個UpdateProgress 控制項, 並把它的AssociatedUpdatePanelID 屬性設定為以上updatePanel的名稱.
<3>.切換到"源" 視圖, 編輯UpdateProgress 的ProgressTemplate 節點:

    <asp:UpdateProgress AssociatedUpdatePanelID="upInq" ID="upgCUser" runat="server" >
        <ProgressTemplate>
            <img id="imgUpg" alt="" src="resources/wait.gif" runat="server" /><span style="COLOR: #ff0000">正在擷取資料 </span>
        </ProgressTemplate>
    </asp:UpdateProgress>

<4>設定button的點擊事件代碼:
system.threading.thread.sleep(4000);
<5>好啦, 運行項目, 點擊按鈕, 就會發現一個旋轉的小表徵圖(當然, 取決於你的圖片), 和一串紅色的字: 正在擷取資料, 4秒後, 自動消失.

需要說明的是: 圖片是不一定需要的, 也可以只有文字, 在ProgressTemplate 之間的內容是可以隨意編輯的, 可以是任意的元素. 另外, 它的DisplayAfter 屬性的預設值500 就是比較合適的值, 不建議修改. 這是以毫秒為單位的等待的時間, 當超過這個時間, 它就顯示出來, 當updatePanel 更新完畢, 它就隱藏.  所以, 如果把這個時間設定得過短, 每次都會看到UpdateProgress 閃來閃去, 非常影響使用者體驗.

如果是區域網路應用, 伺服器總是會很快返回, 就沒有必要使用這個控制項.