寫在前面的話:
對於一個項目來說,我們可能會用到許多的母版頁+內容頁的組合.那么當我們使用到多個母版頁時,我們可能會遇到這樣的問題.在不同的母版頁內加載相同的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; }
如此,我們就實現了在內容頁訪問母版頁的內容.