webfrom 母版页
ASP.NET中母版页作用
一是提高代码的复用(把相同的代码抽出来)
二是使整个网站保持一致的风格和样式。
母版页存在就一定要有内容页的存在,否则母版页的存在就没有了意义。
.master
一、添加母版页
在新建的母版页中你会发现自动生成了两个ContentPlaceHolder控件
一个在head区, ID=“head”;
一个在body区,默认ID=“ContentPlaceHolder1”
--这是两个占位符控件,文本位置预留。
二级母版页
母版页是可以嵌套的,即在原母版页的基础上再建立母版页。
嵌套的母版页不会自动生成ContentPlaceHolder 控件,需要手动写入
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Master Language="C#" MasterPageFile="~/MP1.master" AutoEventWireup="true" CodeFile="MP2.master.cs" Inherits="MP2" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> </asp:Content> <%--一级母版页预留的坑--%> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <%--一级母版页预留的坑--%> <div style="width: 30%; float: left; height: 500px; background-color: green;"> 这是一条菜单选项<br /> <br /> 这是一条菜单选项<br /> <br /> 这是一条菜单选项<br /> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> <div style="width: 70%; float: left; height: 500px; background-color: yellow;"> <asp:ContentPlaceHolder ID="MP2_Content1" runat="server"> </asp:ContentPlaceHolder> <%--二级模板挖的坑,留给后面填--%> </div> <div style="clear: both;"></div> <asp:ContentPlaceHolder ID="mp2_js" runat="server"></asp:ContentPlaceHolder> </asp:Content>
三、建立使用母版页的Web窗体
在新建web窗体时,选择要套用的母版页
1、套用一级模板页
在新建的web窗体中有两个Content控件,与一级母版页相对应
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Page Title="" Language="C#" MasterPageFile="~/MP1.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h1>这是页面1,是我们套母版页出来的页面!!!!</h1> </asp:Content>
2、套用二级母版页
在新建Web窗体中只有一个Content控件,自己挖的那个
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Page Title="" Language="C#" MasterPageFile="~/MP2.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <asp:Content ID="Content1" ContentPlaceHolderID="MP2_Content1" Runat="Server"> <h1>这里是我们套用二级母版页MP2出来的页面啊啊啊!!!!</h1> </asp:Content>
四、母版页与子页之间数据的传递:
在子页中没有办法从外面访问到母版页的内部
可已写公共方法用调用方法的形式传值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; 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); //调用这个母版页的方法 } } 子页
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MP2 : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } public void aaa(string a) //二级母版中的 公共方法 { TextBox1.Text = a; // 将传进来的值赋到 TextBox1 上 MP1 m1 = this.Master as MP1; //获取当前这个页的母版页 m1.m1_aaa(a); //调用这个网页的母版页的方法 } } 二级母版页
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MP1 : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } public void m1_aaa(string a) { TextBox1.Text = a; //方法 } 一级母版页
MP1 m1 = this.Master as MP1; //获取当前这个页的母版页
子页 —— 二级母版 —— 一级母版 一层层传递
五、母版页公共的外部样式表路径和外部JS文件的路径匹配
css 会自动匹配相应的路径
js 不会自动匹配
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script src="<%=abc() %>"></script> <%--引用外部的js,(在 form 内)--%> </form> <%-- 前台引用 --%> --------------------------------------- public string abc() { return ResolveClientUrl("js/js1.js"); } <%-- 后台写方法 --%>
引用外部 js 时,可以写一个方法,自动获取正确的路径
return ResolveClientUrl(" 路径 ")