一、定义
使用 ASP.net母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页(或一组页)定义所需的外观和标准行为。
母版页的使用与普通页面类似,可以在其中放置文件或者图形、任何的HTML控件和Web控件,后置代码等。母版页的扩展名以.master结尾,不能被浏览器直接查看。母版页必须在被其他页面使用后才能进行显示。
它的使用跟普通的页面一样,可以可视化的设计,也可以编写后置代码。与普通页面不一样的是,它可以包含ContentPlaceHolder控件,ContentPlaceHolder控件就是可以显示内容页面的区域。
母版页仅仅是一个页面模板,单独的母版页是不能被用户所访问的。单独的内容页也不能够使用。母版页和内容页有着严格对应关系。母版页中包含多少个ContentPlaceHolder控件,那么内容页中也必须设置与其相对应的Content控件。当客户端浏览器向服务器发出请求,要求浏览某个内容页面时,引擎将同时执行内容页和母版页的代码,并将最终结果发送给客户端浏览器。
优点:
1、使用母版页可以集中处理页的通用功能,以便可以只在一个位置上进行更新。
2、使用母版页可以方便地创建一组控件和代码,并将结果应用于一组页。例如,可以在母版页上使用控件来创建一个应用于所有页的菜单。
3、通过允许控制占位符控件的呈现方式,母版页使您可以在细节上控制最终页的布局。
4、母版页提供一个对象模型,使用该对象模型可以从各个内容页自定义母版页。
二、母版页的创建
解决方案右键--添加新项--母版页--添加
母版页中预留有两个母版控件,应用于调用的web窗体添加内容,母版内容在body中设置
例:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <%-- 头部母版 --%> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <%-- 母版样式 --%> <style type="text/css"> #top { 100%; height:100px; background-color:red; } #bottom { 100%; height:300px; background-color:black; } </style> </head> <body> <form id="form1" runat="server"> <div> <%-- 母版内容 --%> <div id="top"></div> <%-- 内容母版 --%> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <div id="bottom"></div> </div> </form> </body> </html>
母版引用:
解决方案右键--添加新项--新建web窗体--选择母版--添加
例:
三、主程序编写:
1、新建web窗体中
/2、次级母版页
<%@ Master Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div style="100px;height:300px;background-color:blue;float:left"> <div>dssdsa</div> <div>asdas</div> <div>fcdsfd</div> <div>dfdsvcx</div> <div>dfdsagv</div> <div>fdsvcxv</div> <div>cxzvz</div> <div>cxvz</div> <div>zcxvz</div> </div> <div style="800px;height:200px;background-color:yellow;float:left"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> </div> </asp:Content>
效果图:
编写在预留的内容母版页中,母版页要添加控件
四、多层次母版传值
多层级母版传值,是在父级母版中设置公共方法,在子级中调用
例:
public partial class MP2 : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } public void aaa(string a) { TextBox1.Text = a; MP1 m1 = this.Master as MP1; m1.m1_aaa(a); } }
public partial class Default3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click; } void Button1_Click(object sender, EventArgs e) { string s =TextBox1.Text; Label1.Text = s; MP2 m2 = this.Master as MP2; m2.aaa(s); } }
五、母版页样式及js
母版页样式表由外部引用不许要翻页,母版页相当于一个掮客将路径缩短,可认为样式在母版页,页面调用的母版页样式
母版页js不能自动匹配,解决方案:
<script src="<%=abc() %>"></script>
C#代码:
public string YingShe() { return ResolveClientUrl("js/JavaScript.js");
}