ASP.NET 2.0 中優化 MasterPage 與 CSS 的整合技巧

ASP.NET 2.0 內建的 MasterPage 功能極大地簡化了網站版面的統一管理，但在實際開發中，開發者常遇到兩大痛點：巢狀 MasterPage 無法在設計時期正確渲染介面，以及內容頁面無法靈活引入獨立的 CSS 檔案。

內容頁面引入 CSS 的困境

在傳統 ASP.NET 開發中，引入樣式表只需在頁面 <head> 區塊加入 <link rel="stylesheet" href="css/test.css" />。然而使用 MasterPage 時，內容頁面只能透過 <asp:Content> 定義區塊內容，無法直接操作母版頁的 <head> 區域。若在 <asp:Content> 內強行加入 link 標籤，編譯器會報錯；而在 MasterPage 的 head 區預留 ContentPlaceHolder 也無法正常運作。

動態註冊 CSS 的解決方案

針對此問題，可建立一個靜態輔助類別，利用 HtmlLink 控制項在執行期動態將樣式表加入頁面 Header 控制項集合中：

public static class ControlHelper
{
    public static void AddStyleSheet(Page page, string cssPath)
    {
        HtmlLink link = new HtmlLink();
        link.Href = cssPath;
        link.Attributes["rel"] = "stylesheet";
        link.Attributes["type"] = "text/css";
        page.Header.Controls.Add(link);
    }
}

在內容頁面或巢狀 MasterPage 的 Page_Load 事件中即可輕鬆引入：

protected void Page_Load(object sender, EventArgs e)
{
    ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}

為何要分層管理 CSS？

遵循 Web 標準的關注點分離原則，將網站樣式依據 MasterPage 的實作層次拆分為多個 CSS 檔案：

• 基礎層 CSS：包含 MasterPage 共用的版面定位、Header/Footer 風格，所有內容頁面共享。
• 頁面專屬 CSS：每個內容頁面獨有的版面配置與修飾樣式，獨立維護。

這種「逐層合併」的 CSS 模型，不僅實現了職責分離，更讓樣式管理更直觀、維護成本更低，尤其適合大型專案的團隊協作開發。