Click here to Skip to main content
Click here to Skip to main content

How to change Page theme dynamically in asp.net

, 17 Sep 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Change Page theme at runtime without reloading the page means simply change the page theme on single postback of the page.

DynamicTheme_Black.JPG

Introduction

This is a simple code which can be used to change the page themes at run time. This code includes the three page with different method to change the page theme. The Speciality of this code is the third method that "Simply change the page theme on single postback of the page". 

Background

Basic knowledge of C#, HTML, stylesheets and Java Script is required.

Using the Code

At the first though we may say we can easily achieve this by coding it in Page_Preinit Event as shown below.

protected void Page_PreInit(object sender, EventArgs e)
{
       Page.Theme = "Black"; //default theme
}

But if user want to select theme from dropdownlist then problem occurs because Page_PreInit is fire before other event.

Solution 

  • On Page_PreInit load selected theme using session or static global variable.
  • Either create one session variable or static global variable to store selected theme on SelectedIndexChanged Event of DropDownList. 
  • Reload the page using Server.Transfer or Response.Redirect method. 

Code 

Method 1: Using Session Variable

protected void Page_PreInit(object sender, EventArgs e)
 {
 string theme;
 theme = (string)Session["theme"];
 if ((theme != null)&&(theme.Length !=0))
 {
 Page.Theme = theme;
 ddlTheme.Text = theme;
 }
 else
 {
 Page.Theme = "Black";
 }
 }

 protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
 {
 Session["theme"] = ddlTheme.SelectedItem.Value;
 Server.Transfer(Request.FilePath);
 }

Method 2: Using Global Static Variable 

private static string theme;

 protected void Page_PreInit(object sender, EventArgs e)
 {
 if ((theme!= null) && (theme.Length != 0))
 {
 Page.Theme = theme;
 ddlTheme.Text = theme;
 }
 else
 {
 Page.Theme = "Black";
 }
 }

 protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
 {
 theme = ddlTheme.SelectedItem.Value;
 Server.Transfer(Request.FilePath);
 }

Challenge

Now someone give me a challenge to do this task without using any session variable, Global static variable and also without reloading the page using Server.Transfer or Response.Redirect means simply change the page theme on single postback of the page.

Solution

  • On Page_PreInit load selected theme using client cookie.  
  • Create a JavaScript function to store selected theme in client cookie.
  • call this function onChange event of DropDownList at client side. 

Code 

Method 3: Simply change the page theme on single postback of the page.

 

<form id="form1" runat="server">
 <div>
 <table border="0" cellpadding="0" cellspacing="0" style=width: 100%>
 <tr>
 <td>
 <table>
 <tr>
 <td>Theme</td>
 <td width=6px></td>
 <td>
 <asp:DropDownList ID="ddlTheme" AutoPostBack="true"
onchange="javascript:SetTheme()" runat="server">
 <asp:ListItem Selected="True">Black</asp:ListItem>
 <asp:ListItem>White</asp:ListItem>
 </asp:DropDownList>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="height:12px">
 </td>
 </tr>
 <tr>
 <td align="center">
 <div style="text-justify: auto; text-align:
 justify; width:500px">
 Dear Friends, This demo project shows,
How to load Theme dynamically. The speciality of this page is
"No Need to use any session, global variable and no need to send
the new request to server only postback is required means no need
to use Response.Redirect or Server.Transfer to same or other
page". I simply store the selected theme in client cookie at
client side by using javascript function and load newly
selected theme on page preinit event at server side. Default theme is Black.
 </div>
 </td>
 </tr>
 </table>

 </div>
 <script type="text/javascript">
 function SetTheme()
 {
 document.cookie = "theme=" +
document.getElementById('ddlTheme').value + ";";
 }
 </script>
 </form>
protected void Page_PreInit(object sender, EventArgs e)
 {
 if ((Request.Cookies["theme"] != null)
 && (Request.Cookies["theme"].Value.Length !=0))
 Page.Theme = Request.Cookies["theme"].Value;
 else
 Page.Theme = "Black";
 }

Points of Interest

I win, do this task without reloading the page using Server.Transfer or Response.Redirect and also without using session or static global variable means simply change the page theme on single postback of the page.

  • Page_preinit is fired before other event.
  • Either create one session variable or static global variable to store selected theme on SelectedIndexChanged Event of DropDownList.
  • Server.Transfer or Response.Redirect plays important role in first two method.
  • Now my challenge, Simply change the page theme on single postback of the page. Use a client side function to store selected theme in client cookie and load this theme on Page_PreInit Event, this event calls every time of SelectedIndexChanged Event of DropDownList.  So no need to reload the page using Server.Transfer or Response.Redirect method only single postback is required to change the page theme dynamically.

History  

Version 1.0.0.0 has Initial code includes all three page with different method to load page theme dynamically.

Version 1.0.0.1 has modified code includes modified third method, now the previous theme will be selected at first time.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Murali Manohar Pareek
Software Developer (Senior) Secure Meters Ltd.
India India
I have an experience of 7+ Years in Delphi, C#, VB.NET, ASP.NET, AJAX, HTML, XHTML, CSS, XML, WCF, LINQ, Java Script, jquery, SQL SERVER, Oracle.
 
I love to work in R&D sphere. My favorite programming languages are C# and ASP.NET. I also love to help others.

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSibeesh Venu8-Aug-14 1:43 
GeneralBeautiful solution PinmemberAbelardo Duarte Rey27-Apr-11 13:44 
GeneralGood Article PinmemberAbhishek sur22-Sep-08 21:33 
Hey.. Its good article, but I think I have seen the same thing long before in codeproject.
 
Abhishek Sur

GeneralRe: Good Article PinmemberMurali Manohar Pareek23-Oct-08 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 17 Sep 2008
Article Copyright 2008 by Murali Manohar Pareek
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid