asp.net程序中如何使用皮肤更换的小功能

写这篇文章，因要往OA系统上添加更换主题的功能，在网上仔细搜索了一下，主要有几种方法可以实现，

 

第一种：使用原生态javascript+Css来实现，（代码多，看着纠结，对于前台不熟悉的程序员来说看深奥一点的javascript代码无疑是雪上加霜，反正我是这么理解的）

第二种：使用Jquery+Css来实现，（代码较少，看着也纠结，对于前台不熟悉的程序员来说看深奥一点的Jquery代码也无疑是雪上加霜，反正也我是这么理解的）

第三种：当然是使用.net自己的解决办法喽！

 

前两种方法我也不介绍了，网上一搜一大把。主要介绍下第三种的使用方法，其实很简单。估计看一遍就知道怎么做了，

 

首先看前台代码：

 <form id="form1" runat="server">
    <div>
        <div id="header">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a class="skin" href="#">换肤</a>
                   <div class="Skin_div">
                      <asp:RadioButton ID="RadioBtnSkin1" GroupName="skin" AutoPostBack="true" Checked="true" runat="server" OnCheckedChanged="RadioBtnSkin1_CheckedChanged" />皮肤一<br />
                      <asp:RadioButton ID="RadioBtnSkin2" GroupName="skin" AutoPostBack="true" runat="server" OnCheckedChanged="RadioBtnSkin2_CheckedChanged" />皮肤二<br />
                       <asp:RadioButton ID="RadioBtnSkin3" GroupName="skin" AutoPostBack="true" runat="server" OnCheckedChanged="RadioBtnSkin3_CheckedChanged" />皮肤三
                   </div>
                </li>
            </ul>
        </div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
    </form>

这里用到了jquery,用来显示与隐藏换肤菜单

 <link href="css/color1.css" id="color" runat="server" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function()
        {
            $(".skin").toggle(function()
            {
                $(this).next().show();
            }, function () {
                $(this).next().hide();
            })
        })
    </script>

<link href="css/color1.css" id="color" runat="server" rel="stylesheet" type="text/css" />默认是color1.css样式，看这句链接样式表有个ID属性(自己加的)，加上runat="server"之后

把他设置成服务器控件，这样的话，在后台就可以获取到它的属性了，可以随便设置了。

接下来就是要准备三个样式表，每个样式表里面都给头部，内容，尾部，设置了不同的颜色，随便你搞几个样式表都可以，

来看后台：

 protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Cookies["SkinCss"] != null)
            {
                this.color.Href = Request.Cookies["SkinCss"].ToString();
            }
            else
            {
                //如果有需要可以将skin字段存储于数据库，便于管理员切换页面主题，例如节日主题颜色
                //从数据库读取skin的字段表，获取值赋给href,如果为空，使用默认的样式表   
                //this.color.Href = "数据库的skin值";
            }
        }

        protected void RadioBtnSkin1_CheckedChanged(object sender, EventArgs e)
        {
            this.color.Href = "css/color1.css";
            Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
            Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays(365);
        }

        protected void RadioBtnSkin2_CheckedChanged(object sender, EventArgs e)
        {
            this.color.Href = "css/color2.css";
            Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
            Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays(365);
        }
        protected void RadioBtnSkin3_CheckedChanged(object sender, EventArgs e)
        {
            this.color.Href = "css/color3.css";
            Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
            Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays(365);
        }

 

至此，功能就实现了，样式表里面也可以把背景颜色替换成背景图片，主要还是使用了Cookie来实现，更换的时候把值存进Cookie,在页面加载的时候判断Cookie里面是否有值，如果有就直接拿出来用，

没有的话使用默认值。如果管理员想设置样式表那就要把SkinCss的值存到数据库，在页面加载的时候应用就可以了，其实想用Session，但是Session的ID还是要依靠Cookie来保存，万一用户的客户端

禁用了Cookie，可能会出现问题。所以就用Cookie了。