How to change Page theme dynamically in asp.net

• Download DynamicWebPageTheme.zip - 7.38 KB

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.