Click here to Skip to main content
15,867,594 members
Articles / Web Development / XHTML
Article

How to change Page theme dynamically in asp.net

Rate me:
Please Sign up or sign in to vote.
4.38/5 (10 votes)
17 Sep 2008CPOL2 min read 82K   1.7K   22   4
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.

C#
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 

C#
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.

 

C#
<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>
C#
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)


Written By
Architect Secure Meters Ltd.
India India
• A competent, ambitious & result oriented professional with Master degree with 12+ years of functional expertise in engineering of application software development.
• Expert in System architecture and software architecture design of high performance, high security, high availability of n-tire systems.
• Expert in web-based, n-tier and service based architecture.
• Specialized in web application level security.
• Expert in requirement analysis, designing, developing and implementing web, desktop, service & Android based mobile application.
• Proficient in communication protocols like TCP/IP, HTTP/HTTPS, SMTP, FTP/SFTP, SOAP, REST, BLE, DLMS, MQTT, Z-Wave.
• Excellent experience in process-driven software development with SDLC, SEI CMMI process and Agile methodologies.
• Strong experience in UML tool such as Enterprise Architecture.
• Solid experience in Software design & development.
• Delivered more than 7 products from concept to realization that caters to Metering, Energy monitoring, automated vehicle parking, GPS based fleet monitoring and Assisted living domains.
• Led a team of 7 members towards completion of products with planned activities.
• Strategic thinker, decision maker and deft in continually monitoring the ways for improvement of team, organizational and individual development.
• Extensive experience in Project Management, Assisted Living/home applications, IoT and intranet & internet based technologies.
• Received many rewards & awards in project executions & issue resolutions.
• Solid Analytical and Interpretation skills.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Sibeesh Venu8-Aug-14 1:43
professionalSibeesh Venu8-Aug-14 1:43 
GeneralBeautiful solution Pin
Abelardo Duarte Rey27-Apr-11 13:44
Abelardo Duarte Rey27-Apr-11 13:44 
GeneralGood Article Pin
Abhishek Sur22-Sep-08 21:33
professionalAbhishek Sur22-Sep-08 21:33 
GeneralRe: Good Article Pin
Murali Manohar Pareek23-Oct-08 19:00
Murali Manohar Pareek23-Oct-08 19:00 

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

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