5.4 嵌套母版页

所谓“嵌套”,就是一个套一个,大的容器套装小的容器。嵌套母版页就是指创建一个大母版页,在其中包含另外一个小的母版页。如图5.5所示为嵌套母版页的示意图。

图5.5 嵌套母版页的示意图

利用嵌套的母版页可以创建组件化的母版页。例如,大型网站可能包含一个用于定义站点外观的总体母版页,不同的网站内容合作伙伴又可以定义各自的子母版页,这些子母版页引用网站母版页,并相应定义合作伙伴的内容外观。

【例5.1】 创建一个简单的嵌套母版页。(示例位置:TM\sl\05\01

本示例主要通过一个简单的嵌套母版页示例来加深读者对嵌套母版页的理解。执行程序,示例运行结果如图5.6所示。

图5.6 嵌套母版页

程序实现的主要步骤如下。

(1)新建一个网站,将其命名为01。

(2)在该网站的解决方案下右击网站名称,在弹出的快捷菜单中选择“添加新项”命令,打开“添加新项”对话框,首先添加两个母版页,分别命名为MainMaster(主母版页)和SubMaster(子母版页),然后再添加一个Web窗体,命名为Default.aspx,并将其作为SubMaster(子母版页)的内容页。

如图5.6所示的页面是由主母版页(MainMaster)、子母版页(SubMaster)和内容页(Default.aspx)组成的,主母版页包含的内容主要是页面的公共部分,主母版页嵌套子母版页,内容页绑定子母版页。

(3)主母版页的构建方法与普通的母版页一致。由于主母版页嵌套一个子母版页,因此必须在适当的位置设置一个ContentPlaceHolder控件实现占位。主母版页的设计代码如下:

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainMaster.master.cs"
        Inherits="MainMaster" %>
        <! 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>
        </head>
        <body>
            <form id="form1" runat="server">
            <div>
              <table style="width: 759px; height: 758px" cellpadding="0" cellspacing="0">
                  <tr>
                      <td style="background-image: url(Image/baner.jpg); width: 759px; height: 153px">
                      </td>
                  </tr>
                  <tr>
                      <td style="width: 759px; height: 498px" align="center" valign="middle">
              <asp:contentplaceholder id="MainContent" runat="server">
              </asp:contentplaceholder>
                      </td>
                  </tr>
                  <tr>
                      <td style="background-image: url(Image/3.jpg); width: 759px; height: 107px">
                      </td>
                  </tr>
              </table>
            </div>
            </form>
        </body>
        </html>

(4)子母版页以.master为扩展名,其代码包括两个部分,即代码头声明和Content控件。子母版页与普通母版页相比,不包括<html>、<body>等Web元素。在子母版页的代码头中添加了一个属性MasterPageFile,以设置嵌套子母版页的主母版页路径,通过设置这个属性,实现主母版页和子母版页之间的嵌套。子母版页的Content控件中声明的ContentPlaceHolder控件用于为内容页实现占位。子母版页的设计代码如下:

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SubMaster.master.cs" Inherits="SubMaster"
        MasterPageFile ="~/MainMaster.master" %>
        <asp:Content id="Content1" ContentPlaceholderID="MainContent" runat="server">
            <table style="background-image: url(Image/2.jpg); width:759px; height: 498px">
            <tr>
            <td align ="center" valign ="middle">
              <h1>子母版页</h1>
            </td>
          <td align ="center" valign ="middle">
              <asp:contentplaceholder id="SubContent" runat="server">
              </asp:contentplaceholder>
          </td>
          </tr>
          </table>
      </asp:Content>

注意

这里需要强调的是子母版页中不包括<html>、<body>等HTML元素。在子母版页的@Master指令中添加了MasterPageFile属性以设置主母版页路径,从而实现嵌套。

(5)内容页的构建方法与普通内容页一致。它的代码包括两部分,即代码头声明和Content控件。由于内容页绑定子母版页,所以代码头中的属性MasterPageFile必须设置为子母版页的路径。内容页的设计代码如下:

        <%@ Page Language="C#" MasterPageFile="~/SubMaster.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
        <asp:Content ID="Content1" ContentPlaceHolderID="SubContent" Runat="Server">
        <table style="width :451px; height :391px">
        <tr>
        <td>
        <h1>内容页</h1>
        </td>
        </tr>
        </table>
        </asp:Content>