ASP.NET AJAX：在客戶端腳本中擴充 UpdateProgress 控制項

前言

UpdateProgress 顯示非同步回發進度。本教學示範使用 PageRequestManager 客戶端 API，為其加入「取消回發」按鈕與動態顯示/隱藏邏輯。

先決條件

• Visual Studio 2005 / Visual Web Developer Express
• 支援 AJAX 的 ASP.NET 網站

實作步驟

1. 新增 ASPX 頁面，切換至設計檢視。
2. 從工具箱「AJAX Extensions」拖入 ScriptManager、UpdatePanel、UpdateProgress。
3. 於 UpdateProgress 模板內放置「取消」按鈕與進度訊息區塊。

客戶端腳本關鍵點

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function(sender, args) {
    $get('UpdateProgressDiv').style.display = 'block';
});
prm.add_endRequest(function(sender, args) {
    $get('UpdateProgressDiv').style.display = 'none';
});
$get('CancelButton').onclick = function() {
    prm.abortPostBack();
};

總結

善用 PageRequestManager 事件 (beginRequest/endRequest) 與 abortPostBack()，可輕鬆打造具取消功能的進度指示器，提升使用者體驗。