How to change Page theme dynamically in 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 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 selectTheme 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 asThemeClass 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 addedSystem.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
 |
No comments:
Post a Comment