使用主版頁面時內容頁如何使用css和javascript)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

由於網站的主要頻道頁和列表頁的頭部和底部都是一樣的，如果將每個頁面放在單獨的頁面中，當頭部和底部需要更改時維護量太大。於是想把頭部和底部做成主版頁面，頻道頁和列表頁的具體內容放到內容頁中。這樣當頭和底需要改動時，只要修改一下主版頁面就可以了。

好處有了，問題也接著來了。原來在頻道頁和列表頁中有其各自的css引入和一些javascript函數，當使用主版頁面時，放在內容頁中這些css樣式和javascript函數怎麼處理呢？因為大家知道，使用主版頁面的內容頁是不能包含<head></head>標記的，而css和javascript函數的聲明是要放到<head></head>中間的，這些css樣式和javascript函數如何處理呢？上網查了一下，大致有三種解決方案：方案一：把所有的css樣式和javascript函數放到主版頁面的<head></head>中，我覺得這樣做的弊端就是導致主版頁面的<head></head>區特別臃腫，同時如果原來兩個頻道頁中包含同名的css聲明或javascript函數，但卻是不同樣式或執行不同操作，怎麼辦呢？所以這第一種方案很快被我否定了。方案二是在內容頁的PageLoad事件中通過代碼來指定本內容頁的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);
     }
}

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

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

這種解決方案的好處時可以在程式運行時動態更改所需的css檔案，但是對javascript函數處理起來該怎麼做呢？再說有必要把本該加在html代碼中的css和javascript通過cs代碼來加入嗎？因此，這種解決方案也很快被我否定了。剩下的第三種解決方案就是在主版頁面的<head></head>中添加一個內容控制項，然後在內容頁中在對應的內容控制項中寫css和javascript代碼。聽起來這個這個解決方案應該是最方便，最適宜的解決方案。可是當我把ContentPlaceHolder控制項拖放到<head></head中間時，vs2005卻報了下面的錯誤：

白天的時候，看到這我就以為這種方法行不通了，差點就放棄了。晚上回家想找找更好的解決方案，可所有的文章基本上都是說的前兩種，對第三種解決方案有人說報錯，不行。看來碰到這個提示後放棄的人還真不少。我沒理這個錯誤，直接轉到內容頁，，在內容頁中插入以下代碼：

看了一下，內容頁中沒有報錯，看來有戲。可轉到內容頁的設計檢視一看，出現了如下介面：心涼了一下，因為沒看到我上面應用的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調試鍵，令人驚喜的一個畫面出現了：這說明css應用成功了，同時也看到了那個測試可愛的hello world對話方塊alert了出來。成功了！總結一下，其實很多人開始的想法和我一樣，想如何用最簡單的方法實現在內容頁中使用css和javascript的功能。他們中的很多人可能也找到我找到的那篇文章，但是當碰到我的那個主版頁面中的錯誤提示後就放棄了，也許有人堅持到了第二步，可是在設計檢視中沒看到css的應用效果後可能也放棄了。其實只要在堅持一下就成功了！餘世維說的好“比別人多想一點，你就能成功！”，確實很有道理啊。來源：http://hi.baidu.com/flydragon1978/blog/item/e9d9b722d6f4f1f1d6cae2ed.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More