嵌套母版页
写在前面的话:
对于一个项目来说,我们可能会用到许多的母版页+内容页的组合.那么当我们使用到多个母版页时,我们可能会遇到这样的问题.在不同的母版页内加载相同的js和css内容.
如果一个js或css文件在项目中的位置发生了变化,我们就要修改多个母版页的js和css的link.
对此,我们或许可以使用嵌套母版页的形式,来使我们尽量只改变一处的link,就可以使所有页面的js或css得到更新.
下面,我们举例说明.
例子介绍:
在例子中,我们有以下内容:
1.一个main.master页,在这个页面中,有一个ID为btn_main的Button和一个div
2.一个sub1.master页,在这个页面中,有一个ID为btn_sub1的Button和一个div
3.一个WebForm1.aspx内容页,有一个ID为btn_page的Button和一个div
4.一个1.js文件,js文件中有一个myAlert()的函数
5.一个1.css文件,css文件中有.myBack样式
文档结构如下:
例子展示内容:
1.通过main.master如何引用公共的js和css文件
2.通过WebForm1.aspx页,如何访问main.master的button、访问sub1.master的button
例子:
main.master的代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebMasterTest.masterpages.Main" %> <!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></title> <link href="../css/1.css" rel="stylesheet" type="text/css" /> <script src="<%= Request.ApplicationPath%>/scripts/1.js" type="text/javascript"></script> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btn_main" runat="server" Text="我是主母版页上的按钮" OnClientClick="myAlert('我是主母版页上的按钮');" />
<div class='myBack'>主模板页</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
注意:
1.css文件的路径是相对于master页的.
2.js文件的路径是相当于内容页的.此时,我们使用的是绝对路径的方式来引用js文件.我们使用的是<%= Request.ApplicationPath%>/来获取路径.
特别注意:ApplicationPath和后面的%>/之间,不能有空格.
sub1.master的代码
<%@ Master Language="C#" MasterPageFile="~/masterpages/Main.Master" AutoEventWireup="true" CodeBehind="Sub1.master.cs" Inherits="WebMasterTest.masterpages.Sub1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <asp:Button ID="btn_sub" runat="server" Text="我是子母版页上的按钮" OnClientClick="myAlert('我是子母版页上的按钮');" /> <div class='myBack'>子模板页</div> <asp:ContentPlaceHolder ID="ContentPlaceHolder11" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="ContentPlaceHolder12" runat="server"> </asp:ContentPlaceHolder> </asp:Content>
WebForm1.aspx内容页的代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/masterpages/Sub1.master" AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs" Inherits="WebMasterTest.pages.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder11" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder12" runat="server"> <asp:Button ID="btn_page" runat="server" Text="这是内容页上的按钮" OnClientClick="myAlert('我是内容页上的按钮');" /> <div class='myBack'>内容页</div> <img alt="" height="120" src="../css/images/成长的历程.jpg" width="120" /> </asp:Content>
此时,如果js或css的文件路径发生了变化,我们也只需变动main.master页面中的link路径即可.同时.我们在sub1.master页中也放置了id为head的contentPlaceHolder元素,这样,在webform1.aspx页中,用户也可以自行添加需要的js文件或函数.
我们可以看到,在这3个页面上的div中,我们均可以引用到class为myBack的css类.
那么我们如何在webform1.aspx页访问main.master和sub1.master页中的button呢.在webform1.aspx.cs中,代码如下:
protected void Page_Load(object sender, EventArgs e) { //获取main.master var mainMaster = Page.Master.Master as MasterPage; //获取main.master页上的button var btnmaster = mainMaster.FindControl("btn_main") as Button; //获取sub1.master页的button // 这个有些特殊.不能通过Page.Master.FindControl("btn_sub") // 而应通过如下的方式,获取子母版页上的button var btnSub = mainMaster.FindControl("ContentPlaceHolder1") .FindControl("btn_sub") as Button; }
如此,我们就实现了在内容页访问母版页的内容.
