在 ASP.NET 2.0 中创建 Web 应用程序主题(一)

翻译|其它|编辑：郝浩|2006-05-10 16:35:00.000|阅读 1581 次

概述：

适用范围：
Microsoft ASP.NET 2.0
Microsoft Visual Studio 2005

摘要：Stephen Walther 将论述主题（ASP.NET 2.0 的一项新增功能）的细节，其中包括如何在主题中同时使用级联样式表和图像，以及如何在运行时动态加载主题。（本文包含一些指向英文站点的链接。）

引言

主题是 Microsoft ASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观，如背景颜色和前景颜色。使用主题功能可以轻松建立并维护整个网站外观的一致性。

主题与级联样式表并不相同。使用级联样式表可以控制浏览器上的 HTML 标记的外观。而主题则应用在服务器上，并适用于 ASP.NET 控件的属性。例如，您可以使用主题来指定 GridView 控件是否显示页眉或页脚，但不能使用级联样式表来执行此操作。

主题与母版页也并不相同。母版页也是 ASP.NET 2.0 的一项新增功能，使用此功能可以为 Web 应用程序中的多个内容页指定共同的布局。使用主题可以控制页面中各个控件的外观，而母版页则不能。（在设计 Web 应用程序时，您可以并且可能将同时使用母版页和主题。）

在本文中，您要学习如何在 ASP.NET 2.0 应用程序中利用主题功能。您会学习到如何在主题中同时使用级联样式表和图像。此外，我们还将学习如何在运行时动态加载主题。

创建和应用简单主题

ASP.NET 2.0 不附带任何默认主题。当 ASP.NET 2.0 发布之后，您可以从网站（例如 www.ASP.net）上下载并使用主题。但是，现在，您必须从头开始创建自己要使用的所有主题。

此外，系统会警告您 Microsoft Visual Web Developer 不提供任何用于创建主题的工具支持。尽管您确实可以使用 Visual Web Developer 来创建主题并将主题应用于网页；但在 Web 浏览器中实际打开页面前，您看不到将主题应用于页面的效果。换句话说，Visual Web Developer 不提供任何用于创建主题的设计器支持。

了解这些警告后，我们继续创建简单主题。创建主题所需的第一步是在应用程序的根目录中创建一个名为 Themes 的新文件夹。（当 ASP.NET 2.0 的 BETA 2 版本发布后，您就需要将此文件夹命名为 Application_Themes 了。）当您尝试应用主题时，ASP.NET Framework 将自动查找此文件夹。

创建了 Themes 文件夹之后，您可以通过向该 Themes 文件夹中添加子文件夹来创建一个或多个主题。我们将创建的第一个主题名为 OrangeTheme。因此，我们需要在 Themes 文件夹中添加一个名为 OrangeTheme 的新文件。

然后，我们需要将 Skin 文件添加到 OrangeTheme 文件夹中。Skin 文件是实际包含主题所应用的格式设置的文件。换句话说，该文件包含主题所应用的一个或多个控件外观。您可以将 Skin 文件命名为任何名称，只要以扩展名 .Skin 结尾即可。

一个主题可以包含一个 Skin 文件，也可以包含数百个 Skin 文件。您可以根据需要将 Skin 文件命名为任何名称。这没有关系，因为在将主题应用于页面时，ASP.NET Framework 将把所有 Skin 文件合并在一起，而将这些文件视为单个 Skin 文件。

通过使用 Theme 或 @ Page 指令的 StyleSheetTheme 属性，或者通过在应用程序配置文件中设置 pages 元素（ASP.NET 设置架构）元素，都可以应用主题。Visual Web Developer 只以可视方式显示使用 StyleSheetTheme 属性应用的主题。

创建页主题

在解决方案资源管理器中，右击要为其创建页主题的网站名称，然后单击“添加 ASP.NET 文件夹”。
单击“主题”。

如果 App_Themes 文件夹不存在，Visual Web Developer 则会创建该文件夹。Visual Web Developer 即为主题创建一个新文件夹，作为 App_Themes 文件夹的子文件夹。
键入新文件夹的名称。

此文件夹的名称也是页主题的名称。例如，如果您创建一个名为 \App_Themes\FirstTheme 的文件夹，则主题的名称为 FirstTheme。
将构成主题的控件外观、样式表和图像的文件添加到新文件夹中。

我们将在主题 OrangeTheme 中使用列表 1 中的 Skin 文件（名为 FormControls.Skin）：

列表 1：FormControls.Skin

<asp:TextBox 
   BackColor="Orange" 
   ForeColor="DarkGreen" 
   Runat="Server" />

<asp:Button 
   BackColor="Orange" 
   ForeColor="DarkGreen"
   Font-Bold="True"
   Runat="Server" />

您应当注意到了，列表 1 中的 Skin 文件包含 TextBox 和 Button 控件的声明。分别为这两个控件的 BackColor 和 ForeColor 属性提供了值。此外，还声明 Button 控件使用加粗字体。

请注意，您可以通过声明一个控件实例并设置一个或多个控件属性，从而使用 Skin 文件指定控件的外观。您可以在 Skin 文件中设置的控件属性是有限的。通常，仅可以设置外观属性。例如，您可以设置 TextBox 控件的 BackColor、ForeColor 甚至 Text 属性。但是不能在 Skin 文件中设置 TextBox 控件的 AutoPostBack 属性。

此外，您不能将外观用于每个 ASP.NET 控件。例如，您不能将外观用于 Repeater 控件、Literal 控件或 LoginView 控件，也不能将外观用于 User 控件（但是，可以将外观应用于 User 控件中所包含的控件）。

将 FormControls 外观应用于页面之后，页面中的每个 TextBox 和 Button 控件都将使用在 Skin 文件中指定的属性值来显示。即便已经为该页面中的 TextBox 控件的 BackColor 属性指定了值，也是如此。Skin 文件将替代页面中的控件属性。

列表 2 中的页面应用了主题 OrangeTheme：

列表 2：OrangePage.aspx

<%@ Page Theme="OrangeTheme" %>
<html>
<head runat="server">
    <title>Orange Page</title>
</head>
<body>
    <form id="form1" runat="server">

    Enter your name:
    <br />
    <asp:TextBox
        ID="txtName" 
        Runat="Server" />

    <br /><br />

    <asp:Button
        ID="btnSubmit" 
        Text="Submit Name" 
        Runat="Server" />
    
    </form>
</body>
</html>

列表 2 中的页面包含用于询问用户名的窗体。除了在页面顶部添加了主题指令之外，此页面没有任何特殊的地方。该主题指令用于将 OrangeTheme 主题应用于页面。

当您在 Web 浏览器中打开列表 2 中的页面时，TextBox 和 Button 控件将使用在 Skin 文件中声明的格式设置来显示（请参见图 1）。

图 1：将简单主题应用于 ASP.NET 页面

Skin 文件可以包含比列表 1 中所包含的格式设置更复杂的格式设置。例如，列表 3 中的 GridView.Skin 文件包含了用作 GridView 控件的格式设置的脚本和模板。（在 ASP.NET 2.0 Framework 中，GridView 控件替换了 DataGrid 控件。）

列表 3：GridView.Skin (C#)

<script language="C#" runat="Server">

  string DisplayInStock(object inStock)
  {
    if ( (Int16)inStock > 0 )
        return "In Stock";
    else
        return "Out of Stock";
  }

</script>

<asp:GridView 
    AutoGenerateColumns="false"
    ShowHeader="false"
    CellPadding="5"
    Font-Name="Arial"
    Runat="Server">
    <AlternatingRowStyle BackColor="LightBlue" />
    <Columns>
          <asp:TemplateField>
            <ItemTemplate>
            <%# Eval("ProductName") %>
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField 
            DataField="UnitPrice" 
            DataFormatString="{0:c}" />
          <asp:TemplateField>
            <ItemTemplate>
            <%# DisplayInStock(Eval("UnitsInStock")) %>
            </ItemTemplate>
          </asp:TemplateField>
    </Columns>
</asp:GridView>

列表 3：GridView.Skin (Visual Basic .NET)

<script language="VB" runat="Server">

  Function DisplayInStock(inStock As Object) As String
    If CType(inStock, Int16) > 0 Then
        Return "In Stock"
    Else
        Return "Out of Stock"
   End If
  End Function

</script>

<asp:GridView 
    AutoGenerateColumns="false"
    ShowHeader="false"
    CellPadding="5"
    Font-Name="Arial"
    Runat="Server">
    <AlternatingRowStyle BackColor="LightBlue" />
    <Columns>
          <asp:TemplateField>
            <ItemTemplate>
            <%# Eval("ProductName") %>
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField 
            DataField="UnitPrice" 
            DataFormatString="{0:c}" />
          <asp:TemplateField>
            <ItemTemplate>
            <%# DisplayInStock(Eval("UnitsInStock")) %>
            </ItemTemplate>
          </asp:TemplateField>
    </Columns>
</asp:GridView>

列表 3 中的 Skin 文件包含一个 GridView 控件，该控件具有三列（请参见图 2）。第一列是一个 TemplateField 列，用于显示 ProductName 字段的值。第二列是一个 BoundField 列，用于显示 UnitPrice 字段（请注意，此列使用 DataFormatString 属性将价格形式设置为货币）。最后，第三列是另一个 TemplateField 列。此列将从 Skin 文件所包含的脚本中调用 DisplayUnitsInStock 方法，以显示文本“In Stock”或“Out of Stock”。

图 2：复杂的 GridView 外观

您可以将 GridView.Skin 外观用于列表 4 中的页面（假如您已将该外观添加到了 OrangeTheme 文件夹中）。

列表 4：SkinnedGridView.aspx

<%@ Page Theme="OrangeTheme" %>
<html>
<head runat="server">
    <title>Skinned GridView</title>
</head>
<body>
    <form id="form1" runat="server">

    <asp:GridView
        ID="GridView1"
        DataSourceID="ProductSource"
        Runat="Server" />
    
    <asp:SqlDataSource
        ID="ProductSource"
        ConnectionString="Server=localhost;Trusted_Connection=true;Database=Northwind"
        SelectCommand="Select ProductName,UnitPrice,UnitsInStock FROM Products"
        Runat="Server" />
        
    </form>
</body>
</html>

列表 4 中的页面显示了 Products 数据库表中的内容。该页面包含一个绑定到 SqlDataSource 控件的 GridView 控件。SqlDataSource 控件用于连接到 Northwind 数据库表，以检索该数据库中的数据。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：在 ASP.NET 2.0 中创建 Web 应用程序主题(二) 下一篇：Asp.net:DataTable控件的使用