首页 >> 编程知识

母版页技术、ASP.NET 学习笔记之MasterPageFile母版页

母版页技术



          看页面觉得很奇怪,怎么在源代码里看不到链接,效果上却有链接,于是猜想是不是有类似jsp里面的include之类的方法,比如说当初我用的用户自定义控件usercontrol之类的,结果没发现,却发现多了个<asp:content>然后没有了<head>
           MasterPage其实是一种模板,它可以让你快速的建立相同页面布局而内部不同的网页,如果一个网站有多个MasterPage,那么新建aspx文件的时候就可以选择需要实现页面布局的MasterPage。另外,在你没有使用MasterPage之前,如果N个相同的页面布局需要改动成另外一个样式,那么你就要做很多无聊而又不得不做的工作,对N个页面进行一一更改,如果使用了MasterPage,你只要改动一个页面也就是MasterPage文件就可以了。还有,你是否发现你要要部署的web程序越来越大,使用MasterPage在一定程度上会减小web程序的大小,因为所有的重复的html标记都只有一个版本。 


首先,我们需要打开VS2005,创建一个WebSite(这里要注意,是创建一个WebSite而不是创建一个Project) 

然后,给刚建立的WebSite添加一个名字叫MasterPage.master的MasterPage,这个时候我们会看到该文件有如下内容: 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<form id="form1" runat="server"> 
<div> 
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> 
</asp:contentplaceholder> 
</div> 
</form> 
</body> 
</html> 

看起来和一个普通的aspx页面差不多,但是最上面的声明<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>告诉我们,这个是一个模板页,同时我们可以看到在<div></div>之间包含了一个asp的控件contentplaceholder,这个叫内容占位符,他的作用就是当你用<table>或者<div>进行布局后,用这个控件去“霸占”一个地方,而这个地方的主人,不是contentplaceholder,而是后面将提到的Content。 

下面用<Table>做下示例 



<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<form id="form1" runat="server"> 
<table width="60%"> 
<tr> 
<td colspan="3" style="height:80px"> 
<asp:ContentPlaceHolder ID="TopContent" runat="server"> 
</asp:ContentPlaceHolder> 
</td> 
</tr> 
<tr> 
<td style="width:30"> 
<asp:ContentPlaceHolder ID="LeftContent" runat="server"> 
</asp:ContentPlaceHolder> 
</td> 
<td> 
<asp:ContentPlaceHolder ID="RightContent" runat="server"> 
</asp:ContentPlaceHolder> 
</td> 
</tr> 
<tr> 
<td colspan="3"> 
<asp:ContentPlaceHolder ID="FootContent" runat="server"> 
</asp:ContentPlaceHolder> 

</td> 
</tr> 

</table> 
</form> 
</body> 
</html> 

这样一个简单的模板页就创建好了,在这个模板页上一共有4部分,一个是顶部的TopContent,一个是中间偏左的LeftContent,一个是中间偏右的RightContent,最后个就是底部的FootContent,4个部分均有一个ContentPlaceHolder。 

有了一个创建好的MasterPage后,我们就可以进行下面的工作了,现在我们创建一个aspx页面,名字叫Default2.aspx,注意创建的时候一定要勾上Select master page,创建的时候会有一个选择模板的界面,由于只创建了一个模板,所以直接选择MasterPage.master就行了,如果你创建了多个模板页的话,就需要在这里进行选择你当前页面所需要加载的模板页。 

现在,我们有了一个基于模板的aspx页面Default2.aspx,代码如下: 

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="TopContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="RightContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="FootContent" Runat="Server"> 
</asp:Content> 


很明显,他和我们以往创建的aspx的页面很不一样,他没有HTML的相关声明,而且在页面的头部声明<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>中,比普通的aspx页面多了MasterPageFile="~/MasterPage.master"。在刚才MasterPage.master中的设置,我们定义了四个ContentPlaceHolder,ID分别是TopContent,LeftContent,RightContent,FootContent,在Default2.aspx页面下的Content控件里,有一个属性就是ContentPlaceHolderID,该字段表明该Content控件中的内容代替ID指向的ContentPlaceHolder占位控件,这就是真的“霸主”了。这样一来,页面布局就使用MasterPage.master中的,而内容就使用Default2.aspx中Content控件下的,因此你在Default2.aspx 中找不到Html页面的基本格式标记,如<head>、
现在我们来看下Default2.aspx的设计界面,看起来和刚才我们创建的MasterPage.master很像,但是我们发现在Default2.aspx中,除了Content内部以外,其他地方都是不能编辑的。 




设计好它以后可以统一每个页面的页眉,页脚.新建一个MasertPage后,再新建其他页面的时候只要选择好模板页,然后在contentplaceholder里写好你需要的东西.那么运行后就不仅有你写的东西有了,模板页的东西也会自己出现,可以减少很多重复工作. 

<!-- 版模页 --> 
<%@ Master Language="C#" AutoEventWireup="true" Inherits="DuwControls.DuwDefaultMasterPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<asp:contentplaceholder id="CHead" runat="server"> 
</asp:contentplaceholder> 
</head> 
<form id="form1" runat="server"> 
<asp:ContentPlaceHolder ID="ScriptMan" runat="server"> 
ScriptMain 
</asp:ContentPlaceHolder> 
<asp:ContentPlaceHolder ID="CTop" runat="server"> 
CTop 
</asp:ContentPlaceHolder> 
<asp:ContentPlaceHolder ID="CLeft" runat="server"> 
CLeft 
</asp:ContentPlaceHolder> 
<asp:ContentPlaceHolder ID="CMain" runat="server"> 
CMain 
</asp:ContentPlaceHolder> 
<asp:ContentPlaceHolder ID="CRight" runat="server"> 
CRight 
</asp:ContentPlaceHolder> 
<asp:ContentPlaceHolder ID="CFoot" runat="server"> 
CFoot 
</asp:ContentPlaceHolder> 
</form> 
</body> 
</html> 
ContentPlaceHolder 为模版部分的占用位置 


//模版页后台,继承自系统 System.Web.UI.MasterPage 
using System; 
using System.Collections.Generic; 
using System.Text; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web; 

namespace DuwControls 
...{ 
public class DuwDefaultMasterPage : MasterPage 
...{ 
private ContentPlaceHolder _CHead; 
private ContentPlaceHolder _CTop; 
private ContentPlaceHolder _CLeft; 
private ContentPlaceHolder _CMain; 
private ContentPlaceHolder _CRight; 
private ContentPlaceHolder _CFoot; 
private ContentPlaceHolder _ScriptMan; 

public ContentPlaceHolder CHead ...{ get ...{ return _CHead; } } 
public ContentPlaceHolder CTop ...{ get ...{ return _CTop; } } 
public ContentPlaceHolder CLeft ...{ get ...{ return _CLeft; } } 
public ContentPlaceHolder CMain ...{ get ...{ return _CMain; } } 
public ContentPlaceHolder CRight ...{ get ...{ return _CRight; } } 
public ContentPlaceHolder CFoot ...{ get ...{ return _CFoot; } } 
public ContentPlaceHolder ScriptMan ...{ get ...{ return _ScriptMan; } } 

protected override void OnInit(EventArgs e) 
...{ 
foreach (Control ctrl in this.Controls) 
...{ 
if (ctrl is System.Web.UI.HtmlControls.HtmlHead)//模版Head头部部分 
...{ 
foreach (Control ctl in ctrl.Controls) 
...{ 
if (ctl is ContentPlaceHolder) 
...{ 
_CHead = ctl as ContentPlaceHolder; 



else if (ctrl is System.Web.UI.HtmlControls.HtmlForm)//模版Form主体部分 
...{ 
foreach (Control ctl in ctrl.Controls) 
...{ 
if (ctl is ContentPlaceHolder) 
...{ 
switch (ctl.ID) 
...{ 
case "CTop": 
_CTop = ctl as ContentPlaceHolder; 
break; 
case "CLeft": 
_CLeft = ctl as ContentPlaceHolder; 
break; 
case "CMain": 
_CMain = ctl as ContentPlaceHolder; 
break; 
case "CRight": 
_CRight = ctl as ContentPlaceHolder; 
break; 
case "CFoot": 
_CFoot = ctl as ContentPlaceHolder; 
break; 
case "ScriptMan": 
_ScriptMan = ctl as ContentPlaceHolder; 
break; 
default: 
break; 





base.OnInit(e); 






//页面.cs运用部分 
using System; 
using System.Collections.Generic; 
using System.Text; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using DuwCompontents; 
using System.Text.RegularExpressions; 
using System.IO; 
using System.Web; 

namespace DuwControls 
...{ 
public class DuwPage : Page 
...{ 
属性#region 属性 
public string SkinType 
...{ 
get ...{ return _SkinType; } 
set ...{ _SkinType = value; } 


public int BoardID ...{ get ...{ return _BoardID; } set ...{ _BoardID = value; } } 
#endregion 

事件#region 事件 
protected override void OnPreInit(EventArgs e) 
...{ 
_SkinType = "wow";//修改页面的SkinType属性 
this.MasterPageFile = "/Themes/wow/Default.master"; //修改模版页的原引用路径/Themes/Default/Default.master 
DuwDefaultMasterPage dp = this.Master as DuwDefaultMasterPage;//取得页面的模版 
dp.CTop //为模板中的CTop占位部分 
base.OnPreInit(e); 






//aspx页面部分 
<%@ Page Language="C#" MasterPageFile="~/Themes/Default/Default.master" ValidateRequest="false" 
Inherits="DuwControls.DuwPage" SkinType="default" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="CHead" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptMan" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="CTop" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="CLeft" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content5" ContentPlaceHolderID="CMain" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content6" ContentPlaceHolderID="CRight" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content7" ContentPlaceHolderID="CFoot" Runat="Server"> 
</asp:Content>
 



ASP.NET 学习笔记之MasterPageFile母版页



本来想用最简洁的语言来表述,却发现把它搞得更复杂了。

刚开始学,什么都不懂,看到了这段代码,才促使自己去研究MasterPageFile到底是什么含义。
<%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>


MasterPageFile其实是定义一个了外围的框架的页面,并且在里面设定了具体内容存放的位置。举例来说,MasterPageFile
就相当于相框的功能。网站的真正具体页面实际是由MasterPageFile(相框)和内容页面(照片)组成。

最常见的应用就是网站的顶部导航栏和底部的CopyRight声明栏。可以把顶部导航栏和底部的CopyRight声明栏都放到MasterPageFile里,然后声明中间是放内容页面的。 这样网站的的每个页面都有统一的顶部导航栏和底部的CopyRight声明栏,只是中间的内容页面不同而已。

母版页为具有扩展名 .master(如 Main.master)的 ASP.NET 文件,由特殊的 @ Master 指令识别如下:
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
母版页技术、ASP.NET 学习笔记之MasterPageFile母版页(本文完毕)
下一篇:母版页与用户控件效率比较
上一篇:三层架构