ASP.NET 2.0 伺服器控制項客戶端功能開發：從簡單腳本到複雜元件庫部署

為什麼客戶端功能至關重要？

現代 Web 控制項（TreeView、TabStrip、ToolBar、GridView 啟用排序/分頁等）若無客戶端腳本支援，每次互動都需完整回傳，導致閃爍、延遲、伺服器負載高。ASP.NET 2.0 讓伺服器控制項能輸出 JavaScript/DHTML，實現豐富用戶體驗與高效能雙贏。

客戶端功能實作三大層次

層次一：簡單內嵌腳本（AddAttributesToRender）

適用於極簡單行為（彈出確認、變色、簡單驗證）。直接在渲染階段輸出 HTML 事件屬性。

public class ConfirmButton : Button
{
    public string ConfirmMessage { get; set; } = "確定執行？";

    protected override void AddAttributesToRender(HtmlTextWriter writer)
    {
        base.AddAttributesToRender(writer);
        writer.AddAttribute("onclick", string.Format("return confirm('{0}');", ConfirmMessage.Replace("'", "\\'")));
    }
}

使用：<cc:ConfirmButton runat="server" Text="刪除" ConfirmMessage="確定刪除？" />

層次二：複雜客戶端行為（獨立 .js 檔 + ScriptManager）

當邏輯超過幾行、需跨控制項共用、或涉及 DOM 操作/AJAX 時，必須將 JavaScript 封裝為獨立檔案，並透過 ScriptManager 註冊為腳本參考。

步驟

1. 建立 MyControl.js，定義命名空間與類別：

Type.registerNamespace('MyControls');
MyControls.AutoCompleteBox = function(element) { MyControls.AutoCompleteBox.initializeBase(this, [element]); }
MyControls.AutoCompleteBox.prototype = {
    initialize: function() {
        MyControls.AutoCompleteBox.callBaseMethod(this, 'initialize');
        $addHandler(this.get_element(), 'keyup', Function.createDelegate(this, this._onKeyUp));
    },
    _onKeyUp: function(e) { /* AJAX 呼叫取得建議清單 */ },
    dispose: function() { MyControls.AutoCompleteBox.callBaseMethod(this, 'dispose'); }
}
MyControls.AutoCompleteBox.registerClass('MyControls.AutoCompleteBox', Sys.UI.Control);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

2. 伺服器控制項繼承 ScriptControl（需引用 System.Web.Extensions.dll），實作 GetScriptReferences、GetScriptDescriptors：

[RequiredScript(typeof(ScriptManager))]
public class AutoCompleteBox : ScriptControl
{
    protected override IEnumerable GetScriptReferences()
    {
        yield return new ScriptReference("MyControls.AutoCompleteBox.js", "MyControlsAssembly");
    }
    protected override IEnumerable GetScriptDescriptors()
    {
        ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MyControls.AutoCompleteBox", ClientID);
        descriptor.AddProperty("serviceUrl", ServiceUrl);
        yield return descriptor;
    }
    public string ServiceUrl { get; set; }
}

3. 組件加上 [assembly: WebResource("MyControls.AutoCompleteBox.js", "application/x-javascript")]，並設定 .js 為 Embedded Resource。

層次三：腳本部署與效能最佳化

用戶端與伺服器端狀態同步

• 隱藏欄位： Page.ClientScript.RegisterHiddenField 或 <input type="hidden"> 保存客戶端狀態，回傳時伺服器讀取。
• Callback (ICallbackEventHandler)： 無完整回傳即可與伺服器交換資料，適合自動完成、即時驗證。
• UpdatePanel 部分更新： 將控制項置於 UpdatePanel 內，配合 Triggers 實現無縫 AJAX 體驗。

除錯與開發工具

• Visual Studio JavaScript 偵錯（中斷點、監看式、呼叫堆疊）。
• 瀏覽器開發人員工具（Console、Network、Elements）檢查腳本載入、錯誤、DOM 狀態。
• ScriptManager EnableScriptGlobalization、EnableScriptLocalization 支援多語系腳本資源。

最佳實務檢核表

• [ ] 所有客戶端邏輯封裝於命名空間，避免全域汙染。
• [ ] 實作 dispose() 釋放事件處理常式、計時器、DOM 參考，防記憶體洩漏。
• [ ] 使用 ScriptManager 管理腳本相依順序（如先載入 jQuery 再載入擴充外掛）。
• [ ] 生產環境啟用腳本合併、最小化、GZIP 壓縮、瀏覽器快取。
• [ ] 提供無腳本降級模式（Graceful Degradation），確保核心功能在 JS 停用時仍可運作。

結語

掌握「內嵌腳本 → 獨立 .js + ScriptControl → 部署最佳化」三階演進，即可打造兼具豐富互動、高效能、易維護的 ASP.NET 2.0 伺服器控制項。善用 ScriptManager 生態系，讓客戶端程式碼像伺服器端一樣模組化、版本化、可重複使用。