母版页

由 Microsoft

成功网站的关键组件之一是一致的外观。 在 ASP.NET 1.x 中，开发人员使用用户控件跨 Web 应用程序复制公共页面元素。 虽然这当然是可行的解决方案，但使用用户控件确实有一些缺点。 例如，更改用户控件的位置需要更改网站中的多个页面。 在页面上插入用户控件后，也不会在“设计”视图中呈现。

成功网站的关键组件之一是一致的外观。 在 ASP.NET 1.x 中，开发人员使用用户控件跨 Web 应用程序复制公共页面元素。 虽然这当然是可行的解决方案，但使用用户控件确实有一些缺点。 例如，更改用户控件的位置需要更改网站中的多个页面。 在页面上插入用户控件后，也不会在“设计”视图中呈现。

ASP.NET 2.0 引入了母版页，作为保持一致外观的一种方式，正如你即将看到的，母版页比用户控制方法有了重大改进。

为什么选择母版页？

你可能想知道为什么在 ASP.NET 2.0 中需要母版页。 毕竟，网站开发人员已经在使用 ASP.NET 1.x 中的用户控件在页面之间共享内容区域。 用户控件对于创建通用布局而言，实际上有几个原因。

用户控件实际上不定义页面布局。 而是为页面的一部分定义布局和功能。 这两者之间的区别非常重要，因为它使用户控件解决方案的可管理性更加困难。 例如，如果要更改用户控件在页面上的位置，则必须编辑显示用户控件的实际页面。 如果你只有几页，那很好，但在大型网站中，它很快就会成为网站管理的噩梦！

使用用户控件定义通用布局的另一个缺点源于 ASP.NET 本身的体系结构。 如果用户控件的任何公共成员发生更改，则需要重新编译使用该用户控件的所有页面。 然后，ASP.NET 会在第一次访问页面时重新 JIT 页面。 这再次产生不可缩放的体系结构和大型站点的站点管理问题。

ASP.NET 2.0 中的母版页很好地解决了 (和更多) 这两个问题。

母版页的工作原理

母版页类似于其他页面的模板。 应与其他页面共享 (（例如菜单、边框等) ）共享的页面元素将添加到母版页。 将新页面添加到网站后，可以将它们与母版页相关联。 与母版页关联的页面称为 内容页。 默认情况下，内容页采用母版页的外观。 但是，创建母版页时，可以定义内容页可以替换为其自己的内容的页面部分。 这些部分使用 ASP.NET 2.0 中引入的新控件进行定义; ContentPlaceHolder 控件。

母版页可以包含任意数量的 ContentPlaceHolder 控件， (或根本没有。) 在内容页上，ContentPlaceHolder 控件中的内容显示在 Content 控件（ASP.NET 2.0 中的另一个新控件）内。 默认情况下，内容页“内容”控件为空，因此可以提供自己的内容。 如果想要使用 Content 控件内的母版页中的内容，可以按照本模块后面部分所示执行此操作。 Content 控件通过 Content 控件的 ContentPlaceHolderID 属性映射到 ContentPlaceHolder 控件。 下面的代码将 Content 控件映射到母版页上名为 mainBody 的 ContentPlaceHolder 控件。

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

注意

你经常会听到人们将母版页描述为其他页面的基类。 这实际上不是真的。 母版页与内容页之间的关系不是继承关系。

图 1 显示了 Visual Studio 2005 中显示的母版页和关联的内容页。 可以在母版页中看到 ContentPlaceHolder 控件，在内容页中看到相应的 Content 控件。 请注意，ContentPlaceHolder 外部的母版页内容可见，但在内容页中灰显。 只有 ContentPlaceHolder 内的内容才能被内容页取代。 来自母版页的所有其他内容是不可变的。

图 1：母版页及其关联内容页

创建母版页

创建新的母版页：

1. 打开 Visual Studio 2005 并创建新网站。
2. 依次单击“文件”、“新建”、“文件”。
3. 从“添加新项”对话框中选择“主文件”，如图 2 所示。
4. 单击“添加”。

图 2：创建新的母版页

请注意，母版页的文件扩展名为 .master。 这是母版页不同于普通页面的方式之一。 另一个主要区别是，母版页包含指令@Master，而不是@Page指令。 切换到刚创建的母版页的“源视图”并查看代码。

默认情况下，新的母版页将具有一个 ContentPlaceHolder 控件。 在大多数情况下，最好先创建公共页面元素，然后在需要自定义内容的地方插入 ContentPlaceHolder 控件。 在这些情况下，开发人员需要删除默认 ContentPlaceHolder 控件，并在开发页面时插入新控件。 尽管 ContentPlaceHolder 控件显示大小控点，但无法调整大小。 ContentPlaceHolder 控件根据它包含的内容自动调整大小，但有一个例外;如果将 ContentPlaceHolder 控件放置在块元素（如表格单元格）内，它将根据元素的大小调整大小。

实验室 1 使用母版页

在本实验室中，你将创建新的母版页并定义三个 ContentPlaceHolder 控件。 然后，您将创建新的“内容”页，并替换至少一个 ContentPlaceHolder 控件中的内容。

1. 创建母版页并插入 ContentPlaceHolder 控件。

   1. 如上所述创建新的母版页。
   2. 删除默认 ContentPlaceHolder 控件。
   3. 通过单击控件的着色上边框来选择 ContentPlaceHolder 控件，然后按键盘上的 DEL 键将其删除。
   4. 使用 页眉和侧模板 插入新表，如图 3 所示。 将宽度和高度分别更改为 90%，以便整个表在设计器中可见。

图 3

1. 将光标置于表格的每个单元格中，并将 valign 属性设置为 顶部。
2. 在工具箱中，在表的顶部单元格中插入 ContentPlaceHolder 控件， (标题单元格。)
3. 插入此 ContentPlaceHolder 控件时，你会注意到行高几乎会占用整个页面，如图 4 所示。 此时不要担心这一点。

图 4：空白空间与 ContentPlaceHolder 位于同一单元格中

1. 将 ContentPlaceHolder 控件放在其他两个单元格中。 插入其他 ContentPlaceHolder 控件后，表格单元格的大小应与预期一样。 页面现在应类似于 图 5 所示的页面。

图 5：具有所有 ContentPlaceHolder 控件的主控形状。 请注意，标题单元格的单元格高度现在应为

1. 在三个 ContentPlaceHolder 控件中输入所选的一些文本。
2. 将母版页另存为 exercise1.master。
3. 创建新的 Web 窗体并将其与 exercise1.master 母版页相关联。
4. 依次选择“文件”、“新建”、“Visual Studio 2005 中的文件”。
5. 在“添加新项”对话框中选择“ Web 窗体 ”。
6. 确保选中“选择母版页”复选框，如图 6 所示。

图 6：添加新的内容页

1. 单击“添加”。
2. 在“选择母版页”对话框中选择“exercise1.master”，如图 7 所示。
3. 单击“确定”添加新内容页。

新内容页显示在 Visual Studio 中，母版页上每个 ContentPlaceHolder 控件都有一个 Content 控件。 默认情况下，Content 控件为空，以便你可以添加自己的内容。 如果希望他们使用母版页上 ContentPlaceHolder 控件中的内容，只需单击智能标记符号 (控件右上角的黑色小箭头) ，然后从智能标记中选择 “默认母版内容 ”，如图 8 所示。 执行此操作时，菜单项将更改为 “创建自定义内容”。 此时单击该控件会从母版页中删除内容，以便为该特定 Content 控件定义自定义内容。

图 7：将内容控件设置为母版页内容的默认值

连接母版页和内容页

母版页和内容页之间的关联可以通过以下四种不同方式之一进行配置：

• 指令的 @PageMasterPageFile 属性
• 在代码中设置 Page.MasterPageFile 属性。
• 应用程序配置文件 (web.config 中应用程序根文件夹中的 pages> 元素) <
• 子文件夹配置文件 (web.config 子文件夹中的 pages> 元素) <

MasterPageFile 属性

使用 MasterPageFile 属性可以轻松将母版页应用于特定 ASP.NET 页。 这也是在检查“选择母版页”复选框时应用母版页的方法，如练习 1 中所做的那样。

在代码中设置 Page.MasterPageFile

通过在代码中设置 MasterPageFile 属性，可以在运行时将特定的母版页应用于内容。 这在可能需要根据用户角色或其他条件应用特定母版页的情况下非常有用。 MasterPageFile 属性必须在 PreInit 方法中设置。 如果在 PreInit 方法之后设置，则会引发 InvalidOperationException。 设置此属性的页面还必须具有 Content 控件作为页面的顶级控件。 否则，设置 MasterPageFile 属性时将引发 HttpException。

<使用 pages> 元素

可以通过在 web.config 文件的 pages 元素中 <设置 masterPageFile 属性，为页面配置母版页> 。 使用此方法时，请记住，应用程序结构中较低web.config文件可以替代此设置。 指令中 @Page 设置的任何 MasterPageFile 属性也将替代此设置。 <使用 pages> 元素可以轻松创建可在特定文件夹或文件中根据需要重写的主母版页。

母版页中的属性

母版页只需在母版页中公开这些属性即可公开属性。 例如，以下代码定义一个名为 SomeProperty 的属性：

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

若要从“内容”页访问 SomeProperty 属性，需要使用 Master 属性，如下所示：

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

嵌套母版页

母版页是确保整个大型 Web 应用程序具有通用外观的完美解决方案。 但是，让大型网站的某些部分共享一个通用接口，而其他部分共享不同的接口并不少见。 为了满足这一需求，多个母版页是完美的解决方案。 但是，这仍然无法解决这样一个事实：大型应用程序可能具有某些组件 (，例如菜单，例如在所有页面之间共享的) ，以及仅在网站的某些部分之间共享的其他组件。 对于这种情况，嵌套母版页很好地填补了需求。 如你所见，普通母版页由母版页和内容页组成。 在嵌套母版页情况下，有两个母版页：父主控形状和子主控形状。 子母版页也是内容页，其母版页是父母版页。

下面是典型母版页的代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!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>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

在嵌套主节点方案中，这将是父主控形状。 另一个母版页将使用此页作为其母版页，该代码将如下所示：

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

请注意，在此方案中，子主控形状也是父主控形状的内容页。 子主控形状的所有内容都显示在 Content 控件内，该控件从父级的 ContentPlaceHolder 控件获取其内容。

注意

Designer不支持嵌套母版页。 使用嵌套主控形状进行开发时，需要使用源视图。

此视频演示了使用嵌套母版页的演练。

打开Full-Screen视频

图 8：选择母版页