ASP.NET使用主题完成换肤

ASP.NET中的主题（Theme）与母版页比较类似，都可以统一网站多个网页的外观界面，但细细分析，还是有区别的。

主题与母版页的区别：

1、母版页是一个文件，扩展名为.master；主题是一个目录，而且是ASP.NET中的系统目录，目录名为App_Themes，在该目录下有CSS文件、外观文件（.skin）等；

2、母版页属于DIV + CSS概念，定义的是静态的网页外观；主题是动态概念，主要用来定义控件的外观（即.skin外观文件完成的功能），它是多个外观文件的集合

网页的换肤功能一般由主题（Theme）完成。

创建主题的办法：

1、如果网站根目录没有App_Themes文件夹，可以在解决方案管理器中右击网站项目名，单击“添加ASP.NET文件夹”，单击“主题”，App_Themes文件夹创建成功；

2、在App_Themes文件夹上右击，单击“添加ASP.NET文件夹”，单击“主题”，创建了一个新的主题，可以对这个主题给一个有意义的名字，如“greenSkin”

3、在“greenSkin”上右击，单击“添加新项”，可以选择新建外观文件（.skin）或者样式表文件（.css）。注意外观文件要起名为和控件相同的名字，如Button.skin，Label.skin，RadioButton.skin，则起作用的网页内相应控件可以直接应用，CSS文件名字任意，只要有，会自然引用。

对整个网站设置默认主题：

需要修改web.config文件。在system.web元素内加入pages元素并作如下设置：

<configuration>

   <system.web>

     <pages theme="greenleaf" />

   </system.web>

</configuration>

需要说明的是，如果web.config文件中原来已经存在pages元素，直接把属性theme="greenleaf"加入到元素起始标签即可，不要再添加元素终止符“/”，因为后边应该有</pages>

用户在运行中的网页进行换肤：

这是网站换肤最重要的一环。换肤是用户个性化定制的一个方面，需要记住不同用户的所选定的主题。完成这个工作一般使用两种办法完成。一是使用cookies的办法，存在用户本地硬盘内，用户一进入网站，就从cookies调用数据，使用相应的外观，如360安全网址即使用这种办法；另外一种是使用Profile的办法，即将用户的选择存入到数据表内（aspnet_Profile表），这种办法对已经登录的用户有效，用户无论在任何一台联网的电脑上登录网站，都可以看到自己选择的外观，下例使用第二种办法进行说明。

1、修改web.config文件，在system.web元素内添加如下代码，使profile可以使用theme属性设置并存储用户选择

<profile enabled="true">
       <properties>
       <add name="theme"/>
       </properties>
       </profile>

2、在需要换肤的页面（如Index.aspx）的代码文件中，对页面的PreInit事件编写代码，使换肤起作用，代码如下：

protected void Page_PreInit(object sender, EventArgs e)
        {
              if (!Profile.IsAnonymous)
              {
                  Page.Theme = Profile.theme;
              }
        }

3、给用户以换肤选择的操作。可以使用DropDownList控件、RadioButton控件（像360安全网址一样），也可以使用Button控件。为使代码简单明了，本例使用Button控件。在Index.aspx页面创建两个Button控件，代码如下(注意两个按钮的click事件使用的是同一个处理代码，即Set_Theme)：

<asp:Button ID="btnGreen" runat="server" onclick="Set_Theme"Text="绿色叶子" />
       <asp:Button ID="btnBlue" runat="server" onclick="Set_Theme"Text="蓝天白云" />

4、在Index.aspx.cs代码文件中，对Set_Theme处理程序编写如下代码：

protected void Set_Theme(object sender, EventArgs e)
       {
            Button btn = (Button)sender;
            if (btn.Text == "绿色叶子")
           {
             Profile.theme = "greenleaf";
           }
           else
          {
           Profile.theme = "bluesky";
          }
            Response.Redirect("Index.aspx"); //强行对本页面刷新
       }

注意在App_Themes中必须有“greenSkin”和“blueSkin”两个主题。

首先使用用户名登录，再运行Index.html页面，尝试单击“绿色”、“蓝色”按钮，检查是否达到自己设定的主题效果。注销用户，再次以同样用户名登录，测试上次设定的外观是否起作用。

注意：以上办法只能对一个页面的外观进行设置，不能对网站所有外观进行设置。

解决办法：

1、将所有内容都做到一个页面上，小页面做为tab，类似360安全网址导航

2、对每个页面都做类似的上例的处理，即使大网站，可能也只有几个十几个页面，一一设置并不麻烦；

3、只设置主页页面，其它不设置，目前许多网站就是这样做的；

4、使用基类的办法对Page进行定义，一次代码完成对所有网页的换肤，这个办法笔者还没有试过。仍然在设想Visual Studio未来的版本会有更简单的办法。