WebFrom 【母版页】

ASP.NET中母版页作用

一是提高代码的复用（把相同的代码抽出来）

二是使整个网站保持一致的风格和样式。

母版页存在就一定要有内容页的存在，否则母版页的存在就没有了意义。

.master

一、添加母版页

在新建的母版页中你会发现自动生成了两个ContentPlaceHolder控件

一个在head区， ID=“head”；

一个在body区，默认ID=“ContentPlaceHolder1”

--这是两个占位符控件，文本位置预留。

二级母版页

母版页是可以嵌套的，即在原母版页的基础上再建立母版页。

嵌套的母版页不会自动生成ContentPlaceHolder 控件，需要手动写入

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MP1.master.cs" Inherits="MP1" %>

<!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>
    <link href="css/css1.css" rel="stylesheet" />

    

    <asp:ContentPlaceHolder ID="head" runat="server"><%--文本位置预留--%>
    </asp:ContentPlaceHolder>





</head>
<body>
    <form id="form1" runat="server">
        <div>


            <div class="header">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  <%--标题栏布局--%>
            </div>




            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"><%--文本位置预留--%>
            </asp:ContentPlaceHolder>




            <div class="footer"></div>  <%-- 结尾栏布局--%>



        </div>

        <script src="<%=abc() %>"></script>   <%--引用外部的js，（在 form 内）--%>
    </form>
</body>
</html>

一级母版页

<%@ 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=" 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=" 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控件，与一级母版页相对应

<%@ 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>

View Code

2、套用二级母版页

在新建Web窗体中只有一个Content控件，自己挖的那个

<%@ 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>

View Code

四、母版页与子页之间数据的传递：

在子页中没有办法从外面访问到母版页的内部

可已写公共方法用调用方法的形式传值

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);                    //调用这个母版页的方法
    }
}

子页

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);                  //调用这个网页的母版页的方法
    }
}

二级母版页

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 不会自动匹配

        <script src="<%=abc() %>"></script>   <%--引用外部的js，（在 form 内）--%>
    </form>
     
                      <%--     前台引用     --%>


---------------------------------------

 public string abc()
    {
        return ResolveClientUrl("js/js1.js");
    }


   <%--     后台写方法     --%>

View Code

引用外部 js 时，可以写一个方法，自动获取正确的路径

return ResolveClientUrl（" 路径 "）