ASP.NET AJAX UpdateProgress 實作長時間作業等待提示

在 ASP.NET Web Forms 中執行耗時的伺服器端運算（如報表產生、大量資料匯入、外部 API 呼叫）時，若缺乏回饋，使用者容易誤以為系統當機而重複點擊。利用 UpdatePanel 搭配 UpdateProgress 可輕鬆實作「局部更新 + 等待提示」的 AJAX 體驗，無需撰寫 JavaScript 即可呈現載入中動畫或訊息。

完整頁面範例

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET AJAX 等待提示範例</title>
    <style>
        .loading-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.8); z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; color: #333;
        }
        .loading-spinner {
            border: 4px solid #f3f3f3; border-top: 4px solid #007bff;
            border-radius: 50%; width: 40px; height: 40px;
            animation: spin 1s linear infinite; margin-right: 12px;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="btnLongTask" runat="server" Text="執行耗時作業 (5秒)" 
                    OnClick="btnLongTask_Click" CssClass="btn btn-primary" />
                <br /><br />
                <asp:Label ID="lblResult" runat="server" ForeColor="Green" Font-Bold="true" />
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
            AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true">
            <ProgressTemplate>
                <div class="loading-overlay">
                    <div class="loading-spinner"></div>
                    <span>處理中，請稍候...</span>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

後置程式碼

protected void btnLongTask_Click(object sender, EventArgs e)
{
    // 模擬耗時作業 (實務請替換為真實業務邏輯)
    System.Threading.Thread.Sleep(5000);
    lblResult.Text = $"作業完成於 {DateTime.Now:HH:mm:ss}";
}

關鍵屬性說明

進階應用：顯示進度百分比

若需顯示真實進度 (如 0% → 100%)，單純 UpdateProgress 無法做到，需採用以下任一架構：

• SignalR：伺服器主動推送進度至客戶端，即時更新進度條。
• 輪詢：另開一個輕量 API 回傳進度，客戶端 `setInterval` 定時查詢。
• 背景工作 + 快取：將耗時任務移至 `HostingEnvironment.QueueBackgroundWorkItem` 或 Hangfire，進度寫入 `MemoryCache`/`Redis`，前端輪詢讀取。

常見問題與解決

1. 提示不顯示：確認 `ScriptManager` 存在、`UpdatePanel` 設定正確、按鈕在 `ContentTemplate` 內。
2. 全頁遮罩無法點擊：`DynamicLayout="true"` 且 CSS `z-index` 足夠高，確保遮罩層級高於其他元素。
3. UpdatePanel 外部按鈕觸發：設定 ``。