建置 ASP.NET AJAX 開發環境：架構圖解、元件安裝與專案設定

ASP.NET AJAX (原名 Atlas) 是微軟為 ASP.NET 2.0 提供的 AJAX 框架，包含**客戶端 JavaScript 庫** (OOP 擴充、元件模型、網路堆疊) 與**伺服器端控制項** (ScriptManager、UpdatePanel、UpdateProgress、Timer)，實現無縫部分頁面更新。本文說明架構、安裝步驟、專案設定與常見問題。

架構概覽

核心層級

• 客戶端庫 (MicrosoftAjax.js)：命名空間 (`Sys`)、類別繼承、介面、列舉、事件、屬性描述符、元件生命週期 (`create`/`initialize`/`dispose`)、`Sys.Net.WebRequest` 統一網路 API、序列化 (`Sys.Serialization`)。
• 伺服器端控制項：
  `ScriptManager`：管理腳本參考、服務參考、部分更新協調。
  `UpdatePanel`：定義部分更新區域 (觸發條件：`ChildrenAsTriggers`、`Triggers`)。
  `UpdateProgress`：顯示更新進度模板。
  `Timer`：週期性觸發 PostBack。
• Web Services 整合：`[ScriptService]`、`[ScriptMethod]` 屬性自動產生 JavaScript Proxy，支援 JSON 序列化、型別轉換、例外處理。
• AJAX Control Toolkit：社群開源控制項庫 (AutoComplete、Calendar、ModalPopup、Rating、Slider...)，需額外安裝。

安裝與專案設定步驟 (ASP.NET 2.0 / 3.5)

1. 安裝 ASP.NET AJAX Extensions：
   .NET 3.5 內建 (無需額外安裝)。
   .NET 2.0 需下載安裝 ASP.NET AJAX 1.0 Extensions (含 `System.Web.Extensions.dll`)。
2. 安裝 AJAX Control Toolkit (選用)：
   下載 原始碼/二進位，參考 `AjaxControlToolkit.dll`，工具箱新增項目。
3. web.config 設定 (ASP.NET 2.0 需手動，3.5+ 專案範本自動)：

<configSections>
  <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
    <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
      <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
      <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
        <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
        <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
        <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" />
      </sectionGroup>
    </sectionGroup>
  </sectionGroup>
</configSections>

<system.web>
  <pages>
    <controls>
      <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
    </controls>
  </pages>
  <httpHandlers>
    <remove verb="*" path="*.asmx" />
    <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
  </httpHandlers>
  <httpModules>
    <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  </httpModules>
</system.web>

<system.webServer> <!-- IIS 7+ 整合模式 -->
  <validation validateIntegratedModeConfiguration="false" />
  <modules>
    <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  </modules>
  <handlers>
    <remove name="WebServiceHandlerFactory-Integrated" />
    <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <add name="ScriptResource" verb="GET,HEAD" path="ScriptResource.axd" preCondition="integratedMode" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  </handlers>
</system.webServer>

最小可行頁面範例

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>ASP.NET AJAX Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblTime" runat="server" Text="初始時間" />
                <br />
                <asp:Button ID="btnRefresh" runat="server" Text="更新時間" OnClick="btnRefresh_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <div class="loading">載入中...</div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

protected void btnRefresh_Click(object sender, EventArgs e) {
    System.Threading.Thread.Sleep(1000); // 模擬耗時運算
    lblTime.Text = DateTime.Now.ToString("HH:mm:ss.fff");
}

常見問題與解決

遷移建議：ASP.NET Core 時代的 AJAX

• **不再需要** `ScriptManager`/`UpdatePanel`/`MicrosoftAjax.js`。
• 採用 **fetch / axios / jQuery AJAX** 呼叫 **ASP.NET Core Web API / Minimal API** (回傳 JSON)。
• 前端渲染：Blazor (WebAssembly/Server)、React、Vue、Alpine.js、HTMX。
• 部分更新模式：`` (Razor Pages) + HTMX `hx-get` / `hx-trigger`，或 Blazor 元件化。
• SignalR 取代 `Timer` 輪詢，實現真正伺服器推播。

ASP.NET AJAX 是當年將 AJAX 引入 .NET 開發主流的關鍵產品，其 `ScriptManager`/`UpdatePanel` 模式極大降低了門檻。但隨著前端生態演進，**伺服器端部分更新模式已非主流**。新專案建議採用 **Web API + 客戶端框架** 或 **Blazor**，架構更清晰、效能更優、生態更豐富。