ASP.NET实现动态主题切换实例

LongTermism

已于 2022-03-27 22:09:15 修改

阅读量773

点赞数 1

分类专栏： ASP.NET 文章标签： .net

于 2020-09-25 19:56:21 首次发布

本文链接：https://blog.csdn.net/qq_45968259/article/details/108631802

版权

ASP.NET 专栏收录该内容

4 篇文章 3 订阅

订阅专栏

项目获取地址：
https://download.csdn.net/download/qq_45968259/12882544

项目内容

在页面中，通过选择相应的主题，实现对页面应用所选主题。默认情况，页面应用主题一样式。执行程序，示例运行结果如图1、2所示。
在这里插入图片描述

在这里插入图片描述

项目结构

在这里插入图片描述

设计页面

在这里插入图片描述

代码

1、主题一
SkinFile.skin代码：

<asp:TextBox  runat="server" BackColor="#FF66FF" BorderColor="Aqua" Font-Size="12pt" ForeColor="#FFFF66" Width="150px">主题1</asp:TextBox>
<asp:TextBox Skinid="textboxSkin" runat="server" BackColor="#996600" BorderColor="Yellow" BorderStyle="Dotted" Font-Size="15pt" Width="250px">主题1</asp:TextBox>

StyleSheet.css代码：

body
{
text-align: center;
	color:darkgreen;
	background-color: #00FF00;
	background-image: url( 'images/bizhi3.jpg' );
	background-size:100% 100%; 
	background-attachment:fixed;
}
a:link
{
	color: #CCCCFF;
	text-decoration: underline;
}
a:visited
{
	color: #FF0000;
	text-decoration: underline;
}
a:hover
{
	color: #CC33FF;
	text-decoration: underline;
	font-style: italic;
}
input
{
	border-color: #0000FF;
}

2、主题二
SkinFile.skin代码：

<asp:TextBox  runat="server" BackColor="#666633" BorderColor="#CC00FF" BorderStyle="Groove" BorderWidth="3px" ForeColor="Red">主题2</asp:TextBox>
<asp:TextBox Skinid="textboxSkin" runat="server" BackColor="#FF6666" BorderColor="Aqua" Height="100px"  Width="200px">主题2</asp:TextBox>

StyleSheet.css代码：

body
{
	text-align: center;
	color:darkblue;
	background-color: #CC66FF;
	background-image: url(  'images/bizhi2.jpg' );
	background-size:100% 100%; 
	background-attachment:fixed;
}
a:link
{
	color: #0066FF;
	text-decoration: underline;
}
a:visited
{
	color: #009900;
	text-decoration: underline;
}
a:hover
{
	color: #000099;
	text-decoration: underline;
	font-style: italic;
}
input
{
	border-color: #FF0000;
}

后台代码
在PreInit事件发生过程中修改Page对象的Theme属性值。其代码如下：

protected void Page_PreInit(object sender, EventArgs e)
    {
        string theme = "Theme1";
        if (Request.QueryString["theme"] == null)
        {
            theme = "Theme1";
        }
        else
        {
            theme = Request.QueryString["theme"];
        }
        Page.Theme = theme;
        ListItem item = DropDownList1.Items.FindByValue(theme);
        if (item != null)
        {
            item.Selected = true;
        }
        TextBox2.SkinID = "textboxSkin";
    }

当用户选择任一个选项时，都会触发DropDownList控件的SelectedIndexChanged事件，在该事件下，将选项的主题名存放在myurl的QueryString(即theme)中，并重新加载页面。其代码如下：

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string myurl = Request.Path + "?theme=" + DropDownList1.SelectedItem.Value;
        Response.Redirect(myurl);
    }