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 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 Email
|
|||
|
|
|
9 comments :
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
hi... all of your articles are very nice...
Could you please post some article on httpmodule and handlers and also Linq
hello sir
thank you for post this artical
this is easy to understand
again thank you
nice artical sir!
ddd
Nice notes but one doubt why your using class we can write code in page preinit method right?
Nice It's really Works
Thanks Buddy.
Hi,
the Article is exellent but how can do it without page refresh? is it possible?
thanx for sharing this useful article wyth us..
but i want to know can we completly change the theme of a website or not?