首頁>網絡編程教程>ASP.NET教程

ASP.NET 2.0 中的母版頁詳解

作者：Eve Cole 更新時間：2009-06-30 16:37:05
為了減少在網頁設計時出現的變一頁則動全站的問題，vs2003升級到vs2005後增加了母版的概念。

你可以把它想像成為“網頁模版”，與之不同的是，再也不必每個頁面都去更新了，修改一次，所有的網頁都會改變，做到了一勞永逸。

下面先進行一個簡單的母版使用示範：

1.先開啟visual studio 2005，新建一個asp.net網站，檔案系統，C#。

2、在解決方案資源管理器中，右鍵新建一個新項目：



3、選擇母版頁：



4.打開MasterPage.master，裡面有一個contentplaceholder控件，注意不要控件裡面寫什麼東西。

我們轉到設計視圖，在這個控制項外面加上header和footer 兩個文字。



5.儲存後我們就可以用它來做其它頁面了。有兩種方法，1是在母版頁任意位置右鍵，點擊新增內容頁;2 是在解決方案資源管理器上新建新項，在產生aspx頁面時勾選“選擇母版頁”



6、選擇對應的母版頁



7.在新生成的頁面原始碼只有這幾句：


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%＞
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"＞
  3. ＜/asp:Content＞

我們可以看到一個content控件，這個東西對應母版頁的ContentPlaceHolder1控件，轉換到視圖頁面：



8.其中頁頭和頁腳的文字都是灰色的，我們只能在content中編輯。

儲存後造訪default2.aspx這個頁面，F5.，我們看到頁面：


9.和想像的一樣吧，我們再來看看原始碼：


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
  12. thisisthepage'sheader
    13. ＜br/＞ ＞
  13. ＜div＞
  14. thisisthepage'sheader＜br/＞
  15. ＜/form＞
  16. ＜/body＞
  17. ＜/html＞

母版內容是放在一個div中的，而content頁面並沒有放在單獨的div，就是說在母版不會為子頁添加任何的多餘程式碼。這就為我們程式設計和網頁佈局帶來了很大的彈性，我們可以充分利用CSS＋DIV的形式定位，也可以用table方式進行定位。修改時也不必每個頁面都去修改。

10.對於不是一塊固定內容的母版，我們可以用多個ContentPlaceHolder1來進行佈局，下面的例子是用table來定位的：



11.對應的子頁面會有兩個content:



產生的程式碼：


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
  10. value
    11. ="/
  11. wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU
    12. ="
  12. /
  13. ＞
  14. ＜/div＞
  15. ＜div＞
  16. thisisthepage'sheader
  17. ＜br/＞
  18. ＞＞＞＞＞
  19. ＜td＞
  20. himyContent2
  21. ＜/td＞
  22. ＜/tr＞
  23. ＜
  24. /table＞
  25. thisisthepage'sfooter 
  26. ＜/div＞
  27. ＜/form＞
  28. ＜/body＞
  29. ＜/html＞

12.要靈活應用，CSS雖然也可以用DIV來解決這個問題，但是一些非標準控件的樣子是很難用CSS來控制的，如果你做了另外一套母版MasterPage2.master，你可在頁面中動態設定：

protected void Page_PreInit(object sender, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

先到這裡，據說還可以嵌套應用，不過目前是夠用了，配合一下theme的使用，下次再說。
相關文章