快速业务通道

ASP.Net使用CSS换肤

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-04-11

常常看到有的网站通过DropDownList、菜单或按钮实现对整个网站改变页面风格(换肤)。专门Google了一些这方面的资料,总结了一下实现以上功能大致可以分成两类:
1、整个网站统一使用一个CSS文件,保证一类风格。通过切换不同风格的CSS文件实现换肤。这种方法实现
      起来比较简单。
2、不同风格、不同布局的UseControl,使用相同的后台代码(业务逻辑、功能)。通过重定向页面实现
     页面换肤。这种方法比较复杂,以后再讨论。

先看第一种方法:切换CSS文件换肤。
1、正常的页面如果需要指定所引用的CSS文件,必须在<head></head>里用<link>控件指定CSS文件,如

<head>
ASP.Net使用CSS换肤
 
<link  rel=stylesheet  type=text/css  href=mycss.css />
</head>
     如果需要切换CSS,就不能再定死这个<link>了。可以通过后台代码动态地改变这个控件的属性。
     可以用<asp:placeholder>控件来代替。placeholder控件可以理解成一个控件的容器,就像一个透明的包,你往里面装什么,它就是什么。
     现在页面变成了这个样子,我们在里面放了一个空的placeholder来代替link.
  <head>
    
<asp:placeholder id="MyCss" runat="server"/>
</head>

    在后台代码中定义一个函数,负责往placeholder里装东西,这里装css文件
 

public void ChangeSkin(string cssFile)
{
    
//生成一个新的HtmlGenericControl控件,它是一个link控件
    HtmlGenericControl objLink = new HtmlGenericControl("link");
    
//定义这个Link的各项属性
    objLink.ID = ID;
    objLink.Attributes[
"rel"= "stylesheet";
    objLink.Attributes[
"type"= "text/css";
    objLink.Attributes[
"href"= cssFile;
    
//把Link控件加到PlaceHolder控件中去
    MyCss.Controls.Add(objLink);
}


到这里,可以在页面里放2个按钮,按按钮切换不同的CSS文件

2、有的网站能把用户选择的样式保存起来,下次访问继续保留上次选择的风格。
     对于此类,可以用客户端的Cookie来保留选择的样式。

private void Page_Load(object sender, System.EventArgs e)
{
          
// 在此处放置用户代码以初始化页面
          if(!Page.IsPostBack)
         {

         
//判断客户端的浏览器是否支持Cookie
          if(Request.Browser.Cookies == false)   
                        label1.Text 
= "浏览器不支持Cookie !";
          
else
                        label1.Text = "浏览器支持Cookie !";
     
//客户端是否有Skin信息保存
         if(Request.Cookies["Skin"== null)
       
{
                  ChangeSkin(
"default.css");
                  label2.Text 
= "Cookie 为空,默认CSS";
        }

        
else
      
{
        
//根据客户端保留的Cookie信息,来加载不同的CSS样式表文件
         switch(Request.Cookies["Skin"].Value)
       
{
                
case "Red" : ChangeSkin("mycss2.css");
                                        label2.Text 
= "Cookie中的CSS为红色";
                                      
break;
                  
case "Blue" : ChangeSkin("mycss.css");
                                       label2.Text 
= "Cookie中的CSS为蓝色";
                                       
break;  
                       
default:     ChangeSkin("default.css");
//            break;
        }

      }

               

}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号