ASP.NET 2.0 中的母版頁詳解

2019-11-18 17:09:21

字體：大中小

來源：轉載

供稿：網友

　　為了減少在網頁設計時出現的變一頁則動全站的問題，vs2003升級到vs2005后增加了母版的概念。

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

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

　　1、首先打開visual studio 2005，新建一個 asp.net網站，文件系統，C#。

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

　　3、選擇母版頁：

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

　　我們轉到設計視圖，在這個控件外面加上header和footer 兩句文本。

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

　　6、選擇相應的母版頁

　　7、在新生成的頁面源代碼只有這幾句：

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

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

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

　　保存后訪問default2.aspx這個頁面，F5.，我們看到頁面：

　　9、和想像的一樣吧，我們再來看看源代碼：

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
＜head＞＜title＞
UntitledPage
＜/title＞＜/head＞
＜body＞
＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm"＞
＜div＞
＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
　　　value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
＜/div＞
＜div＞
thisisthepage'sheader＜br/＞
thispage'scontent:hello,world!＜br/＞
thisisthepage'sfooter ＜/div＞
＜/form＞
＜/body＞
＜/html＞

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

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

　　11、在相應的子頁面里會有兩個content:

　　生成的代碼：

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
＜head＞＜title＞
UntitledPage
＜/title＞＜/head＞
＜body＞
＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm"＞
＜div＞
＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
　　value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/＞
＜/div＞
＜div＞
thisisthepage'sheader＜br/＞
＜table＞
＜tr＞
＜td＞
ohmyContent1
＜/td＞
＜td＞
himyContent2
＜/td＞
＜/tr＞
＜/table＞
thisisthepage'sfooter 
＜/div＞
＜/form＞
＜/body＞
＜/html＞