ASP.NET AJAX：UpdatePanel 搭配 Web Service 呼叫實現非阻塞 UI

前言

UpdatePanel 簡化部分更新，但若需呼叫耗時 Web Service，客戶端腳本非同步呼叫可避免瀏覽器凍結。本文示範建立 Web Service 並透過 JavaScript 呼叫，搭配 UpdatePanel 顯示結果。

先決條件

• Visual Studio 2005 / Visual Web Developer Express
• 支援 AJAX 的 ASP.NET 網站
• Northwind 資料庫與 NorthwindConnectionString 連線字串

建立 Web Service

1. 新增 ProductQueryService.asmx。
2. 匯入 System.Data、System.Data.SqlClient、System.Configuration、System.Web.Script.Services。
3. 類別標記 [ScriptService] 允許客戶端呼叫。
4. 實作 GetProductQuantity：查詢庫存並 Thread.Sleep(3000) 模擬延遲。

[WebMethod]
public string GetProductQuantity(string productID)
{
    // ... ADO.NET 查詢 UnitsInStock ...
    System.Threading.Thread.Sleep(3000);
    return unitsInStock;
}

前端呼叫與 UpdatePanel 整合

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/ProductQueryService.asmx" />
    </Services>
</asp:ScriptManager>

<script type="text/javascript">
function callService() {
    var productId = $get('ProductIdTextBox').value;
    ProductQueryService.GetProductQuantity(productId, onSuccess, onFailure);
}
function onSuccess(result) {
    $get('ResultLabel').innerHTML = '庫存: ' + result;
    // 可選：觸發 UpdatePanel 更新其他區塊
    __doPostBack('UpdatePanelTrigger', '');
}
function onFailure(error) { alert(error.get_message()); }
</script>

優勢

• Web Service 呼叫不阻塞 UI，使用者可繼續操作。
• UpdatePanel 負責複雜區塊局部更新，Web Service 處理純資料查詢，職責分離。

總結

結合 ScriptService、客戶端 Proxy 與 UpdatePanel，可構建回應迅速、職責清晰的 AJAX 應用。