核心架構

ASP.NET AJAX 透過 ScriptManager + UpdatePanel 實現無刷新局部更新。UpdateProgress 控制項負責在非同步回發期間顯示載入指示器。

完整 .aspx 頁面代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="Demo.Demo" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX 局部刷新示範</title>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitRequest);
        prm.add_endRequest(EndRequest);

        function InitRequest(sender, args) {
            // 非同步回發開始：隱藏內容區，顯示載入動畫
            $get('detail').style.display = 'none';
            $get('UpdateProgress1').style.display = 'block';
        }

        function EndRequest(sender, args) {
            // 非同步回發結束：隱藏載入動畫，顯示內容區
            $get('detail').style.display = 'block';
            $get('UpdateProgress1').style.display = 'none';
        }

        function CancelClick() {
            if (prm.get_isInAsyncPostBack()) {
                prm.abortPostBack(); // 取消正在進行的非同步回發
            }
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="detail">
                    <asp:ImageButton ID="ibtnFBSJ" runat="server" 
                        ImageUrl="/images/ershoufang/bs/fbsj.gif" 
                        OnClick="ibtnFBSJ_Click" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

        <!-- 載入進度模板 -->
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
            AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
            <ProgressTemplate>
                <div style="text-align:center; padding:20px;">
                    <img src="/images/loading.gif" alt="載入中..." />
                    <br /><span>資料載入中，請稍候...</span>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <!-- 可選：取消按鈕 -->
        <input type="button" value="取消請求" onclick="CancelClick()" />
    </form>
</body>
</html>

後端代碼

protected void ibtnFBSJ_Click(object sender, ImageClickEventArgs e)
{
    // 模擬耗時操作 (2 秒)
    System.Threading.Thread.Sleep(2000);

    // 實際業務邏輯：重新綁定資料
    drpSortOrder.SelectedValue = ((int)ErShouFangJiChuZuFang.Order.ByPublishTime).ToString();
    PopulateDetails();
}

關鍵屬性說明

屬性/方法	說明
AssociatedUpdatePanelID	綁定目標 UpdatePanel，若省略則頁面上所有 UpdatePanel 觸發都會顯示
DisplayAfter	延遲顯示毫秒數，避免極快回發閃爍 (預設 500ms，範例設 0 立即顯示)
ProgressTemplate	自訂載入 UI，可放圖片、CSS 動畫、文字
PageRequestManager	客戶端全域物件，管理非同步回發生命週期事件

進階技巧

• 多 UpdatePanel 協調： 設定 UpdateMode="Conditional" 搭配 Triggers 精確控制觸發範圍。
• 自訂動畫： 結合 jQuery/Animate.css 在 InitRequest/EndRequest 中淡入淡出。
• 錯誤處理： 訂閱 PageRequestManager.endRequest 檢查 args.get_error() 並 args.set_errorHandled(true)。

效果展示

結語

UpdatePanel + UpdateProgress 是 ASP.NET WebForms 時代快速實現 AJAX 體驗的標準組合。雖然現代開發傾向 Web API + 前端框架，但在維護舊專案或快速原型時，此方案依然高效實用。