ASP.NET 整合 JavaScript 技巧：ClientScriptManager 完整應用指南

ASP.NET Web Forms 提供 ClientScriptManager (Page.ClientScript) 統一管理客戶端腳本註冊，避免重複輸出、確保載入順序、支援部分更新。掌握其核心方法，能優雅整合 JavaScript 與伺服器端控制項。

核心方法對照表

實戰範例：按鈕點擊前確認、完成後提示、共用函式庫

protected void Page_Load(object sender, EventArgs e)
{
    // 1. 註冊共用函式庫 (僅輸出一次)
    const string libKey = "CommonScripts";
    if (!ClientScript.IsClientScriptBlockRegistered(libKey))
    {
        string lib = @"
            function confirmAction(msg) { return confirm(msg || '確定執行？'); }
            function showToast(msg, type) { 
                // 簡易 toast 實作或整合 toastr
                alert('[Toast] ' + msg); 
            }
        ";
        ClientScript.RegisterClientScriptBlock(this.GetType(), libKey, lib, true);
    }

    // 2. 按鈕點擊前確認 (注入 onclick)
    btnDelete.Attributes["onclick"] = "return confirmAction('確定刪除此筆資料？');";

    // 3. 非同步/同步完成後提示
    if (IsPostBack && hdnActionResult.Value == "Success")
    {
        ClientScript.RegisterStartupScript(
            this.GetType(), 
            "toastSuccess", 
            "showToast('操作成功！', 'success');", 
            true);
    }
}

UpdatePanel 部分更新時的特殊處理

ClientScriptManager 在非同步回發時**不會**重新輸出 StartupScript，需改用 ScriptManager：

// 同步 Postback 或首次載入
ClientScript.RegisterStartupScript(type, key, script, true);

// 非同步回發 (UpdatePanel 內觸發)
ScriptManager.RegisterStartupScript(this, type, key, script, true);

// 判斷是否在非同步回發中
if (ScriptManager.GetCurrent(Page)?.IsInAsyncPostBack == true)
{
    ScriptManager.RegisterStartupScript(...);
}
else
{
    ClientScript.RegisterStartupScript(...);
}

防重複註冊機制

• IsClientScriptBlockRegistered(key)：檢查 RegisterClientScriptBlock 是否已註冊
• IsStartupScriptRegistered(key)：檢查 RegisterStartupScript 是否已註冊
• Key 命名慣例："{TypeName}_{FunctionalName}"，如 "ProductList_InitDataTable"

進階：動態產生 JavaScript 物件傳遞伺服器端資料

var config = new
{
    ApiBaseUrl = ResolveUrl("~/api/"),
    PageSize = 20,
    UserRole = CurrentUser.Role,
    Tokens = new { AntiForgery = GetAntiForgeryToken() }
};

string script = $@"window.AppConfig = {JsonConvert.SerializeObject(config)};";
ClientScript.RegisterClientScriptBlock(this.GetType(), "AppConfig", script, true);

前端直接使用 window.AppConfig.ApiBaseUrl，避免內嵌 <%= %> 混亂 HTML/JS。

常見錯誤與最佳實務

現代化替代：Bundling、ES Modules、前端框架

• ASP.NET 4.5+ 內建 System.Web.Optimization Bundling/Minification
• 新專案建議：前後端分離，ASP.NET Core Web API + Vue/React/Angular，透過 API 交換資料，不再依賴伺服器端註冊腳本。
• 若維護舊專案，善用 ClientScriptManager 仍是最穩健的整合方式。

核心原則：**腳本註冊集中化、位置正確化、依賴明確化、重複零容忍。**