在頁面呈現時顯示Ajax Loader

Question

這可能是一個簡單的問題，但是如何最好地使用ASP.NET中的AJAX加載器在頁面構建時提供加載對話框？

我目前有一個UpdatePanel和一個關聯的UpdateProgressPanel，它包含ProgressTemplate中的加載消息和gif。

目前我有一個頁面，onLoad（）去獲取業務實體，然後顯示它們。當它這樣做時，我想顯示一個AJAX加載器。

在頁面加載中沒有任何內容並且有一個隱藏的按鈕觸發onLoadComplete或unLoad（），然後等待按鈕單擊方法完成顯示UpdateProgressPanel會更好嗎？

Answer 1

我已經做了類似的Timer控件。你的OnLoad只打開計時器，頁面完成渲染。然後計時器（有一些最小的間隔值）完成骯髒的工作，正確顯示進度面板。切記關閉計時器作爲該過程的最後一步。

Answer 2

您可以在.Net以外的HTML中執行此操作。在你的ASPX頁面你有這樣的代碼：

 
<div id="loading">
 
<!-- Animated GIF or other indication that stuff is happening -->
 
</div> 

在你的頁面的最下方，右側前你可以有一個代碼片段看起來像這樣：

 
<script language="javascript">
 
    document.getElementById("loading").style.display = "none";
 
</script> 

圖形---只要它在頁面的頂部---將首先渲染。然後，所有onLoad內容都會發生，最後內聯JavaScript將在頁面底部發生。

很多時候我會禁用處於未加載狀態的按鈕，並在底部的JavaScript中啓用它們。這可以防止用戶在頁面準備好之前獲得點擊高興和觸發事件。

Answer 3

如果你真的想要細粒度的控制，你可以使用基於progressbar的AJAX預加載器。您可以對其進行配置，以便每次狀態發生變化時都能完成。即從0到4（5個就緒狀態），每個狀態進行20％。創建一個非常簡單。有一個容器div其中持有另一個div其width從0到100％的變化爲每個州20％的步驟。爲內部div添加背景色（例如：藍色），使其看起來像它的進度。 GMail我猜想它的預裝載器使用了類似的方法。

Answer 4

該帖子舊，但你可以看看http://ajax.net-tutorials.com/controls/updateprogress-control/