Cameleon 网页模板
4.43/5 (4投票s)
使用 C# 更改 ASP.NET 母版页 Web 模板的颜色以更改 CSS。
引言
是否曾经想过让您的网站访问者有机会自定义您网站的颜色？ 本文为那些使用 ASP.NET 构建网站的人提供了一个解决方案。 在这里，我们使用 ASP.NET 母版页，选择的语言是 C#。
背景
像 msn.com 和 bbc.co.uk 这样的网站允许用户更改其网站的模板颜色。 这个想法可能看起来像一个噱头，有点毫无意义，并非每个人都需要，或者符合每个人的口味。
尽管如此，它还是有一些价值的 - MSN 和 BBC 都是大型组织，并且可能在营销研究上花费了大量资金。
使用代码
首先，让我们看一下播放顺序和所需的文件。 我们从 default.aspx 开始 - 当被请求时，它会启动域名/文件夹（这里没有什么新东西）。 这会调用 pc.master（模板文件）和 master.cs（代码隐藏）。 反过来，pc.master 调用 central.aspx（样式表），最初，会调用主控控件 - home.ascx。 现在，网页已加载。
所有工作都在 central.aspx 和 master.cs 中完成。
关于这一点，第一个关键点是，样式表是一个 ASPX 文件，而不是一个 CSS 文件。 central.aspx 文件被呈现为 CSS 文件，因为我们在文档顶部声明了内容类型。 样式表看起来像这样
<% Response.ContentType = "text/css";%>
<%@ Page Language="C#"%>
<%
string colormedium = null;
string colorstrong = null;
string colorweak = null;
string logo = null;
HttpCookie cookie = Request.Cookies["colorme"];
if (cookie == null) {
Random RandomClass = new Random();
int RandomNumber = 0;
RandomNumber = RandomClass.Next(1, 5);
if (RandomNumber == 1) {
colorstrong = "#55AAFB";// - strong blue
colormedium = "#8FC8FD";// - medium blue
colorweak = "#C9E5FF";// - weak blue
logo = "url('images/picassocode-blue.jpg')";//- blue logo
}
else if (RandomNumber == 2) {
colorstrong = "#AF51FF";// - strong purple
colormedium = "#CB8DFF";// - medium purple
colorweak = "#E6C9FF";// - weak purple
logo = "url('images/picassocode-purple.jpg')";//- purple logo
}
else if (RandomNumber == 3) {
colorstrong = "#FFBD4C";// - strong orange
colormedium = "#FFD189";// - medium orange
colorweak = "#FFE8C5";// - weak orange
logo = "url('images/picassocode-orange.jpg')";//- orange logo
}
else if (RandomNumber == 4) {
colorstrong = "#FF5489";// - strong pink
colormedium = "#FF91B8";// - medium pink
colorweak = "#FFCDE0";// - weak pink
logo = "url('images/picassocode-pink.jpg')";//- pink logo
}
else if (RandomNumber == 5) {
colorstrong = "#C3E473";// - strong green
colormedium = "#DDEFA5";// - medium green
colorweak = "#F1F9D7";// - weak green
logo = "url('images/picassocode-green.jpg')";//- green logo
}
}
else if (cookie != null) {
if (cookie.Value == "blue") {
colorstrong = "#55AAFB";// - strong blue
colormedium = "#8FC8FD";// - medium blue
colorweak = "#C9E5FF";// - weak blue
logo = "url('images/picassocode-blue.jpg')";//- blue logo
}
else if (cookie.Value == "purple") {
colorstrong = "#AF51FF";// - strong purple
colormedium = "#CB8DFF";// - medium purple
colorweak = "#E6C9FF";// - weak purple
logo = "url('images/picassocode-purple.jpg')";//- purple logo
}
else if (cookie.Value == "orange") {
colorstrong = "#FFBD4C";// - strong orange
colormedium = "#FFD189";// - medium orange
colorweak = "#FFE8C5";// - weak orange
logo = "url('images/picassocode-orange.jpg')";//- orange logo
}
else if (cookie.Value == "pink") {
colorstrong = "#FF5489";// - strong pink
colormedium = "#FF91B8";// - medium pink
colorweak = "#FFCDE0";// - weak pink
logo = "url('images/picassocode-pink.jpg')";//- pink logo
}
else if (cookie.Value == "green")
{
colorstrong = "#C3E473";// - strong green
colormedium = "#DDEFA5";// - medium green
colorweak = "#F1F9D7";// - weak green
logo = "url('images/picassocode-green.jpg')";//- green logo
}
}
%>
body { font-family: Tahoma,Verdana,
Arial;font-size:100%;padding:0;margin:0;
background-color:#CFCFB8;color:#9a9a9a}
a{ color:<% = colorstrong %>
text-decoration:none;
}
a:hover{
text-decoration:underline
}
table {
border-collapse : collapse;
}
table td, table th {
padding : 0;
}
.img_border{border:1px solid #000;margin:5px}
.logo{background-image:<% = logo%>}
.mediumback{background-color:<% = colormedium%>}
.mediumborder{border:solid 3px <% = colormedium%>}
.mediumtext{color:<% = colormedium%>}
.strongback{background-color:<% = colorstrong%>}
.strongborder{border:solid 3px <% = colorstrong%>}
.strongtext{color:<% = colorstrong%>}
.weakback{background-color:<% = colorweak%>}
.weakborder{border:solid 3px <% = colorweak%>}
.weaktext{color:<% = colorweak%>}
/* menu */
.mymenu{
margin: 5px 0;
padding: 0;
}
.mymenu a.menuitem{
background-color:<% =colorweak %>;
font-size:85%;
color: #000000;
display: block;
position: relative;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
border-bottom: 1px solid #9A9A9A;
text-align:left;
}
.mymenu a.menuitem:hover{
background-color:#ffffff;
}
当 central.aspx 加载时，服务器读取 C# ASPX 内容，然后将其余部分呈现为 CSS 到浏览器。 这是因为我们声明了内容类型为 "text/css"。
在 central.aspx 中，我们询问是否存在名为 'colorme' 的 cookie。 如果没有，我们设置一个介于 1 和 5 之间的随机数，并定义四个与该随机数相关的变量。（这些变量将设置引入的 logo，一种弱颜色，一种中等颜色和一种强颜色。） 如果存在名为 'colorme' 的 cookie，我们将四个变量设置为相应的 logo 和颜色。 一旦设置了这四个变量，不同的 CSS 样式就会被分配它们的相关值。
上述情况发生在页面加载时 - 颜色已设置。
现在，用户可以选择他们可以从其中选择的颜色。 在我们的例子中，我们有绿色、橙色、粉色、蓝色和紫色。
彩色框下方的超链接如下所示
<table style="width:100%">
<tr>
<td></td>
<td style="text-align:right">Change colour</td>
<td><a href="default.aspx?colour=green"><img src="images/square-green.jpg"
alt="Change to green" class="img_border" style="vertical-align:middle"/></a></td>
<td><a href="default.aspx?colour=orange"><img src="images/square-orange.jpg"
alt="Change to orange" class="img_border" style="vertical-align:middle"/></a></td>
<td><a href="default.aspx?colour=pink"><img src="images/square-pink.jpg"
alt="Change to pink" class="img_border" style="vertical-align:middle"/></a></td>
<td><a href="default.aspx?colour=blue"><img src="images/square-blue.jpg"
alt="Change to blue" class="img_border" style="vertical-align:middle"/></a></td>
<td><a href="default.aspx?colour=purple"><img src="images/square-purple.jpg"
alt="Change purple" class="img_border" style="vertical-align:middle"/></a></td>
</tr>
</table>
单击其中任何一个后，将启动 default.aspx，调用 master.cs 和 central.aspx。 central.aspx 的行为如上所述。 master.cs 会查找 URL 中的 'color' 查询字符串。
master.cs 看起来像这样
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
void Page_Load()
{
string getcolourcarry = Request.QueryString["colour"];
string getid = Request.QueryString["id"];
if (getcolourcarry != "")
{
changecolor(getcolourcarry);
}
if (getid == "control2")
{
mainblock.Controls.Clear();
Control c1 = LoadControl("control2.ascx");
mainblock.Controls.Add(c1);
}
else if (getid == "control3")
{
mainblock.Controls.Clear();
Control c1 = LoadControl("control3.ascx");
mainblock.Controls.Add(c1);
}
else
{
mainblock.Controls.Clear();
Control c1 = LoadControl("home.ascx");
mainblock.Controls.Add(c1);
}
}
void changecolor(string getcolour)
{
HttpCookie cookie = new HttpCookie("colorme");
if (getcolour == "green") {
cookie.Value = "green";
cookie.Expires = DateTime.Now.AddYears(1);
cookie.Domain = "picassocode.net";
Response.Cookies.Add(cookie);
}
else if (getcolour == "orange") {
cookie.Value = "orange";
cookie.Expires = DateTime.Now.AddYears(1);
cookie.Domain = "picassocode.net";
Response.Cookies.Add(cookie);
}
else if (getcolour == "pink") {
cookie.Value = "pink";
cookie.Expires = DateTime.Now.AddYears(1);
cookie.Domain = "picassocode.net";
Response.Cookies.Add(cookie);
}
else if (getcolour == "purple") {
cookie.Value = "purple";
cookie.Expires = DateTime.Now.AddYears(1);
cookie.Domain = "picassocode.net";
Response.Cookies.Add(cookie);
}
else if (getcolour == "blue")
{
cookie.Value = "blue";
cookie.Expires = DateTime.Now.AddYears(1);
cookie.Domain = "picassocode.net";
Response.Cookies.Add(cookie);
}
}
}
在页面加载时，我们查找两件事 - ID 查询字符串和 color 查询字符串。 ID 查询字符串只是将我们定向到相关页面 - 在我们的例子中，我们要么加载 control2.ascx，control3.ascx，如果 ID 查询什么都不是，则加载 home.ascx。
但我们想要的是 'color' 查询字符串。 如果它不等于 null，我们会查看它是否等于我们的其中一种颜色 - 绿色、橙色等。 如果是，那么我们只需根据选择的颜色创建一个 cookie。
然后，central.aspx 被触发，并经历查看我们是否有名为 'colorme' 的 cookie 的过程，并选择相关的样式。
关注点
请注意，如果您设置样式表，则可以允许您的用户更改任何样式。
该方法由 cookie 驱动。 大多数用户都有阻止和删除 cookie 的能力 - 您可能需要添加一个帮助页面来描述这其中的来龙去脉。
在这里查看一个有效的实时示例 here.