ASP.NET 2.0 中配合Master Page 使用CSS

ASP.NET 2.0 中增加了內建的 MasterPage 的支援，這對我們來說是一個很大的便利。然而經過一段時間的使用，我發現 MasterPage 並不是那麼完美：嵌套的 MasterPage 不能支援設計時介面，以及下面要提到的Content Page 中增加 CSS 的問題。

通常，在沒有 2.0 之前，我們在頁面裡要增加一個 CSS 引用的文法如下：

<link rel="stylesheet" href="css/test.css" />

原本是很平常的做法。但是在一個 MasterPage 的子頁面中，出現了一個很尷尬的局面，就是：我們該把上述代碼放到什麼位置？
因為 MasterPage 的具體內容頁面中，只能定義一個個的 <asp:Content /> 標籤的內容。我們按照通常的做法在 aspx 裡面無法對頁面的 <header/> 內容進行控制。而這個 <link/> 標籤又必須放在 <header/> 內。我實驗過在 <asp:Content /> 內部加入這行代碼，但是會提示出錯的。
同時，我們也無法在 MasterPage 的 <header/> 內部放好一個 ContentPlaceHolder 用於將來放入 CSS 的引用代碼。
因此我的做法是定義了一個 helper 類如下：

static public class ControlHelper
{
    static public 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);
    }
}

這樣，在具體頁面，我們就可以通過如下代碼添加 CSS 引用：

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

並且，這個代碼支援在具體內容頁面，或者一個嵌套的 Master Page 中使用。

說到這裡也許有人會問，為什麼要把 CSS 分開成這樣來載入呢？有必要嗎？我把所有頁面的 CSS 定義到幾個公用 CSS 檔案裡豈不是很好？

其實，熟悉 web 標準的 HTML 製作的朋友一定知道，在比較完美的狀態下，頁面的 html 和用於表現的 CSS 應該徹底分離。而我們基於 web 標準的設計，通常是先做出一個 Master Page 中各個架構 div 的定位代碼，以及 header，footer 部分的修飾代碼。這些是每個內容頁面都要用到的，會放在一個統一的 CSS 裡面。其他的具體內容頁面，每個頁面又會有各自不同的內容的布局，修飾樣式，因此我把每個具體頁面特定的部分放在它自己的 CSS裡。這樣就形成了一個按照 Master Page 的實現層次（可嵌套），逐層合并的 CSS 模型。其好處是實現了每個 CSS 檔案的職責分離，更容易理解和維護。

你好，這是一個很好的想法。按照這個想法我做了一個簡單的 CustomControl，代碼如下：using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace WWFox.Web.UI.WebControls
{
    [DefaultProperty("CssText")]
    [ToolboxData("<{0}:CssLinker1 runat=server></{0}:CssLinker1>")]
    public class CssLinker: WebControl
    {
        protected override void Render(HtmlTextWriter writer)
        {
            
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            HtmlLink link = new HtmlLink();
            link.Href = CssPath;
            link.Attributes["rel"] = "stylesheet";
            link.Attributes["type"] = "text/css";
            this.Page.Header.Controls.Add(link);
        }

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string CssPath
        {
            get
            {
                String s = (String)ViewState["CssPath"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["CssPath"] = value;
            }
        }

    }
}
在多層嵌套的 MasterPage 中測試通過沒有問題！簡單的引用代碼如下： <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default"
 MasterPageFile="~/masterPage2.master" %>
<%@ Register TagPrefix="wwf" Assembly="WWFox" Namespace="WWFox.Web.UI.WebControls" %>

<asp:Content ID="content2" runat="server"
     ContentPlaceHolderID="cph1">
    <wwf:CssLinker id="CssLinker1" runat="server"
            CssPath="default.css" />     
</asp:Content>