ASP.NET 主题理解与实现入门指南

• 下载演示 - 11.3 KB

引言

本文讨论ASP.NET主题。在我们的应用程序中，何时需要主题？如何实现主题并允许用户更改主题？

背景

Web应用程序主要有两个方面：功能性和可用性。功能性是Web应用程序为用户提供的核心功能集。可用性是指用户使用该网站的便捷程度。

还有另一个方面是大多数Web开发人员容易忽略的。开发人员通常全身心地投入到Web应用程序的功能性和可用性实现中，却忘记了网站的外观，即网站的“外观和感觉”。

网站外观也是一个重要方面。外观又可以分为两个方面。一是用户应该能够拥有个性化的网站。二是，如果网站服务于多种用户类型，那么外观应根据用户进行更改。

为了实现这两个方面，ASP.NET提供了：

• ASP.NET 主题：这允许开发人员为应用程序创建单独的预定义主题。可以用来为不同类别的用户提供不同的外观，也可以让用户从预定义的主题中选择一个主题。
• 使用用户配置文件进行个性化：通过这种方式，用户可以指定他们自己的外观偏好。这也用于记住回访用户。

本文将讨论ASP.NET主题。个性化和用户配置文件需要单独讨论，也许我会写另一篇文章来介绍。

使用代码

通常，Web应用程序包含各种页面。每个页面可以有很多服务器控件。ASP.NET主题的基本思想是，网站的开发方式是，在一处进行更改将导致所有页面和所有控件的外观都发生变化。

如何指定控件的外观？

我们可以通过两种方式指定网页和控件的外观。

1. 使用控件的标记 - 在这里，ASP.NET服务器控件包含外观相关的属性。
2. 级联样式表 (CSS) - 使用CSS来控制渲染HTML页面的外观。

除了这些，我们还会在网页上添加图形。通常，这些图形将以图像的形式在网页中使用。

现在，假设我们使用以上所有方法来获得所需的网页外观。如果我们希望用户能够更改外观，是否必须在整个代码库中动态地更改所有这些东西？有没有更好的方法？

ASP.NET 主题来帮忙！

为了方便动态更改外观，ASP.NET 使用了主题。主题的基本思想是将与外观相关的逻辑从网页中分离出来。我们将所有页面和控件与外观相关的代码放在一个地方，并称之为主题。

现在，如果我们有多个外观集，我们可以拥有多个主题。所有主题将为我们网站的控件和页面指定不同的外观。要更改网站的外观，我们只需要更改主题，更改将自动影响整个网站。

我们可以在网站中创建一个APP_Themes文件夹来包含主题。每个主题文件夹可以包含三种类型的内容。

1. Skins - 这些将用于配置用户在服务器控件中指定的外观。
2. CSS 文件 - 这些将用于配置需要CSS样式的外观属性。
3. 图像和其他资源 - 每个主题都可以有单独的资源集，以便在更改主题时页面的图形也能随之改变。

实现主题

现在，让我们在一个小型示例应用程序中尝试实现主题。我们将创建一个单页网站，其中包含公司Logo、网站标题和页面上的静态文本。

我们将为此网站创建两个主题：一个Light主题和一个Dark主题。Logo图像将在Skin文件中指定。标题的外观也将来自Skin文件。网页背景和前景文本外观将在CSS文件中指定。

因此，根据以上所有要求，我们将需要2个主题：“Light”和“Dark”。这些主题将包含Skin文件，用于指定Logo图像和标题的外观。每个主题将包含一个CSS文件，其中包含背景颜色和前景文本颜色。最后，每个主题将拥有主题专用的Logo图像。

让我们看看每个主题的skin文件。

<%--Skin file of Dark Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px"/>
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="White"></asp:Label>

<%--Skin file of Light Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px" />
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="Black"></asp:Label>

让我们看看每个主题中的CSS文件。

/*CSS file of Dark Theme*/
table
{
	background-color:Black;
	color: White;
}
td
{
	border:Solid 1px White;
	border-collapse:collapse;	
}

/*CSS file of Light Theme*/
table
{
	background-color:Silver;
	color: Black;
}
td
{
	border:Solid 1px Black;
	border-collapse:collapse;	
}

应用主题

主题可以通过多种方式应用。让我们先看看非编程方式应用主题。这种方式在我们想向特定类别的用户显示特定主题时会很有用。

1. 在@Page的Theme属性中指定主题 - 这只会影响当前页面。
2. 在web.config中的<pages Theme="">中应用主题 - 这将应用于网站的所有页面。
3. 在@Page的StyleSheetTheme属性中指定主题 - 这只会影响当前页面。
4. 在web.config中的<pages StyleSheetTheme="">中应用主题 - 这将应用于网站的所有页面。

如果多个地方指定了主题，第一个将优先于第二个（按照上面提到的顺序）。

现在，让我们在web.config中指定默认主题为：

<pages theme="Light"></pages>

现在，当我们运行应用程序时，我们将看到默认主题为“Light”主题。

以编程方式更改主题

如果我们希望用户能够选择更改主题，那么我们需要通过代码来更改主题。为此，我们需要提供一些方法让用户更改主题。然后，一旦收到主题更改请求，我们就需要在页面的Pre_Init中更改Page.Theme属性。

让我们提供一个dropdown供用户切换主题。页面的后端代码将如下所示：

protected void Page_PreInit(object sender, EventArgs e)
{
    string theme = Session["theme"] as string;
    if (theme != null)
    {
        Page.Theme = theme;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack == false)
    {
        DropDownList1.SelectedValue = Page.Theme;
    }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["theme"]= DropDownList1.SelectedValue;
}

注意：这里我将下拉列表的autopostback属性设置为true，并使用Session变量来存储新选择的主题。还有其他更优雅的方法可以做到这一点。我写这种方式只是为了保持简单并说明Pre_init方法是唯一可以更改主题的地方。

现在让我们将主题更改为Dark并查看结果。

关注点

如今，大多数网站使用CSS来控制网站的外观。但理解和了解主题仍有其好处。我可以有多个CSS文件，仍然使用主题来控制网站的外观。外观的另一个方面是使用User Profiles进行个性化。也许我会为此创建一个单独的文章。本文是从绝对初学者的角度撰写的。希望本文内容有所启发。  

历史

• 2012年7月9日：初版。