演练：创建用户可选择的主题
更新：2007 年 11 月
本演练演示如何创建允许用户选择页面主题的 ASP.NET 页。虽然本示例使用单一的控件外观和基本的级联样式表 (CSS) 文件，但所说明的原则适用于在 CSS 文件中包括图形和不同布局方案的更为复杂的主题以及更为复杂的服务器控件外观。
本演练涉及以下任务：
在 Microsoft Visual Web Developer 中创建一个主题，包括 CSS 文件和服务器控件外观。
创建一个使用主题的 ASP.NET 母版页。
创建一个应用了使用主题的母版页的 ASP.NET 页。
创建一个下拉列表服务器控件，该控件将新主题应用于页面，包括更改母版页元素的样式。
运行某一页，以显示应用于该页的不同主题 。
先决条件
若要完成本演练，您需要：
Visual Web Developer (Visual Studio)。
.NET Framework。
创建网站
如果已经在 Visual Web Developer 中创建一个网站（例如，通过执行演练：在 Visual Web Developer 中创建基本网页中的步骤创建），则可以使用该网站并跳至下一节“创建母版页”。否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在“文件”菜单上单击“新建网站”。
出现“新建网站”对话框。
在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。
在“位置”框中输入要保存网站网页的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。
创建主题
主题是一个属性设置集合，通过这些设置可以定义页面和控件的外观。可以在 Web 应用程序的各页中应用这种一致的外观 。主题由多种元素组成：服务器控件外观、CSS 文件以及其他资源。在本示例中，您将使用外观和样式表创建主题。
主题是在网站项目的特殊目录中定义的。
创建主题
在解决方案资源管理器中，右击网站项目名称，单击“添加 ASP.NET 文件夹”，再单击“主题”。
将自动创建 App_Themes 文件夹并添加一个名为 Theme1 的新主题文件夹。
右击该新的 Theme1 文件夹，再单击“重命名”。键入“Blue”，再按 Enter。
右击该新的“Blue”文件夹，再单击“添加新项”。
在“添加新项”对话框中选择“外观文件”，再将该文件命名为 default.skin。单击“添加”。
在解决方案资源管理器中，再次右击该新的“Blue”文件夹，然后单击“添加新项”。
在“添加新项”对话框中选择“样式表”。将样式表命名为 default.css。单击“添加”。
于是，创建了第一个主题，该主题带有一个空的 CSS 文件和一个空的服务器控件外观文件 。您随后将对这两个文件进行编辑，但编辑之前先要创建一个包含控件和某个 HTML 的页面，以便可以将主题应用于该页面 。
创建母版页
为了演示主题可被轻松应用于母版页和使用该母版页的页面，将创建一个用于 Web 项目中的 Default.aspx 页的简单母版页 。
创建母版页
在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。
在“Visual Studio 已安装的模板”之下单击“母版页”。
在“名称”框中键入 Master1.master。
在“语言”列表中，单击您想使用的编程语言。
清除“将代码放在单独的文件中”复选框，再单击“添加”。
即会在源视图中打开新的母版页。在页面的顶部是一个 @ Master 声明，而不是通常在 ASP.NET 页顶部看到的 @ Page 声明。页面正文包含一个 asp:contentplaceholder 控件，它定义了母版页中的一个区域，其中的可替换内容将在运行时从内容页合并。在本演练的稍后部分将更多地使用内容占位符。
对母版页进行布局
母版页定义了页面的组成元素。它可以包含静态文本和控件的任何组合。母版页还可以包含一个或多个内容占位符，这些占位符指定显示页面时动态内容出现的位置。
在本演练中，将使用一个表作为 Home.aspx 页的布局，该表包含一个标题、多个水平标尺以及一个母版页内容占位符。
为母版页创建表
在源视图中选择 Master1.master 文件，再选择位于两个 form 元素之间的文本，并将下面的内容粘贴到选定区域中。请注意，由于此代码位于默认的母版布局中，因此它会将内容占位符置于表内，而不是 div 元素之间。
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>现在母版页已拥有一个布局，可将该布局应用于将在下一节中创建的内容页（名为 Home.aspx）。
创建内容页
母版页提供内容的模板。通过创建与母版页关联的 ASP.NET 页来定义母版页的内容。内容页是一个专用的 ASP.NET 页，它仅包含要与母版页合并的内容。在内容页中，添加用户请求该页面时要显示的文本和控件。
内容页将使用已创建的母版页以及尚未完成的主题。该页将使用母版页的内容占位符，并将包含一个标题、副标题和下拉列表。由于内容页将使用母版页，因此它必须在 @ Page 指令中包含 MasterPageFile 属性，并包含内容占位符。
创建内容页
在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。
在“Visual Studio 已安装的模板”之下单击“Web 窗体”。
在“名称”框中键入“主页”。
在“语言”列表中，单击您想使用的编程语言。
选择“选择母版页”复选框，再单击“添加”。
“选择母版页”对话框出现。
单击“Master1.master”，然后单击“确定”。
将创建一个名为 Home.aspx 的新文件。该页面包含一个 @ Page 指令，此指令将当前页附加到带有 MasterPageFile 属性的选定母版页，如下面的示例所示。
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>此页面还包含一个 <asp:Content> 元素，稍后将使用此元素。
向内容页添加内容
内容页不具有常见的组成 ASP.NET 页的元素，如 html、body 或 form 元素。相反，通过替换在母版页中创建的占位符区域，仅添加要在母版页上显示的内容。对于本示例，可以添加标题 1 元素、标题 2 元素、段落元素和下拉列表。将使用下拉列表选择要应用于该页的主题。
向主页添加内容
在 asp:Content 开始标记与结束标记之间粘贴以下代码。下面的示例将创建三个 HTML 元素：标题 1、标题 2 和一个段落。它还会添加一个下拉列表控件。请注意，如果您愿意，也可以在设计视图中向该页添加该控件。
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" runat="server" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>添加一个脚本部分，在从下拉列表中选择主题时，该脚本部分将运行用于加载该主题的代码。应将下面的示例和 script 标记添加到内容页中 @ Page 指令之后的行上。
<script runat="server"> Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script runat="server"> public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>在页面生命周期的 PreInit 事件过程中，将加载该主题。页请求窗体包含一个值数组，其中索引为 4 的值是从下拉列表中选定的值。将此值赋予该页的主题，当加载该页时，将应用新主题。
本演练的下一步是创建多个主题，可用于演示要应用的不同主题。
编辑 Blue 主题
Blue 主题包含一个空样式表和一个空外观。由于已知默认页及其所用母版页的组成元素，因此现在可以编辑这些主题文件以向页面元素添加颜色。
编辑 Blue 主题
在源视图中，从 Blue 主题文件夹中打开 Default.skin 文件。
将下面的代码添加到下拉列表中，以便在选择 Blue 主题时指定页面颜色。
<asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />在源视图中，从 Blue 文件夹中打开 Default.css 文件。首先，添加下面的代码，以从母版页中设置表标题的格式。
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }其次，使用下面的代码向该表添加一种背景色。
table.header { background-color: Blue; }再次，设置内容页中标题 1 和标题 2 元素的样式。
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }最后，设置水平标尺和段落元素的样式。
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
将主题连接到页面
在查看应用于 Home.aspx 页的主题之前，需要先向 @ Page 指令添加一个指示该页使用主题的属性。
将页面连接到主题
在源视图中打开 Home.aspx。
将 StylesheetTheme 属性添加到 @ Page 指令中并将其设置为等于 Blue 主题。该页指令应类似于下面的示例。
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
测试页面
正如任何 ASP.NET 页一样，您可以通过运行该页来对其进行测试。
测试页面
在查看 Home.aspx 页时，请按 Ctrl+F5 运行该页。
ASP.NET 会将 Home.aspx 页的内容与 Master1.master 页的布局合并到单个页中，随后会应用 Blue 主题并通过浏览器显示结果页。请注意，Blue 主题已应用于 HTML 元素、下拉列表以及在主文件中定义的标题和背景。
创建其他主题
尽管 Blue 主题运行良好，但本演练的目的是为页用户提供多个主题选项。可以将外观和样式表文件复制到新的主题目录中，然后编辑在主题中使用的颜色以反映新的主题颜色。下面的过程将创建两个新主题，分别名为 Red 和 Green。
创建其他主题
在解决方案资源管理器中，右击“App_Themes”文件夹，再单击“添加 ASP.NET 文件夹”，然后单击“主题”。在文件夹标题“Theme1”处于选定状态的情况下，键入“Red”，再按 Enter。
打开“Blue”文件夹，再选择 Default.skin 和 Default.css 文件。右击这两个选定的文件，再单击“复制”。
右击“Red”文件夹，再单击“粘贴”。
重复步骤 1，但将新主题文件夹命名为“Green”。接下来，右击“Green”文件夹并单击“粘贴”，以将 Default.skin 和 Default.css 文件的副本置于“Green”文件夹中。
编辑外观文件中的颜色属性，以反映主题颜色。例如，Red 主题中的外观文件应类似于下面的示例。
<asp:dropdownlist runat="server" ForeColor="white" BackColor="Red" />编辑每个主题的样式表，以反映主题的名称。请注意，您将需要对各个 HTML 元素以及文本使用多种色度的绿色才能使其在背景中显示出来。Green 主题的样式表可能类似于下面的示例。
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
测试主题选择
现在，可以使用下拉列表在三个页面主题之间进行选择。
选择不同的主题
切换到 Home.aspx 页，然后按 Ctrl+F5。
从下拉列表中选择“Green”或“Red”。
请注意，将样式表应用于页面的 HTML 元素，而将外观应用于该下拉列表控件。
后续步骤
有关使用母版页的更多信息，请参见演练：在 Visual Web Developer 中创建和使用 ASP.NET 母版页。