演练：在 ASP.NET 中使用嵌套的母版页
更新：2007 年 11 月
本演练介绍如何创建嵌套在另一个母版页中的母版页。母版页可用作指定页面外观的模板。
通过嵌套母版页，可以使每个页面具有灵活的布局，同时让网站保持一致的外观。例如，您可以创建一个父级母版页，在其顶部设置公司横幅，并在侧栏中提供网站导航控件。随后，可以为特定部门或产品创建使用该父级母版页的子级母版页。它还可以用作所有其他相关部门或产品页的母版页。按照这种方式，每个产品线或部门都将具有一致的外观，而所有页面也都会因为使用了父级母版页而具有一致的整体外观。有关母版页的更多信息，请参见 ASP.NET 母版页概述。
本演练阐释了以下任务：
创建母版页。
创建嵌套在其他母版页中的母版页。
创建一个 ASP.NET 页，此页包含要在母版页中显示的内容。
先决条件
若要完成本演练，将需要以下组件：
Visual Studio 2008 或 Microsoft Visual Web Developer 速成版。有关下载信息，请参见 Visual Studio Developer Center（Visual Studio 开发中心）网站。
.NET Framework 3.5 版。
（可选）可用作母版页上的横幅的 .jpg、.gif 或其他图形文件。建议横幅的宽度不要超过 780 像素，高度不要超过 150 像素。但是，显示徽标为可选操作，图形的确切大小对于完成本演练并不重要。
创建网站
如果已在 Visual Web Developer 中创建了一个网站（例如，按照演练：在 Visual Web Developer 中创建基本网页中介绍的步骤），则可以使用该网站并转到下一部分“创建母版页”。否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在“文件”菜单中单击“新建网站”。
显示“新建网站”对话框。
在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。
在“位置”框中，键入要保存网站页面的文件夹的名称。
例如，可以键入以下路径：“C:\Tasks”
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 将创建该文件夹和名为 Default.aspx 的新页。
创建父级母版页
在本节中，将创建一个父级母版页。此页包含一个横幅和若干导航控件，它们可以在整个站点中使用。随后，将创建另一个要在此父级母版页中使用的母版页。子级母版页可以提供多种页面布局，同时保留由父级母版页建立的外观。
创建母版页
在“解决方案资源管理器”中，右击网站的名称，然后单击“添加新项”。
显示“添加新项”对话框。
在“Visual Studio 已安装的模板”之下单击“母版页”。
在“名称”框中，键入“ParentMaster”。
清除“将代码放在单独的文件中”复选框。
在“语言”列表中，单击您想使用的编程语言。
单击“添加”。
新母版页将在“源”视图中打开。
向父级母版页中添加元素
母版页顶部是一个 @ Master 声明，而不是通常在 ASP.NET 页顶部看到的 @ Page 声明。页面的主体包含一个 ContentPlaceHolder 控件，此母版页区域中的可替换内容将在运行时与内容页合并。在本演练的后续部分中，将会更多地使用内容占位符。
向父级母版页添加图形
在将图形合并到父级母版页之前，必须先将图形文件添加到网站中。
为横幅创建一个宽 780 像素、高 150 像素的图形，并为页脚创建一个宽 780 像素、高 50 像素的图形。这些图形用于演示父级母版页上的图形在嵌套母版页中的外观。如果您没有这些图形，可以在 Microsoft 画图或其他图形程序中创建它们。
向网站中添加现有的图形文件
在“解决方案资源管理器”中，右击网站的名称，然后单击“添加现有项”。
显示“添加现有项”对话框。
选择已创建的图形文件。
单击“添加”。
在父级母版页上，您添加了两个简单的图形，其中一个用于显示横幅，另一个用于显示页脚。借助这些图形，您将看到在本演练后面创建的嵌套母版页使用父级母版页的情况。
向父级母版页中添加横幅和页脚图形
在“源”视图中找到开始标记 <form>，然后紧靠其后添加一个包含横幅图形的 img 元素的 div 元素。
例如，如果创建了一个名为 Banner.gif 的图形，则用于添加此图形的标记将类似于以下内容：
<div id="banner"> <img src="banner.gif" alt="banner graphic" /> </div>在紧靠结束标记 </form> 的前面，添加一个包含页脚图形的 img 元素的 div 元素。
例如，如果创建了一个名为 Footer.gif 的图形，则用于添加此图形的标记将类似于以下内容：
<div id="banner"> <img src="footer.gif" alt="footer graphic" /> </div>保存此母版页。
请注意，ContentPlaceHolder 控件内尚未添加任何内容。您将在 ContentPlaceHolder 控件内创建下一组母版页。
创建子级母版页
若要将一个母版页嵌套在另一个母版页中，必须创建另一个母版页。新的母版页将位于父级母版页的内容占位符内。通过子级母版页，可以按不同的方式安排页面布局，同时保持由父级母版页建立的一致外观。
创建子级母版页
在“解决方案资源管理器”中，右击网站的名称，然后单击“添加新项”。
显示“添加新项”对话框。
在“Visual Studio 已安装的模板”之下单击“母版页”。
在“名称”框中，键入 ChildMaster。
清除“将代码放在单独的文件中”复选框。
选中“选择母版页”复选框。
在“语言”列表中，单击您想使用的编程语言。
单击“添加”。
将显示“选择母版页”对话框。
选择您在本演练前面部分中创建的父级母版页。
单击“确定”。
新母版页将在“源”视图中打开。
请注意，新母版页顶部的 @ Master 声明指示它引用了另一个母版页。
向子级母版页中添加 ContentPlaceHolder 控件
由于子级母版页具有与之关联的另一个母版页，因此它包含两个 Content 控件。第一个内容占位符可用于向页面中添加通常显示在 head 元素中的信息，例如 script 元素。在第二个 Content 控件内，可以添加一个 ContentPlaceHolder 控件。这样，使用子级母版页的 ASP.NET 页便可以提供页面内容。在 Content 控件内还可以添加其他页面元素。子级母版页可以包含其他页面元素，以便为使用它的其他页面提供一致的外观。
向子级母版页中添加 ContentPlaceholder 控件
打开或切换到该子级母版页。
切换到“源”视图。
在第二个 Content 控件部分中添加以下标记，以创建 ContentPlaceHolder 控件：
<div id="2col"> <asp:ContentPlaceHolder ID="leftcolumn" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="rightcolumn" runat="server"> </asp:ContentPlaceHolder> </div>保存该文件。
现在，子级母版页已具有 ContentPlaceHolder 控件，这些控件包含使用该子级母版页的 ASP.NET 页中的标记。
创建使用子级母版页的内容页
在上述步骤中，已创建一个嵌套在其他母版页内部的母版页。在得到的子级母版页中，您可以使用父级母版页的用户界面元素。它还提供了要在另一个母版页中使用的其他用户界面元素。在本演练中，您向父级母版页添加了一些图形，并在第二个母版页中添加了一些占位符。若要查看运行中的嵌套母版页，必须创建一个使用子级母版页的 ASP.NET 网页。使用子级母版页创建的新页将自动为您在子级母版页中创建的每个 ContentPlaceHolder 控件包含一个 Content 控件。
创建使用子级母版页的页面
在“解决方案资源管理器”中，右击网站的名称，然后单击“添加新项”。
显示“添加新项”对话框。
在“Visual Studio 已安装的模板”下单击“Web 窗体”。
在“名称”框中，键入 Tasks。
选中“将代码放在单独的文件中”复选框。
选中“选择母版页”复选框。
在“语言”列表中，单击您想使用的编程语言。
单击“添加”。
在“选择母版页”对话框中，选择您在本演练的前面部分中创建的子级母版页。
单击“确定”。
新内容页将在“源”视图中打开。
将第一个 Content 控件的 ID 更改为“leftcolumn”，并将第二个 Content 控件的 ID 更改为“rightcolumn”。
向左栏或右栏 Content 控件中添加文本或页面元素。
按 Ctrl+F5 以运行网站。
请注意，Tasks.aspx 页显示的是您在本演练中创建的所有元素的综合效果。这包括父级母版页上的图形、子级母版页上的双栏布局，以及向 Tasks.aspx 页中添加的文本和控件。
后续步骤
现在，您已经了解了嵌套母版页的工作原理，下面可以创建使用父级母版页的其他子级母版页了。您在本演练中创建的子级母版页创建了一个双栏布局。在为该父级母版页创建其他子级母版页时，您可以创建单栏布局或某种其他布局。