12.2 母版页
在Web应用开发过程中，经常会遇到Web应用程序中的很多页面的布局都相同这种情况。在ASP.NET中，可以使用CSS和主题减少多页面的布局问起，但是CSS和主题在很多情况下还无法胜任多页面的开发，这时就需要使用母版页。
12.2.1 母版页基础
开发人员能够使用母版页定义某一组页面的呈现样式，甚至能够定义整个网站的页面的呈现样式，Visual Studio 2008能够轻松的创建母版页文件，对网站的全部或部分页面进行样式控制。单击【添加项】选项，选择【母版页】项目，即可向项目中添加一个母版页，如图12-14所示。
图12-14 添加母版页
母版页的后缀名为.master。母版页同Web窗体在结构上基本相同，与Web窗体不同的是，母版页的声明方法不是使用Page的方法声明，而是使用Master关键字进行声明，示例代码如下所示。
母版页的结构基本同Web窗体，但是母版页通常情况下是用来进行页面布局。当Web应用程序中的很多页面的布局都相同，甚至中间需要使用的用户控件、自定义控件、样式表都相同时，则可以在一个母版页中定义和编码，对一组页面进行样式控制。编写母版页的方法非常简单，只需要像编写HTML页面一样就可以编写母版页。在编写网站页面时，首先需要确定通用的结构，并且确定需要使用控件或CSS页面，如图12-15所示。
图12-15 母版页页面布局
在确定了母版页布局的通用结构后，就可以编写母版页的结构了。这里使用Table进行布局，在布局前，首选需要定义若干样式，示例代码如下所示。
这些样式规定了一些基本样式，用来Table以及页面的布局，整页布局代码如下所示。
上述代码对页面进行了布局，并定位了头部、中部和底部三个部分，而中部又分为左侧、中间和右侧三个部分，布局完成后效果如图12-16所示。
图12-16 母版页最终布局效果
通过编写HTML，就能够进行母版页的布局，不仅如此，母版页还能够嵌入控件、用户控件和自定义控件，方便母版页中通用模块的编写。母版页提供一个对象模型，其他页面能够通过母版页快速的进行样式控制和布局，使用母版页具有以下好处。
１）母版页可以集中的处理页面的通用功能，包括布局和控件定义。
２）使用母版页可以定义通用性的功能，包括页面中某些模块的定义，这些模块通常由用户控件和自定义控件实现。
３）母版页允许控制占位符控件的呈现方式。
４）母版页能够为其他页面提供对项目型，其他页面能够使用母版页进行二次开发。
母版页能够将页面布局集中到一个或若干个页面中，这样无需在其他页面中过多的关心页面布局。
12.2.2 内容窗体
使用母版页的页面被称作内容窗体（也称内容页）。内容窗体不是专门负责设计的页面，它们只需要关注一般页面的布局、事件以及窗体结构即可，所以内容窗体无需过多的考虑页面布局。当用户请求内容窗体时，内容窗体将与母版页合并并且将母版页的布局和内容窗体的布局组合在一起呈现到浏览器。
创建内容窗体的方法基本同Web窗体一样，在Visual Studio 2005中创建Web窗体时，必须勾选【选择母版页】选项，而在Visual Studio 2008中，有单独的内容页可以选择，如图12-17所示。单击【添加】按钮，系统会提示选择相应的母版页，选择相应的母版页后，单击【确定】按钮即可创建内容窗体，如图12-18所示。
图12-17 创建Web内容窗体
图12-18 选择母版页
选择母版页后，系统会自动将母版页和内容整合在一起，如图12-19所示。
图12-19 使用母版页
在使用母版页之后，内容窗体不能够修改母版页中的内容，也无法向母版页中新增HTML标签，在编写母版页时，必须使用容器让相应的位置能够在内容页中被填充。例如图12-16，按照其方法编写母版页，内容窗体不能够对其中的文字进行修改，也无法在母版页中插入文字。在编写母版页，如果需要在某一区域能够允许内容窗体能够新增内容，就必须使用ContentPlaceHolder控件作占位，在母版页中，其代码如下所示。
在母版页中无需编辑此控件，当内容窗体使用了相应的母版页后，则能够通过编辑此控件并向此占位控件中添加内容或控件。单击ContentPlaceHolder控件，并单击Content任务，可在占位控件中增加控件或自定义内容，如图12-20所示。
图12-20 编辑内容窗体
编辑完成后，整个内容窗体就编写完毕了。内容窗体无需进行页面布局，也无法进行页面布局，否则会抛出异常。在内容窗体中，只需要按照母版页中的布局进行控件的拖放即可。
12.2.3 母版页的运行方法
在使用母版页时，母版页和内容页通常是一起协调运作的，母版页和内容也协调运作图如12-21所示。
图12-21 母版页和内容窗体
在母版页运行后，内容窗体中ContentPlaceHolder控件会被映射到母版页的ContentPlaceHolder控件，并向母版页中的ContentPlaceHolder控件填充自定义控件。运行后，母版页和内容窗体将会整合形成结果页面，然后呈现给用户的浏览器。母版页运行的具体步骤为：
１）通过URL指令加载内容页面。
２）页面指令被处理。
３）将更新过内容的母版页合并到内容页面的控件树里。
４）单独的ContentPlaceHolder控件的内容被合并到相对的母版页中。
５）合并的页面被加载并显示给浏览器。
从浏览者的角度来说，母版页和内容窗体的运行并没有什么本质的区别，因为在运行的过程中，其URL是惟一的。而从开发人员的角度来说，实现的方法不同，母版页和内容窗体分别是单独而离散的页面，分别进行各自的工作，在运行后合并生成相应的结果页面呈现给用户。在内容页中使用，母版页无需存放在特殊的目录中，只需放在普通的目录文件中即可，内容页需要使用母版页时，只需要使用MasterPageFile属性即可，示例代码如下所示。
使用MasterPageFile属性能够声明母版，Page指令中的MasterPageFile属性会解析为一个.master页面，在运行时，就能够将母版页和内容窗体合并为一个Web窗体并呈现给浏览器。
12.2.4 嵌套母版页
母版页与母版页之间能够嵌套运行，让一个母版页作为另一个母版页的子母版，能够方便的将页面进行模块化。当编写Web应用时，可以使用母版页进行较大型的框架布局，对一个页面进行整体的样式控制。同样可是使用母版页进行嵌套，对细节的地方进行细分。
母版页的结构和Web窗体的结构十分相似，与任何母版页一样，母版页也可以包含母版页，被包含的母版页被称为子母版。子母版通常会包含一些控件，这些控件将映射到父母版上的内容占位符。在MyMaster页面中，可以编写相应的代码进行嵌套，示例代码如下所示。
上述代码创建了MyMaster母版页，并使用了Content控件进行占位控件的编写。右击当前项目并单击【新建项】选项，创建一个Child.master母版页并为母版页编写相应的HTML代码，示例代码如下所示。
上述代码在子母版页中创建了一个文本框。在父母版页中则可以使用此母版页，使用方法同样是使用MasterPageFile属性进行声明。在Child子母版中已经声明了MyMaster母版页，在使用和加载Child页面时，可以使用MasterPageFile="~/MyMaster.Master"语法对子母版页的母版进行声明，在上述代码中Child母版页使用了MyMaster母版页，并使用ContentPlaceHolderID="ContentPlaceHolder4"属性对该控件进行占位控件的填充，如图12-22所示。
图12-22 嵌套母版页
母版页嵌套完毕后，使用母版页的页面也应该进行相应的修改，在使用嵌套后，子母版页应该被声明到需要使用的页面，而不是母页面。简单的说，需要使用的页面应该声明的是子页面，而不是母母版页，在这里应该为Child.master，示例代码如下所示。
上述代码声明了该页的母版页为Child.master，运行结果如图12-23所示。
图12-23 嵌套母版页
嵌套母版页之后，使用子母版页的页面将不能直接进行页面编辑，在Visual Studio 2008中，使用子母版页的页面将显示为空白，但并不表示页面显示将为空白。
12.2.1 母版页基础
开发人员能够使用母版页定义某一组页面的呈现样式，甚至能够定义整个网站的页面的呈现样式，Visual Studio 2008能够轻松的创建母版页文件，对网站的全部或部分页面进行样式控制。单击【添加项】选项，选择【母版页】项目，即可向项目中添加一个母版页，如图12-14所示。
图12-14 添加母版页
母版页的后缀名为.master。母版页同Web窗体在结构上基本相同，与Web窗体不同的是，母版页的声明方法不是使用Page的方法声明，而是使用Master关键字进行声明，示例代码如下所示。
+展开
-HTML
<%@ Master Language="C#"
AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="_12_2.MyMaster" %>
AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="_12_2.MyMaster" %>
母版页的结构基本同Web窗体，但是母版页通常情况下是用来进行页面布局。当Web应用程序中的很多页面的布局都相同，甚至中间需要使用的用户控件、自定义控件、样式表都相同时，则可以在一个母版页中定义和编码，对一组页面进行样式控制。编写母版页的方法非常简单，只需要像编写HTML页面一样就可以编写母版页。在编写网站页面时，首先需要确定通用的结构，并且确定需要使用控件或CSS页面，如图12-15所示。
图12-15 母版页页面布局
在确定了母版页布局的通用结构后，就可以编写母版页的结构了。这里使用Table进行布局，在布局前，首选需要定义若干样式，示例代码如下所示。
+展开
-HTML
<style type="text/css">
body
{
font-size:12px;
text-align:center;
}
.style1
{
width: 100%;
height: 129px;
}
.style2
{
background:url('images/bg.jpg') repeat-x;
height: 111px;
text-align: center;
font-size:18px;
font-weight:bolder;
}
.style3
{
background:url('images/bg.jpg') repeat-x;
height: 94px;
}
.style4
{
background:url('images/bg2.jpg') repeat-x;
width: 129px;
}
.style5
{
background:url('images/bg2.jpg') repeat-x;
width: 476px;
}
.style6
{
background:url('images/bg2.jpg') repeat-x;
}
</style>
</head>
body
{
font-size:12px;
text-align:center;
}
.style1
{
width: 100%;
height: 129px;
}
.style2
{
background:url('images/bg.jpg') repeat-x;
height: 111px;
text-align: center;
font-size:18px;
font-weight:bolder;
}
.style3
{
background:url('images/bg.jpg') repeat-x;
height: 94px;
}
.style4
{
background:url('images/bg2.jpg') repeat-x;
width: 129px;
}
.style5
{
background:url('images/bg2.jpg') repeat-x;
width: 476px;
}
.style6
{
background:url('images/bg2.jpg') repeat-x;
}
</style>
</head>
这些样式规定了一些基本样式，用来Table以及页面的布局，整页布局代码如下所示。
+展开
-HTML
<body>
<form id="form1" runat="server">
<div>
<table class="style1">
<tr>
<td class="style2">
标题</td>
</tr>
<tr>
<td>
<table class="style1">
<tr>
<td class="style4">
左侧</td>
<td class="style5">
中间</td>
<td class="style6">
右侧</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="style3">
底部说明
</td>
</tr>
</table>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<table class="style1">
<tr>
<td class="style2">
标题</td>
</tr>
<tr>
<td>
<table class="style1">
<tr>
<td class="style4">
左侧</td>
<td class="style5">
中间</td>
<td class="style6">
右侧</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="style3">
底部说明
</td>
</tr>
</table>
</div>
</form>
</body>
上述代码对页面进行了布局，并定位了头部、中部和底部三个部分，而中部又分为左侧、中间和右侧三个部分，布局完成后效果如图12-16所示。
图12-16 母版页最终布局效果
通过编写HTML，就能够进行母版页的布局，不仅如此，母版页还能够嵌入控件、用户控件和自定义控件，方便母版页中通用模块的编写。母版页提供一个对象模型，其他页面能够通过母版页快速的进行样式控制和布局，使用母版页具有以下好处。
１）母版页可以集中的处理页面的通用功能，包括布局和控件定义。
２）使用母版页可以定义通用性的功能，包括页面中某些模块的定义，这些模块通常由用户控件和自定义控件实现。
３）母版页允许控制占位符控件的呈现方式。
４）母版页能够为其他页面提供对项目型，其他页面能够使用母版页进行二次开发。
母版页能够将页面布局集中到一个或若干个页面中，这样无需在其他页面中过多的关心页面布局。
12.2.2 内容窗体
使用母版页的页面被称作内容窗体（也称内容页）。内容窗体不是专门负责设计的页面，它们只需要关注一般页面的布局、事件以及窗体结构即可，所以内容窗体无需过多的考虑页面布局。当用户请求内容窗体时，内容窗体将与母版页合并并且将母版页的布局和内容窗体的布局组合在一起呈现到浏览器。
创建内容窗体的方法基本同Web窗体一样，在Visual Studio 2005中创建Web窗体时，必须勾选【选择母版页】选项，而在Visual Studio 2008中，有单独的内容页可以选择，如图12-17所示。单击【添加】按钮，系统会提示选择相应的母版页，选择相应的母版页后，单击【确定】按钮即可创建内容窗体，如图12-18所示。
图12-17 创建Web内容窗体
图12-18 选择母版页
选择母版页后，系统会自动将母版页和内容整合在一起，如图12-19所示。
图12-19 使用母版页
在使用母版页之后，内容窗体不能够修改母版页中的内容，也无法向母版页中新增HTML标签，在编写母版页时，必须使用容器让相应的位置能够在内容页中被填充。例如图12-16，按照其方法编写母版页，内容窗体不能够对其中的文字进行修改，也无法在母版页中插入文字。在编写母版页，如果需要在某一区域能够允许内容窗体能够新增内容，就必须使用ContentPlaceHolder控件作占位，在母版页中，其代码如下所示。
+展开
-HTML
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:ContentPlaceHolder>
在母版页中无需编辑此控件，当内容窗体使用了相应的母版页后，则能够通过编辑此控件并向此占位控件中添加内容或控件。单击ContentPlaceHolder控件，并单击Content任务，可在占位控件中增加控件或自定义内容，如图12-20所示。
图12-20 编辑内容窗体
编辑完成后，整个内容窗体就编写完毕了。内容窗体无需进行页面布局，也无法进行页面布局，否则会抛出异常。在内容窗体中，只需要按照母版页中的布局进行控件的拖放即可。
12.2.3 母版页的运行方法
在使用母版页时，母版页和内容页通常是一起协调运作的，母版页和内容也协调运作图如12-21所示。
图12-21 母版页和内容窗体
在母版页运行后，内容窗体中ContentPlaceHolder控件会被映射到母版页的ContentPlaceHolder控件，并向母版页中的ContentPlaceHolder控件填充自定义控件。运行后，母版页和内容窗体将会整合形成结果页面，然后呈现给用户的浏览器。母版页运行的具体步骤为：
１）通过URL指令加载内容页面。
２）页面指令被处理。
３）将更新过内容的母版页合并到内容页面的控件树里。
４）单独的ContentPlaceHolder控件的内容被合并到相对的母版页中。
５）合并的页面被加载并显示给浏览器。
从浏览者的角度来说，母版页和内容窗体的运行并没有什么本质的区别，因为在运行的过程中，其URL是惟一的。而从开发人员的角度来说，实现的方法不同，母版页和内容窗体分别是单独而离散的页面，分别进行各自的工作，在运行后合并生成相应的结果页面呈现给用户。在内容页中使用，母版页无需存放在特殊的目录中，只需放在普通的目录文件中即可，内容页需要使用母版页时，只需要使用MasterPageFile属性即可，示例代码如下所示。
+展开
-HTML
<%@ Page Language="C#"
MasterPageFile="~/MyMaster.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_2.Default" Title="无标题页" %>
MasterPageFile="~/MyMaster.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_2.Default" Title="无标题页" %>
使用MasterPageFile属性能够声明母版，Page指令中的MasterPageFile属性会解析为一个.master页面，在运行时，就能够将母版页和内容窗体合并为一个Web窗体并呈现给浏览器。
12.2.4 嵌套母版页
母版页与母版页之间能够嵌套运行，让一个母版页作为另一个母版页的子母版，能够方便的将页面进行模块化。当编写Web应用时，可以使用母版页进行较大型的框架布局，对一个页面进行整体的样式控制。同样可是使用母版页进行嵌套，对细节的地方进行细分。
母版页的结构和Web窗体的结构十分相似，与任何母版页一样，母版页也可以包含母版页，被包含的母版页被称为子母版。子母版通常会包含一些控件，这些控件将映射到父母版上的内容占位符。在MyMaster页面中，可以编写相应的代码进行嵌套，示例代码如下所示。
+展开
-HTML
<body>
<form id="form1" runat="server">
<div>
<table class="style1">
<tr>
<td class="style2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td>
<table class="style1">
<tr>
<td class="style4">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
<td class="style5">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
Master母版页:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:ContentPlaceHolder>
</td>
<td class="style6">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="style3">
<asp:ContentPlaceHolder ID="ContentPlaceHolder5" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<table class="style1">
<tr>
<td class="style2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td>
<table class="style1">
<tr>
<td class="style4">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
<td class="style5">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
Master母版页:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:ContentPlaceHolder>
</td>
<td class="style6">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="style3">
<asp:ContentPlaceHolder ID="ContentPlaceHolder5" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
</form>
</body>
上述代码创建了MyMaster母版页，并使用了Content控件进行占位控件的编写。右击当前项目并单击【新建项】选项，创建一个Child.master母版页并为母版页编写相应的HTML代码，示例代码如下所示。
+展开
-HTML
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Child.master.cs" Inherits="_12_2.Child" MasterPageFile="~/MyMaster.Master"%>
<asp:Content ID="ContentPlaceHolder4" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
子母版页:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</asp:Content>
<asp:Content ID="ContentPlaceHolder4" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
子母版页:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</asp:Content>
上述代码在子母版页中创建了一个文本框。在父母版页中则可以使用此母版页，使用方法同样是使用MasterPageFile属性进行声明。在Child子母版中已经声明了MyMaster母版页，在使用和加载Child页面时，可以使用MasterPageFile="~/MyMaster.Master"语法对子母版页的母版进行声明，在上述代码中Child母版页使用了MyMaster母版页，并使用ContentPlaceHolderID="ContentPlaceHolder4"属性对该控件进行占位控件的填充，如图12-22所示。
图12-22 嵌套母版页
母版页嵌套完毕后，使用母版页的页面也应该进行相应的修改，在使用嵌套后，子母版页应该被声明到需要使用的页面，而不是母页面。简单的说，需要使用的页面应该声明的是子页面，而不是母母版页，在这里应该为Child.master，示例代码如下所示。
+展开
-HTML
<%@ Page Language="C#"
MasterPageFile="~/Child.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_2.Default" Title="无标题页" %>
MasterPageFile="~/Child.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_2.Default" Title="无标题页" %>
上述代码声明了该页的母版页为Child.master，运行结果如图12-23所示。
图12-23 嵌套母版页
嵌套母版页之后，使用子母版页的页面将不能直接进行页面编辑，在Visual Studio 2008中，使用子母版页的页面将显示为空白，但并不表示页面显示将为空白。
加支付宝好友偷能量挖...
