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>

View Code
这里用到了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了。