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 文件的職責分離,更容易理解和維護。
由於ASP.NET 2.0 接觸不久,以上僅為個人摸索出的一點小經驗,如果有更方便的解決辦法,請各位朋友多多指教。
http://rchen.cnblogs.com/archive/2006/05/23/masterpage_with_css.html