2.2 Master和Content页面

站点得益于一致的外观，很少在Internet上看到没有通用站点布局的站点，通用的站点布局通常包括以下几方面：

● 整个站点的公共标题和菜单系统；

● 在页面左侧的一栏提供一些页面导航选项；

● 页脚提供版权信息和与站点管理员联系的二级菜单。

这些元素会出现在每个页面上，它们不仅提供必要的功能，而且这些元素的一致布局也向用户表明他们仍旧在同一个站点中。虽然这些外观可以通过在HTML中使用包含文件构建，但ASP.NET 2.0提供更加健壮的工具Master页面和Content页面系统。

Master页面定义所有基于Master的页面使用的布局。它是控制布局、指定每页的标题大小、指定导航功能放置在何处以及每页页脚所示文本的父层——它有点像每个页面的Cookie Cutter。Master页面包含站点上每个页面都使用的一些内容，因此可以在这里定义标准的页脚版权文本，还可以在页面的顶部放置主站标志。定义了Master的标准外观后，接着添加一些占位符——指定页面上的区域，定义每个页面不同的内容放置在何处。

Content是基于Master的页面，是为站点的每个页面添加内容的地方，这些内容每一页都不同。Content页面在<asp:content>标记内包含文本、HTML和控件。请求Content页面时，它的内容与Master页面的一个副本合并，把定义在Content页面中的特定内容放到Master页面的指定占位符处。然后把整个包传递给浏览器，如图2-1所示。

图2-1

幸运的是，这种体系结构的大更改是由ASP.NET 2.0完成的；您只需按以下两节的说明创建Master和Content页面。

2.2.1 创建Master页面

创建Msater页面的方法是，在VWD的Solution Explorer中通过右键单击站点的根目录，选择Add Item，然后指定类型为Master Page。默认情况下，新建的Master页面的名称是MasterPage.master并且位于站点的根目录。Master页面包括三部分。

第一部分是任何提交的页面都需要的一些基本页面标记（例如，Master的DOCTYPE、xmlns、html和head标记）。这些内容在Mater页面中只输入一次以减少重复。服务器能在DOCTYPE和xmlns引用的位置查找页面上使用的标记定义。注意这些标记将不在Content页面中出现：

<%@ master language="C#" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Wrox United</title>

</head>

Master页面的第二部分是在所有页面上放置要运行的脚本的地方（例如，Page_Load代码，它在每次加载页面时运行）。例如：

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

' ...

End Sub

</script>

第三，Master页面包含一些用于布局的HTML以及开始/结束标记<asp:content ...Content-
PlaceHolderID="xxx>和</asp:content>。Content页面的内容将放在这两个标记之间。例如：

<body>

<asp:contentplaceholder id="mainContent" runat="server" />

</div>

</div>

</form>

</body>

</html>

总之，每个Master页面必须包含下面的元素：

● 基本的HTML和XML类型标记；

● 位于第一行的<%@ master ... %>；

● 带有ID的<asp:GontentPlaceHolder>标记。

现在Master页面可以作为容纳其他页面的容器。下节将创建Content页面。

2.2.2 创建Content页面

与多数ASP.NET 2.0的操作一样，VWD也免除了输入的麻烦。在Solution Explorer中，右键单击根目录，然后选择Add New Item。通常应该选择Web Form（没有针对Content页面的专门模板）。在对话框的底部是Select master page选项（如图2-2所示）。如果选中此复选框并单击Add，将会引向另一个对话框，询问新建的Content页面使用哪一个Master页面。

图2-2

第二个对话框（如图2-3所示）允许选择使用哪个Master页面。选择Master页面。把Master页面的名称从默认的MasterPage.master改为site.master，然后单击OK。

VWD在Content页面中设置了两个值。它们在Design View中不显示，但是切换到Source View后就会显示出来，如下面代码所示：

<%@ Page Language="C#" MasterPageFile="MyMasterPage.master" %>

<asp:Content ID="Content1"

ContentPlaceHolderID="Content Place Holder ID in Master Page"

Runat="Server">

... content goes here

</asp:Content>

图2-3

在第一行指令中指定要使用的Master页面。第二，VWD包含一个<asp:content>控件，该控件带有一个指定Master页面中占位符ID的属性。一个Master页面可能有很多位置可以插入Content页面。此指示符确定用这个特殊的页面填充哪个占位符。

总的来说，Content页面表现出以下三个特征：

● 没有HTML<!DOCTYPE HTML ... >和XML<html xmlns=...>类型标记；

● 第一行的<%@ page MasterPageFile= ... %>指定ASP.NET 2.0使用哪一个Master页面；

● 有一个<asp:content>标记。

原理并不难，并且由VWD自动完成键入。在下面的样例中会看到Master和Content页面一起工作。

2.2.3 Master和Content页面的样例

本书中的所有练习几乎都可以在Design View中（而不用直接使用代码）完成。但是切换到Source View 中看一下VWD如何构建页面也很有趣。下面的代码清单是某个公司的Master页面（名称为research.master）和名称为“mission statement”的Content页面示例。第一个阴影行指定Master页面，第二个阴影区域是定义内容占位符的控件，在Content页面上开发的内容将插入到内容占位符处：

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head runat="server"> <title>CorporateMaster</title></head>

<body>

Corporation Name

<div>

<asp:contentplaceholder

id="ContentPlaceMissionStatement"

runat="server">

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

以下是本例的Content页面。突出显示部分指定了Master页面和确定放入Master页面中内容的控件。ContentPlaceHolder的ID必须与Master页面中的ContentPlaceHolder的ID相匹配。下面的清单是完整的；在页面顶部没有其他的标记和属性：

<%@ Page Language="C#" MasterPageFile="~/research.master" Title="Untitled Page" %>

<asp:Content ID="Content1"

ContentPlaceHolderID="ContentPlaceHolderMissionStatement"

Runat="Server">

Our Mission Statement is to provide value to the customer.

</asp:Content>

注意Content页面必须有一组非常少的标记。Content页面没有诸如<!DOCTYPE或者<html xmlns="http://www.w3.org/1999/xhtml">这样的页面。Content页面也不包含<head>信息。这些数据由Master页面提供。

2.2.4 在Master页面中使用层叠样式表

Master页面是声明到一个层叠样式表（Cascading Style Sheet，CSS）链接的合适地方。CSS是HTML具有的特性，不是ASP.NET 2.0具有的特性，因此在本书中不深入论述此主题。但是，当涉及到第5章中的主题时再讨论CSS。在附录E中还有HTML和CSS的简要参考。简而言之，CSS包含将应用到页面和控件的各种样式的格式，因此当呈现页面时，页面上的元素、文本的样式、按钮、链接等等，根据CSS中样式定义来显示。这使设计者不用必须包含（和维护）许多经常用于设计的单独的样式格式标记。CSS也能提高页面加载的速度，因为CSS只由浏览器加载一次，随后使用该样式表的页面就可以直接从客户端缓存中重用该样式表。在Master页面中，应该在元素中包含以下类型的链接（用灰色背景突出显示）以把一个页面链接到CSS：

<title>Wrox United</title>

</head>

下面的实验，是创建Wrox United站点的Master页面的机会。您将在本书的每一章中添加一些内容和功能。现在将只创建Master页面的框架。本书稍后将向Master页面中添加许多其他部分，因此如果现在看起来有点不完整，先不要管它！

一、实验创建Master页面并导入CSS

文本框:
图2-4 1．打开本章的样例站点，定位到C:\BegASPNET2\Chapters\Begin\Chapter02。首先从导入作者创建的CSS文件开始。右键单击站点的根目录，然后选择Add Existing Item，如图2-4所示。

2．导航到下载本书文件的文件夹（C:\BegASPNET2\
WroxUnitedCS），选择site.css，然后单击Add。CSS是关于HTML的主题（不属于ASP.NET），但是如果打开该文件，可以看到为HTML的主体（例如，<h1>、<h2>等等）设置的样式。不必修改此文件。现在能够看到显示在Solution Explorer的文件列表中的site.css文件。如果打开了CSS文件，现在关闭它。

3．再一次，右键单击根目录，但这次选择Add New Item，使用Master Page模板。把页面命名为site.master。确保没有选中Select Master Page复选框。（该选项只用于Content页面）。在VWD创建了页面以后，可以在Design View中看到它，虽然此时它是空的。在Source View中可以看到VWD已经添加了几个标记和控件（参见以下代码）。第一个标记指示这将是一个Master页面，第二个标记是普通的文档类型指示。紧接着是用来插入脚本的地方，再往下是XMLNS值。注意观察在<body>中VWD创建了一个contentplaceholder：

<%@ master language="C#" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

<body>

<div>

<asp:contentplaceholder id="mainContent" runat="server" />

<div>

</form>

</body>

</html>

4．如果您想把表格的名称从通用的VWD名称更改为更适合当前情形的名称，切换到Source View并把<form id="form1"runat="server">更改为<form id="MainForm" runat="server">。

5．再切换回Design View以设置样式表。在Properties对话框的顶部，打开控件的下拉列表并选择Document。设置Debug属性为True。在属性列表的底部找到Style Sheet（如图2-5所示），单击它的省略号图标，定位到site.css。单击OK。

图2-5

添加<div>标签分隔页面以使编排页面的格式更容易。此Master页面将在<form>内使用4段<div>。其中的一些还将包含另外的<div>标记（下一级的<div>)。第一段<div>是VWD自动创建的；其余的将需要添加。可以从工具栏上的HTML部分把<div>拖放到页面上，但是在Design View中使它位于合适的位置却很难。需要使用Source View以便把它们放到准确的位置。

6．切换到Source View，并在表格中找到默认的<div>。把从<div>标记的开始到</div>标记的结尾这部分选中，注意Properties窗口现在开始显示<div>的属性。把id属性设置为content。

7．仍旧在Source View中，通过从工具栏上HTML部分把控件拖动到<div id="content">的上面但仍旧在<form>内的位置。把它的id属性设置为header。

8．在表格中再添加两个<div>标记集。把第一个放在标题下面并把ID设置为sidebar，另一个放在页面底部恰好在表格结束标记上面的位置并把id设置为footer。

9．停留在Source View中，现在创建下一级<div>标记，它将位于前面创建的<div>内。在header <div>内，把一个<div>拖放到其中并把它的id设置为logo。logo <div>后面是一些用来显示的简单文本，如下所示：

<h1>Wrox United</h1>

</div>

10．向sidebar <div>内添加文本Navigation，如下面的代码所示：

<h3>Navigation</h3>

</div>

11．在后面的几章将向content <div>内添加控件，但是现在添加一个id值为itemcontent的下一级 <div id=>：

<asp:contentplaceholder id="mainContent" runat="server" />

</div>

</p>

Website designed by

<a href="http://www.frogboxdesign.co.uk" title="croak">Frog Box Design</a>

</p>

</div>

</form>

二、工作原理

您首先只是向站点导入本书的下载文件中包含的作者创建的文件（实际上，我们在设计方面也不在行。我们原先认为红色、粉红色和橙色组合在一起效果会很好，因此我们请Frog Box Design的设计师把设计做得能令大家满意一些）。因为CSS属于HTML方面的主题，这里不讲述样式表的结构（有关细节参见附录E）。

但是更重要的目标是使用VWD创建一个具有三个基本组件的Master页面。通过使用Master页面模板能获得基本的HTML和XML类型标记。VWD也在第一行添加了<%@ master ... %>。最后，VWD提供了一个带有<asp:ContentPlaceHolder>的<div>标记。每个占位符标记都必须具有一个ID，因此要更改ID以使它在上下文中有意义。

接着对Master页面做了一些基本修改以支持在本书的后面将添加的功能。实际上所有这些都是HTML具有的功能，不是ASP.NET 2.0的。首先，使用VWD IntelliSense 添加了一个指向导入的CSS的链接。然后又创建了几个<div>标记，把页面组织为标题、侧栏、内容和页脚部分。

以下实验是对前面练习的补充，实验中将创建Content页面以填充site.master中的占位符。由于“about the site”页面的简单性，使它成为一个好的开始点。

三、实验创建Content页面

1．在VWD中同时打开Wrox United，右键单击站点的根目录。选择Add New Item，然后选择Web Form类型的模板。把它命名为About.aspx，并确保像图2-6那样Select Master Page和Place Code in Separate File 是选中的，即使这里没有代码（如果不设置为把代码放在一个单独的文件中，代码的框架标记将存在于.aspx 文件中。还是与站点的其余部分保持一致比较好，让容器标记和代码放在一个单独的文件中）。

图2-6

2．在第二个对话框中，选择site.master作为Master页面，然后单击OK，如图2-7所示。

3．在Design View中，键入几行像下面一样的文本：

The site was initially written by Dave, while design & graphics were done by Lou.

Conformance is XHTML 1.0 Transitional and CSS 2.1.

4．讲一句题外话，可以体验到VWD帮助完成非ASP标记，例如超级链接。停留在Design View

图2-7

中，在Toolbox的Standard面板上查找Hyperlink control并把它拖动到前面代码中第一句的最后。在属性对话框中把文本设置为Frog Box Design，把NavigationURL属性设置为www.frogboxdesign.
co.uk。VWD将自动处理所有的键入工作以创建链接。

5．在Design View中查看页面，注意到Master页面提供框架，Content页面中只有键入的文本。切换到Source View，注意到About页面指定了它的Master页面，它的内容将放到该Master页面的MainContent占位符处。

四、工作原理

一般创建页面的步骤从在Solution Explorer中选择父文件夹开始。在许多情况下它就是Web站点的根目录C:\BegASPNET2\WroxUnitedcs，但是在有些情况下它可以是低一级的文件夹，例如FanClub.aspx位于文件夹C:\ BegASPNET2\WroxUnited\FanClub中。

观察Content页面使用site.master页面时的三个特点。开始的<%@ Page...>标记必须包含MasterPageFile属性。因为可能需要把文件移动到不同的文件夹结构中，使用代字符（～）指向Master页面的位置，该代字符表示它位于站点的根目录。第二，Content页面的内容包含在名称为asp:Content带有ContentPlaceHolderID的ASP.NET server-side控件内，该控件指向Master页面中用于容纳内容的位置。第三，因为Master页面将带入HTML和XMLNS标记，在所有Content页面中省略了它们。

【查看所有评论(0)条】