前言

在 ASP.NET WebForm 中，根據條件動態載入 JavaScript 或 CSS 檔案，可減少不必要的資源下載、實現主題切換或模組化載入。本文示範使用 HtmlGenericControl 在 Page.Header 動態插入 <link> 與 <script> 標籤。

必要命名空間

using System.Web.UI.HtmlControls;

動態新增 CSS 參考

public void RegisterCss(string cssPath, int index = 0)
{
    var link = new HtmlGenericControl("link");
    link.Attributes["type"] = "text/css";
    link.Attributes["rel"] = "stylesheet";
    link.Attributes["href"] = ResolveUrl(cssPath); // 解析 ~ 路徑
    
    // 插入到 Head 指定位置（0=最前，優先級最高）
    Page.Header.Controls.AddAt(index, link);
}

// 使用
RegisterCss("~/Content/themes/bootstrap.css");
RegisterCss("~/Content/themes/dark.css", 1); // 插在第二個

動態新增 JavaScript 參考

public void RegisterJs(string jsPath, int index = 0)
{
    var script = new HtmlGenericControl("script");
    script.Attributes["type"] = "text/javascript";
    script.Attributes["src"] = ResolveUrl(jsPath);
    
    Page.Header.Controls.AddAt(index, script);
}

// 使用
RegisterJs("~/Scripts/jquery-3.6.0.min.js");
RegisterJs("~/Scripts/app.js", 1);

進階：避免重複註冊

public void RegisterCssOnce(string key, string cssPath)
{
    if (Page.Header.FindControl(key) != null) return;
    var link = new HtmlGenericControl("link");
    link.ID = key;
    link.Attributes["type"] = "text/css";
    link.Attributes["rel"] = "stylesheet";
    link.Attributes["href"] = ResolveUrl(cssPath);
    Page.Header.Controls.Add(link);
}

進階：條件式載入（依瀏覽器、角色、功能開關）

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 依角色載入不同樣式
        if (User.IsInRole("Admin"))
            RegisterCss("~/Content/admin.css");
        else
            RegisterCss("~/Content/user.css");

        // 依 QueryString 載入特定模組 JS
        if (Request.QueryString["module"] == "chart")
            RegisterJs("~/Scripts/chart.min.js");
    }
}

注意事項與坑點

問題	原因	解決
Head 找不到（NullReference）	頁面缺少 <head runat="server">	MasterPage 或頁面必須有 <head runat="server">
路徑解析錯誤	直接用相對路徑	使用 ResolveUrl("~/path") 或 Page.ResolveClientUrl
重複載入	多次呼叫 Register	用 ID 檢查或 ClientScript.IsClientScriptBlockRegistered
載入順序錯誤	依賴關係（jQuery 必須在插件前）	控制 AddAt(index) 位置，或用 Bundling/Minification

現代化替代：Bundling & Minification / ClientLibraries

• ASP.NET 4.5+：System.Web.Optimization 打包壓縮，Scripts.Render("~/bundles/jquery")。
• ASP.NET Core：LibMan / npm + webpack/vite，<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />。
• SPA 架構：由前端建構工具完全管理，後端僅提供 API。

結語

HtmlGenericControl 動態插入 link/script 是 WebForm 時代靈活載入前端資源的標準做法。掌握 ResolveUrl、AddAt 排序、避免重複註冊三大關鍵，即可應付主題切換、條件載入、A/B 測試等場景。新專案請直接採用 Bundling 或前端建構工具鏈。