Appear in Online Interview to test your skills and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Thu, 24-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
34800
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Change theme dynamically without page refresh in ASP.NET

SheoNarayan
Posted by under ASP.NET category on for Intermediate level | Views : 29680 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.


You must have noticed one link in yahoo.com, msn.com or other popular websites named "Page Options". When you click this link you get a popup displaying different small several color icons. After clicking one of these icons your page theme changes without entire page refresh. Now you are able to see the same page with different look and feel.

 Download source code for Change theme dynamically without page refresh in ASP.NET


How does it happen and what it takes to do it? Is this possible in ASP.NET? If yes, how to do it? Do I need to use personalizaton? .... and so on. There are many questions arises in our mind when we try to do like this in asp.net.

Picture - 1


Here is a simple solution with downloadable and ready to use code.


Let me walk you through the process of coding this.

Step 1 - ChangeThemeControl.ascx

Create a user control that will have links of different themes and a simple JavaScript function named ChangeTheme(theme, themeName) that will take two parameter.

theme: This is the path of the .css file that will be used to temporarily set the theme of the page from which you have opted to change the theme.

themeName: This is the actual theme name that you have created in App_Themes folder of your root directory.

Put one <iframe> on this user control. This iframe will be used to pass the theme name as a querystring to ChangeThemeHidden.aspx page (described next) when you click on different theme icons/links.

The major code of this usercontrol is

<hr />

Change theme: <a href="#" onclick="javascript:ChangeTheme('/theme1/theme1.css', 'theme1')">Theme 1</a> |
<a href="#" onclick="javascript:ChangeTheme('/theme2/theme2.css', 'theme2')">Theme 2</a>
<hr />
<asp:Label ID="Label1" runat="server"></asp:Label>

<iframe id="magicFrame" width="0" height="0" style="display:none;"></iframe>

<script language="javascript" type="text/javascript">
function ChangeTheme(theme, themeName)
{
var cssid = document.getElementsByTagName("link");
var css = '';
for (var j = 0; j < cssid.length ; j++)
{
if (cssid[j].type == 'text/css') // search only css link
{
cssid[j].href = "/App_Themes"+ theme;

css = cssid[j].href;
}
}

document.getElementById('magicFrame').src = 'ChangeThemeHidden.aspx?theme='+ themeName;

}
</script>


Step 2 - ChangeThemeHidden.aspx

Create a separate page ChangeThemeHidden.aspx that will contain nothing but a Page_Load event.

This Page_Load event will check for a querystring called theme, if it will find this querystring then it will write its value to the session variables Session["GlobalSessionTheme"]. This session variable will be used to persist the theme name for that particular user who is visiting your site.

The code of this file is

protected void Page_Load(object sender, EventArgs e)

{
if (Request["theme"] != null)
{
WriteTheme(Request["theme"].ToString());
}
}

private void WriteTheme(string theme)
{
Session["GlobalSessionTheme"] = theme;
}


Step 3 - ChangeTheme.aspx & ChangeTheme2.aspx

Just create two sample pages to see that your code is working fine and selected theme is persisting even if user is navigating from one page to another. On this page, just register the usercontrol that you created in the first step, this will give option to the user to select different themes from any page of the site.

These pages may contain anything you need on it. In addition to your own code you will need to write following event to make sure that you are rendering the page with the theme that was selected by user.

The code to do this is

protected override void OnPreInit(EventArgs e)

{
if (Session["GlobalSessionTheme"] != null)
this.Theme = Session["GlobalSessionTheme"].ToString();
}



Step 4 - Theme1.css, Theme2.css

Create your .css files for different themes. I have create two files with different background & foreground color of the page.

Theme1.css
body 

{
background-color:yellow;
font-family:Arial, Verdana;
font-size:10pt;
color:Blue;
}

a
{
font-weight:bold;
color:Green;
}


Theme2.css
body 

{
background-color:#c0d0e0;
font-family:Century Gothic, Book Antiqua;
font-size:10pt;
color:Maroon;
}

a
{
font-weight:bold;
color:blue;
}



Picture - 2


Step 5 - Just test it!!!


Browse ChangeTheme.aspx page and click on Theme 2 link, your current page theme will be changed to Theme 2 look and feel (Did u noticed that the whole page is not posted back to the server? , hmm... happy?). Now, when you will click on Page 2 link, the browser will be redirected to ChangeTheme2.aspx page and the look and feel of the page will remain same (Theme 2).

Pictures attached here are showing example of persisting theme1 on Page 2.

Try doing vice-versa and you will see that when you are changing the theme, page is not getting refreshed and your theme is persisting.

Step 5 - Download

Easy? .............. tough? ............. no problem, download the attached .zip file, unzip it and place into your root folder. Browse http://localhost/ChangeTheme.aspx and try changing your taste of colors and imagination combination.

Do write your feedback or any suggestions for improvement.
Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

SheoNarayan

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Microsoft_MVP,Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan The Founder http://www.dotnetfunda.com
http://www.snarayan.com

Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan
Login to vote for this post.

Comments or Responses

Posted by: Varung on: 12/9/2011 | Points: 25

but we can use different skin files and change them runtime


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook