17 母版(MasterPage)
- 网站的布局通常是统一的，如上面有公司的Logo, 操作菜单，导航、下面有公司的地址，版权声明等。如果每个页面都重复做这些功能的话，一量修改那么每个页面都要修改。我们在原来的html中用FrameSet(框架集)技术来解决方案，但是FrameSet技术不灵活，而且很难进行SEO,所有只有部分内网系统还在用FrameSet，.net中一般用母版(MasterPage)技术来解决这个问题。
- MasterPage是这样一种技术，把页面布局好，在变化的内容部分都“留空”，留空的部分由于页面填充内容，这样子页面只要填空就行，不用重复设计页面结构，一旦要修改页面结构修改母版页就可以，这样所有页面都会有变化，即母版页“挖坑”，具体页面“填坑”。母版页、具体页面中几乎可以使用所有的普通WebForm页面能够使用的技术。
- 当新建一个母版页时，使用<asp:ContentPlaceHolder>挖坑，系统已自动设置了两个ContentPlaceHolder,还可以添加更多的ContentPlaceHolder。在id="head"前面或后面都可以加入一些script,在id="ContentPlaceHolder1"前后也可以加入一些内容。
- 创建使用母版页的具体页面时，WebSite是新建页面时勾选“选择母版页”，就会自动把所要选择的母版加载上去，如果创建的是WebApplication ,则新建的页面是“使用母版页的web窗体”。 vs的版本可能有差异，此例为vs2010. 一个项目可以创建多个母版页。
- 使用母版的具体页和普通的aspx页面不同的是：@page区域用MasterPageFile属性表示页面使用哪个母版页，页面不包含html等内容，中定义了<asp:Content..>这些坑的内容。<asp:Content>就是用来在具体页面中对母版页进行填坑的，ContentPlaceHodlerID为这个Content要填母版页中的哪个坑，对应母版页中的ContentPlaceHolder的ID.
- 具体页面可以对母版页填坑也可以不填坑，如果不填坑则显示<asp:ContentPlaceHolder>中定义的默认内容。
- 在母版页中使用超连接、图片地址等的时候需要注意路径的问题，在母版页中的runat="server"控件的连接地址、图片地址等会被解析为相对于母版页的地址，而客户端HTML控件在Asp.net中是直接输出的，因些是解析为相对而言于具体页面的地址，建议使用服务端控件。如果不能使用服务端控件，那么可以在aspx页面中调用ResolveUrl，ResolveClientUrl进行虚拟路径的转换。
- 每个具体页面设置不同的标题，只要在具体的@page中设置Title属性就可以了。可以在具体页中通过Master.FindControl来定位母版页中控件，然后对母版页中的控件进行操作，比如在一个具体页面中将母版页中的一个控件隐藏。
实例：
目录图：
做一个网站，它的框架为:上部为表单头及导航部分，左边为一导航部分，下部为其它信息部分。先做一普通的html网页，用css样式把它布局好，设定网页显示的宽度为950,这也是目前大多数网站的设置，主要用到了float的样式。
步骤：
1. 在htmlTemplate建立htmlmaster.htm普通页面，这个主要是为母版页准备的。
<!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> <title></title> <link href="../css/mystyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <p>这是导航标识</p> <div id="navagtor"> 首面|国内新闻|国际新闻|军事点评|国际热点|八卦追捕令 </div> </div> <div id="panel"> <p>这是右边导航</p> <div> <ul> <li>首面</li> <li>国内新闻</li> <li>国际新闻</li> <li>军事点评</li> <li>国际热点</li> <li>八卦追捕令</li> </ul> </div> </div> <div id="mainbody"> <br /> 放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容放置主内容 </div> <div id="footer"> <p>版权所有，不得抄袭 联系电话:xxxxxxxx</p> </div> </div> </body> </html>
真正以后要改动的地方就是id="mainbody"的div部分，这个页面中用的div比较多。主要是方便控制。
2.为以上htm设置 css样式，并把此样式加入到上面的页面中。在css文件夹下建立mystyle.css样式文件
#main{width:950px; margin-left:auto; margin-right:auto; }
#header
{
float:left;
width:100%;
}
#navagtor{float:right;width:100%;}
#panel
{
float:left; width:130px;
}
#mainbody
{
float:right; width:820px;
}
#footer
{
float:left;width:100%;
}
3.建立母版页，并把form1中的内容全部替换成htmlmaster.htm中的body中的内容，把css样式文件也写入到此母版页中的head部
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="mymaster.master.cs" Inherits="母版页.mymaster" %> <!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>网站Demo</title> <link href="css/mystyle.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <script type="text/javascript"> function masterfun() { } </script> </head> <body> <form id="form1" runat="server"> <div id="main"> <div id="header"> <font color="red" size="20">这是导航标识</font> <img src="~/imgs/Koala.jpg" width="100" height="100" runat="Server" /> <img src='<%=this.ResolveUrl("~/imgs/Koala.jpg")%>' width="100" height="100"/> <asp:Image ID="Image1" runat="server" ImageUrl="~/imgs/Koala.jpg" /> <div id="navagtor"> <a href="default.aspx">首面</a>|国内新闻|国际新闻|军事点评|国际热点|八卦追捕令|<a href="About.aspx">关于我们</a> </div> </div> <div id="panel"> <p></p> <div> <ul> <li><a href="default.aspx">首面</a></li> <li>国内新闻</li> <li>国际新闻</li> <li>军事点评</li> <li>国际热点</li> <li>八卦追捕令</li> <li><a href="About.aspx">关于我们</a></li> </ul> <ol> <li>友情连接待置</li> <li>友情连接待置</li> <li>友情连接待置</li> <li>友情连接待置</li> <li>友情连接待置</li> <li>友情连接待置</li> </ol> </div> </div> <div id="mainbody"> <br /> <asp:ContentPlaceHolder ID="ContentPlaceHolderBody" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer"> <p>版权所有，不得抄袭 联系电话:xxxxxxxx</p> </div> </div> </form> </body> </html>
并把原来div id="mainbody"中的内容删除，要在这个地方“挖坑”，主要是主子页面“填坑用”。把头部的<asp:contentPlaceHolder ID=...>复制到此处，改下id就可以了。
4.建立“首页”子页面，并调用此模块，default.aspx,并在 ContentPlaceHolderID="ContentPlaceHolderBody"部分输入一些信息
<%@ Page Title="首页" Language="C#" MasterPageFile="~/mymaster.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="母版页._default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script type="text/javascript"> function first() { } </script> 这样爱你到底对不对 </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server"> 习奥会正式登场 2013-06-07 <br/> 中菲岛争激化 2013-05-27 <br/> 日本发表公告书，剑指中国 2013-04-15 <br/><br/> “开房找我”者被打 2013-06-05 <br/><br/> 普京承认离婚 2013-06-03 <br /> </asp:Content>
5.建立“关于我们”的页面，同“首页”,也在ContentPlaceHolderID="ContentPlaceHolderBody"部分输入一些信息
<%@ Page Title="关于我们" Language="C#" MasterPageFile="~/mymaster.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="母版页.About" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server"> 我们的联系方式为:<br/> <font color="blue" >Email: [email protected]</font> <br/> <font color="blue" >QQ ：888888888</font> <br/> <font color="blue" >电话 : 86 0986-9785144 </font> <br/> <font color="blue" >联系人:坏坏小妹妹</font> <br/> <asp:Button ID="Button1" runat="server" Text="切换其中的图像" onclick="Button1_Click" /> </asp:Content>
此页中有个按钮会显示或不显示图片，但因图片是在母版页中的，想找到图像控件的id用普通的方法访问不了，所以要用到FindControl才行，以下为button的cs源码：
protected void Button1_Click(object sender, EventArgs e) { Image img=(Image) this.Master.FindControl("Image1"); img.Visible = !img.Visible; }
6.我们可以更改子页面@page中的Title可以更改标题，如果不写则会显示母版页的默认标题。也可以在母版页的head部分写js脚本，在子页中也可以在head中写js脚本，并在运行的子页面上查看源代码，会发现这两者的js脚本都传给了浏览器，也就是说子页面中的元素可以调用母版页中的js。