ASP.NET2.0中Web应用程序样式切换(App_Themes)

 

 

 

主题是Microsoft ASP.NET 2.0 提供给开发人员的一项新增功能。   

 

    在 Asp.NET 2.0 出现以前， 给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。 

        现在这些担忧，都在 Asp.NET 2.0 中得到了完善的解决。首先，您可以通过简单的代码编写实现复杂的功能；其次，Asp.NET 2.0 在处理主题的问题时提供了清晰的目录结构，使得资源文件的层级关系非常清晰，在易于查找和管理的同时，提供的良好的扩展性。 

 

       下面就让我们通过一个Demo感受一下Asp.NET 2.0 的新特性。 

 

       1. 建立主题文件夹： 

 

       在应用程序的根目录上单击右键，点选 Add Folder 下的 Theme Folder 选项后，会在根目录下出现名为 App_Themes 的空文件夹，所有的与主题有关的资源文件都会存储在这个文件夹下。 

 

       在本例中，选择以颜色不同的方式来区分主题，需要在主题文件夹（App_Themes）下建立两个以颜色为名称的文件夹。 

 

       操作方式：在 App_Themes 文件夹上单击右键，将鼠标移动到 Add Folder 选项上，发现在主题文件夹（App_Themes）新增文件夹的类型只有一种 Theme Folder： 

 

  建立两个主题文件夹，分别命名为 BlueTheme 和 PorpleTheme。

 

将主题 BlueTheme 应用于页面： 

 

  <%@ Page Language="C#" StylesheetTheme="BlueTheme" %>  

 

      Skin 文件是实际包含主题所应用的格式设置的文件。一个主题可以包含一个或多个 Skin 文件。这没有关系，因为在将主题应用于页面时，ASP.NET Framework 将把某个主题下的多个 Skin 文件合在一起，而将这些文件视为一个 Skin 文件。 

 

       您可以根据需要将 Skin 文件命名为任何名称，在文件中可以通过声明某个控件的实例设置一个或多个此控件中的属性，从而使用 Skin 文件指定控件的外观。（注：并不是所有属性都可以设置，能设置的多为外观属性）。 

 

       本例中先在主题 BlueTheme 中建立新文件 Control.skin，在文件中对三个控件的某些属性进行了设置。

 

 

  

 

 

 

 

此时页面页面代码为:

 

 

 

 

 

   

 

     

 

       

 

     

 

     

 

       

 

       

 

     

 

     

 

       

 

       

 

     

 

     

 

       

 

       

 

     

 

     

 

       

 

     

 

     

 

       

 

     

 

   

 

 

 

 

 

 

 

此时页面效果为:

 

 

 

   4. 使用 CSS 文件做更细致的设置： 

 

       对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的. 

 

 

 

       本例中在主题 BlueTheme 中建立了新文件 Default.css, 在此文件中对页面中的 body,table,td 元素进行了设置. 

 

body 

{ margin:0; padding:0; overflow:hidden; } 

 

.tableStyle 

{ font-family:"宋体"; font-size:12px;color:#000000;

line-height:120%; background-image:url(image/bg.jpg); } 

 

.tdStyle

{ background-image:url(image/Bar_out.gif); }

 

 

再更改部分页面代码调用 CSS 样式后, 效果如下

 

 

 

5. 主题的动态切换： 

 

       在前台页面 Default.aspx 中添加一个下拉框,用来进行主题的选择. 

 

 

 

   

   
   您可以在此处选择页面主题： 

     

      请选择颜色 

      蓝色 

      紫色 

     

   


 

   

 

 

在后台页面 Default.aspx.cs 中添加代码用来在每次刷新页面时替换新选的主题.

 

 

protected void Page_PreInit(object sender, System.EventArgs e) 

{ 

    Page.Theme = Request["ChooseTheme"]; 

}  

 

点选下拉框中的选项,主题便会在页面刷新后改变,如:把蓝色主题切换为紫色主题，效果如下：

 

 

 

    以上，便是 ASP.NET 2.0 中新增的主题功能，利用此项功能，我们不仅可以快速的将各式各样的外观应用于整个 Web 应用程序。还可以更加轻松的完成网站的扩充和维护工作。

 

 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zzdzzd1029/archive/2007/02/07/1504018.aspx

 

 

 

 

 

 

 

 

 

 

 

ASP.NET2.0中轻松实现网站换肤（App_Themes的使用）

2009年03月20日 星期五 上午 11:03

1.简介    新建App_Themes文件夹：     项目 - 右键 - 添加 - 添加ASp.net文件夹 - 主题 利用Themes我们可以很容易的更改控件、页面的风格，而不需要修改我们的代码和页面文件。Themes文件被单独的放在1个App_Themes文件夹下面，与你的程序是完全分开的。 　　二、怎么使用Themes和Skins： 　　先看个非常简单的实例： App_Themes\default\1.skin文件代码: ＜asp:Label Font-Bold="true" ForeColor="Red" runat="server" /＞ 　　default.aspx:文件代码： ＜%@ Page Language="C#" Theme="default" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://w3.org/1999/xhtml"＞ ＜head id="Head1" runat="server"＞ ＜title＞Page with Example Theme Applied＜/title＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞ ＜asp:Label ID="Label2" runat="server" Text="Hello 2" /＞＜br /＞ ＜/form＞ ＜/body＞ ＜/html＞ 　　可以看到我们在default.aspx并没有写如何的控制style的代码，但运行取发现label上的字都变成了粗体红色了，这就是1个最基本的theme例子。 　　App_Themes文件夹： 　　App_Themes文件夹位于程序的根目录下，App_Themes下必须是Theme名称的子文件夹，子文件夹中可以包含多个.skin和.css文件。下图中建立2个Theme，名称分别为default和default2： ＜img src="http://cndw.com/ShowImg.asp?p=/2006-4-26/794853ms136_1.jpg"＞ 　　使用themes 　　1、在1个页面中应用Theme: 　　如果想在某1个页面中应用Theme，直接在aspx文件中修改＜%@ Page Theme="..." %＞，比如你想这个页面应用default2 theme，设置＜%@ Page Theme="default2" %＞就OK 　　2、在所有页面应用同1个Theme: 　　如果要在所有页面上使用相同的Theme，在web.config中的＜system.web＞节点下加上句＜pages theme="..."/＞ 　　3、让控件不应用Theme: 　　第1个例子中我们看到了2个Label的风格都变了,就是说.skin文件中的风格在页面上所有Label都起作用了。但有时我们希望某1个Label不应用.skin中的风格，这时你只需设置Label的EnableTheming属性为false的时候就可以了。 　　也许你还想不同的label显示不同的风格，你只需设置label的SkinID属性就可以，见下面的实例： App_Themes\default\1.skin ＜asp:label runat="server" font-bold="true" forecolor="Red" /＞ ＜asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" /＞ deafult.aspx ＜%@ Page Language="C#" Theme="default" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://w3.org/1999/xhtml"＞ ＜head id="Head1" runat="server"＞ ＜title＞Page with Example Theme Applied＜/title＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /＞＜br /＞ ＜asp:Label ID="Label3" runat="server" Text="Hello 3" /＞＜br /＞ ＜/form＞ ＜/body＞ ＜/html＞ 　　运行后就会发现2个label显示的风格不一样了。 　　4、其他方法： 　　前面已经说了在aspx文件头使用 ＜%@ Page Theme="..." %＞ 来使用theme，而用这个方法应用theme中的风格将会覆盖你写在aspx中的控件属性style。比如： 　　App_Themes\default\1.skin ＜asp:Label Font-Bold="true" ForeColor="Red" runat="server" /＞ 　　default.aspx ＜%@ Page Language="C#" Theme="default" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://w3.org/1999/xhtml"＞ ＜head id="Head1" runat="server"＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞ ＜asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /＞ ＜/form＞ ＜/body＞ ＜/html＞ 　　运行结果，所有的label的forecolor都为red。 　　而使用＜%@ Page StyleSheetTheme="..." %＞应用theme就不会覆盖你在aspx文件中写的属性style： 　　控件应用style属性的顺序如下： 　　a、StyleSheetTheme引用的风格 　　b、代码设定的控件属性(覆盖StyleSheetTheme) 　　c、Theme引用的风格(覆盖前面2个) 　　theme中包含CSS： 　　theme中也可以使用.css文件,当你把.css文件放在1个theme目录下后,在用到了这个theme的页面中自动会应用你的.css的 　三、后台代码轻松为网站换府肤 　　前面讲的都是在aspx文件或web.config中应用theme，而在blog这样的每个用户都有不同的skin的网站中用上面的方法来实现换skin显然是不方便的。 　　下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况，theme必须在page被请求的最早期就应用上，所以我们必须在Page_PreInit事件中写代码，代码很简单，就1句： Page.Theme = "..."; 　　这里我们只要从数据库中去读取每个用户设置的不同theme名就可以轻松实现每个用户都有不同的skin了。