Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

How to change Page theme dynamically in asp.net | How to change website theme dynamically at runtime using asp.net

Oct 29, 2011
Introduction:

In this article I will explain how to change themes dynamically using asp.net.

Description:


In many sites if you observe we found options like changing the color of websites based on selection of color after seen those type of theme change options I decided to write the post to change the themes dynamically by using asp.net.
In asp.net we have feature called “Themes” by using this feature and below code to allow users to change themes dynamically for our website.
protected void Page_PreInit(object sender, EventArgs e)
{
if (Session["Theme"] != null)
{
Page.Theme = Session["Theme"].ToString();
}
}
Here Page_PreInit event will rise before any other event and Page.Theme is used to get the required theme from App_Themes folder based on Session["Theme"] value.
To implement this first create new website in visual studio after that right click on your website and select Add New Item after that select Master page and click OK. Now master page added to your application. Now again right click on your website and select Add ASP.NET Folder under that select Theme now App_Themes folder will add to your application. Now right click on App_Themes folder and create two new Asp.net folders and give names as “Blue” and “Red”. Now select Blue folder under that add one skin file and one css file same way add skin file and css file in Red folder also. Here we need to use Page_PreInit event in all the pages wherever we need to change themes dynamically for that reason instead of writing this same event in all the pages we need to create new class file and give name as ThemeClass and write following code.
public class ThemeClass:System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
if (Session["Theme"] != null)
{
Page.Theme = Session["Theme"].ToString();
}
}
}
Note: Here we need to inherit Asp.net base class properties for that reason we added System.Web.UI.Page to our class file.
Over all our structure of the application will be like this
Now open MasterPage and write the following code
MasterPage.master page code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change Page Themes Dynamically</title>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td align="center">
<b>Click Button to change Theme</b><br />
<asp:Button ID="btnBlue" runat="server" Text="Blue" BackColor="Blue" Font-Bold="true" onclick="btnBlue_Click"/>
<asp:Button ID="btnRed" runat="server" Text="Red" BackColor="Red" Font-Bold="true" onclick="btnRed_Click"/>
</td>
</tr>
<tr>
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
Now open MasterPage.master.cs file and write the following code in codebehind
protected void btnBlue_Click(object sender, EventArgs e)
{
Session["Theme"] = btnBlue.Text;
Server.Transfer(Request.FilePath);
}
protected void btnRed_Click(object sender, EventArgs e)
{
Session["Theme"] = btnRed.Text;
Server.Transfer(Request.FilePath);
}
Now open Default.aspx page and add masterpage file reference to page directive of your Default.aspx page like this
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/MasterPage.master" %>
After add MasterPage reference write the following code in Default.aspx page
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<table class="tablecss" align="center" width="30%">
<tr>
<td colspan="2" align="center" >
<h3>Registration Form</h3>
</td>
</tr>
<tr>
<td align="right">
UserName:
</td>
<td>
<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Date of Birth:
</td>
<td>
<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Education:
</td>
<td>
  <asp:DropDownList ID="ddl_Education" runat="server" Width="162px" ></asp:DropDownList>
</td>
</tr>
<tr>
<td align="right">
Address:
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" Columns="17" Rows="8" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
</asp:Content>
After that in Default.aspx.cs file and write the following code
public partial class _Default : ThemeClass
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
ArrayList arry = new ArrayList();
arry.Add("School");
arry.Add("Master");
arry.Add("Doctorate");
arry.Add("Graduate");
arry.Add("Professional");
ddl_Education.DataSource = arry;
ddl_Education.DataBind();
}
}
}
Note: Here we need to inherit Page_Init method from ThemeClass for that reason I added ThemeClass to our class
Now open Blue.skin file in App_Themes/Blue/Blue.skin path and write the following code
<asp:Label runat="server"  Font-Bold="true" Font-Italic="true" />
<asp:Textbox runat="server"  BackColor="Orange" BorderColor="DarkCyan" BorderStyle="Dotted" BorderWidth="2" />
<asp:DropDownList  runat="server" BackColor="Orange" Font-Italic="true" />
Open StyleSheet.css file in App_Themes/Blue/StyleSheet.skin path and write the following code
body
{
font-size: 14pt;
color: #000000;
background-color : #44BCED;
}
.tablecss
{
border: solid 12px Blue
background-color:#ffffff;
}
Now open Red.skin file in App_Themes/Red/Red.skin path and write the following code
<asp:Label runat="server"  BackColor="BurlyWood" BorderColor="Aqua" BorderStyle="Inset" BorderWidth="2" />
<asp:Textbox runat="server"  BackColor="Gray" BorderColor="RoyalBlue" BorderStyle="Outset" BorderWidth="1" />
<asp:DropDownList runat="server"  BackColor="Gray" Font-Bold="true" Font-Italic="true" Font-Underline="true" ForeColor="Blue"/>
Open StyleSheet.css file in App_Themes/Red/StyleSheet.skin path and write the following code
body
{
font-size: 15pt;
color: #000000;
background-color: Red;
}
.tablecss
{
border: solid 12px black;   
background-color:#ffffff;
}
Now everything ready press F5 and check your oputput
Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

10 comments :

Anonymous said...

Hi surese . This is really nice article with crystal smooth explanation. i just wanted to ask one question. how can we implement multiple themes on the fly without using too many skin folders under app_theme folder.

Thanks and Regards

Unknown said...

hi... all of your articles are very nice...
Could you please post some article on httpmodule and handlers and also Linq

Anonymous said...

hello sir
thank you for post this artical
this is easy to understand
again thank you

Navas Khan said...

nice artical sir!

Anonymous said...

ddd

Anonymous said...

Nice notes but one doubt why your using class we can write code in page preinit method right?

Cool Goutam said...

Nice It's really Works
Thanks Buddy.

Bahare Feizi said...

Hi,
the Article is exellent but how can do it without page refresh? is it possible?

sagar said...

thanx for sharing this useful article wyth us..
but i want to know can we completly change the theme of a website or not?

manish said...

hello bro...your post is very nice but its not working on my application i dont know why...its show the error executing the child request...

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.