使用母版頁(yè)時(shí)內(nèi)容頁(yè)如何使用css和javascript
2024-09-06 12:41:21
供稿：網(wǎng)友
好處有了，問題也接著來了。原來在頻道頁(yè)和列表頁(yè)中有其各自的css引入和一些javascript函數(shù)，當(dāng)使用母版頁(yè)時(shí)，放在內(nèi)容頁(yè)中這些css樣式和javascript函數(shù)怎么處理呢？因?yàn)榇蠹抑溃褂媚赴骓?yè)的內(nèi)容頁(yè)是不能包含<head></head>標(biāo)記的，而css和javascript函數(shù)的聲明是要放到<head></head>中間的，這些css樣式和javascript函數(shù)如何處理呢？上網(wǎng)查了一下，大致有三種解決方案：方案一：把所有的css樣式和javascript函數(shù)放到母版頁(yè)的<head></head>中，我覺得這樣做的弊端就是導(dǎo)致母版頁(yè)的<head></head>區(qū)特別臃腫，同時(shí)如果原來兩個(gè)頻道頁(yè)中包含同名的css聲明或javascript函數(shù)，但卻是不同樣式或執(zhí)行不同操作，怎么辦呢？所以這第一種方案很快被我否定了。方案二是在內(nèi)容頁(yè)的PageLoad事件中通過代碼來指定本內(nèi)容頁(yè)的css文件。具體代碼如下：
代碼如下:
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);
}
}
這樣，在具體頁(yè)面，我們就可以通過如下代碼添加 CSS 引用：
代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}
這種解決方案的好處時(shí)可以在程序運(yùn)行時(shí)動(dòng)態(tài)更改所需的css文件，但是對(duì)javascript函數(shù)處理起來該怎么做呢？再說有必要把本該加在html代碼中的css和javascript通過cs代碼來加入嗎？因此，這種解決方案也很快被我否定了。剩下的第三種解決方案就是在母版頁(yè)的<head></head>中添加一個(gè)內(nèi)容控件，然后在內(nèi)容頁(yè)中在對(duì)應(yīng)的內(nèi)容控件中寫css和javascript代碼。聽起來這個(gè)這個(gè)解決方案應(yīng)該是最方便，最適宜的解決方法。可是當(dāng)我把ContentPlaceHolder控件拖放到<head></head中間時(shí)，vs2005卻報(bào)了下面的錯(cuò)誤：
白天的時(shí)候，看到這我就以為這種方法行不通了，差點(diǎn)就放棄了。晚上回家想找找更好的解決方案，可所有的文章基本上都是說的前兩種，對(duì)第三種解決方案有人說報(bào)錯(cuò)，不行。看來碰到這個(gè)提示后放棄的人還真不少。我沒理這個(gè)錯(cuò)誤，直接轉(zhuǎn)到內(nèi)容頁(yè)，，在內(nèi)容頁(yè)中插入以下代碼：
看了一下，內(nèi)容頁(yè)中沒有報(bào)錯(cuò)，看來有戲。可轉(zhuǎn)到內(nèi)容頁(yè)的設(shè)計(jì)視圖一看，出現(xiàn)了如下界面：
心涼了一下，因?yàn)闆]看到我上面應(yīng)用的css樣式的效果，我的css文件的代碼如下：
代碼如下:
#content
{
text-align:center;
width:200px;
height:100px;
background-color:#00FF00;
color:#FF0000;
font-size:12px;
}
也就是讓id為content的div寬度200px，高度100px，文字居中，背景顏色為為綠色，字體為紅色，12px。不甘心的我按下了F5調(diào)試鍵，令人驚喜的一個(gè)畫面出現(xiàn)了：
