关于母版页的学习和使用
本周工作和学习用到了母版页，特此笔记。
在完成小型网站的时候，经常要遇到一个情况，就是网站的所有页面的顶端和底端都内容都是相同的或需要遵循相同的处理逻辑。实现这种相同有很多种方法，最笨的方法就是将每个页面都进行相同的设计，还有一种最简单的办法就是使用母版页。
母版页使用方法如下：
1.新建一个母版页。新建后看到如下代码:
1 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="fengshang.Site1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <asp:ContentPlaceHolder ID="head" runat="server"> 9 </asp:ContentPlaceHolder> 10 </head> 11 <body> 12 <form id="form1" runat="server"> 13 <div> 14 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 15 16 </asp:ContentPlaceHolder> 17 </div> 18 </form> 19 </body> 20 </html>
可以看到在第8行和第14行，分别有 ContentPlaceHolder标记。暂且先不去管他。
接下来，在创建一个使用母版页的内容页。点击新建内容，选择“使用母版页的web窗体”，可以看到如下代码：
1 <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="fengshang.WebForm1" %> 2 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 3 </asp:Content> 4 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 5 </asp:Content>
我们来分析一下：
首先WebForm1.aspx的第一行，与普通的aspx页面多了一句：MasterPageFile="~/Site1.Master",这句话让WebForm1.aspx与我们原先建立的Site1.Maste母版页关联起来。
细心的朋友可以注意到在第2行和第4行控件的id和Site1.Master的第8行和第14行的id一样。怎么样？是不是有点思路了？
所谓的母版页，就是在你调用使用了这些母版页的webform页面时，会实际上调用母版页的内容。即webform的内容会作为母版页的一部分显示在页面上。我们在form的ContentPlaceHolder1控件中书写的内容会显示在母版页的ContentPlaceHolder1的控件里面。
示例：
1 1.母版页 2 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="fengshang.Site1" %> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head runat="server"> 8 <title></title> 9 <style type="text/css"> 10 /*母版页style*/ 11 </style> 12 <asp:ContentPlaceHolder ID="head" runat="server"> 13 </asp:ContentPlaceHolder> 14 </head> 15 <body> 16 <form id="form1" runat="server"> 17 <div> 18 这是母版页显示内容 19 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 20 21 </asp:ContentPlaceHolder> 22 </div> 23 </form> 24 </body> 25 </html> 26 2.内容页 27 <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="fengshang.WebForm1" %> 28 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 29 <style type="text/css"> 30 /*内容页style*/ 31 </style> 32 </asp:Content> 33 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 34 这是内容页的内容 35 </asp:Content>
源码显示为：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head><title> 5 6 </title> 7 <style type="text/css"> 8 /*母版页style*/ 9 </style> 10 11 <style type="text/css"> 12 /*内容页style*/ 13 </style> 14 </head> 15 <body> 16 <form name="aspnetForm" method="post" action="WebForm1.aspx" id="aspnetForm"> 17 <div> 18 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkPKm24JW/7ZKrdvS7pAjIKwX0Y+8=" /> 19 </div> 20 21 <div> 22 这是母版页显示内容 23 24 这是内容页的内容 25 26 </div> 27 </form> 28 </body> 29 </html>
当然实际工作中我们是不需要两个style标签的。
