Dynamically switching themes

Aka · April 19th, 2012, 08:21 AM

Hello. I am having the same problem. Trying for couple of hours to fix it now, searching similar threads but didn't find any solution. I hope its ok if i post in this thread.
Tried it in Chrome, Firefox and IE. Also was switching theme and stlyeSheetTheme in web.confg and tried it without it also.

MasterPages/Frontend.master

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
    <div id="Header"><a herf="~/" runat="server"></a></div>
    <div id="MenuWrapper">Menu Goes Here</div>
    <div id="MainContent">
    <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
    </asp:ContentPlaceHolder>
    </div>
    <div id="Sidebar">
    Select a Theme <br/>
        <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True">
            <asp:ListItem>Monochrome</asp:ListItem>
            <asp:ListItem>DarkGrey</asp:ListItem>
        </asp:DropDownList>
    </div>
    <div id="Footer">Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

MasterPages/Frontend.master.cs

Code:

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MasterPages_Frontend : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string selectedTheme = Page.Theme;
            HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
            if (preferredTheme != null)
            {
                selectedTheme = preferredTheme.Value;
            }
            if (!string.IsNullOrEmpty(selectedTheme) &&
                ThemeList.Items.FindByValue(selectedTheme) != null)
            {
                ThemeList.Items.FindByValue(selectedTheme).Selected = true;
            }
        }
    }
    protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = new HttpCookie("PreferredTheme");
        preferredTheme.Expires = DateTime.Now.AddMonths(3);
        preferredTheme.Value = ThemeList.SelectedValue;
        Response.Cookies.Add(preferredTheme);
        Response.Redirect(Request.Url.ToString());
    }
}

App_Code/BasePage.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class BasePage : System.Web.UI.Page
{
    private void Page_PreInit(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
        if (preferredTheme != null)
        {
            Page.Theme = preferredTheme.Value;
        }
    }

    private void Page_PreRender(object sender, EventArgs e)
    {
        if (this.Title == "Untitled Page" || string.IsNullOrEmpty(this.Title))
        {
            throw new Exception(
                "Page title cannot be \"Untitled Page\" or an empty string.");
        }
    }

    public BasePage()
    {
        this.PreRender += new EventHandler(Page_PreRender);
        this.PreInit += new EventHandler(Page_PreInit);
    }
}

default.aspx

Code:

<%@ Page Title="Welcome to Planet Wrox" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <h1 class="Introduction">
        Hi there visitor and welcome to Planet Wrox</h1>
    <p class="Introduction">
        We're glad you're <span class="style1">paying a visit</span> to
        <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a> the coolest music 
        site on the Internet.</p>
    <p class="Introduction">
        Feel free to have a <a href="Default.aspx">look around</a>; there are lots of 
        interesting <strong>reviews and concert pictures</strong> to be found here.</p>
    <p>
        You can <a href="MasterPages/Login.aspx">log in</a> here</p>
</asp:Content>

default.aspx.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : BasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

web.config

Code:

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>

    <system.web>
      <pages theme="Monochrome"></pages>
        <httpRuntime enable="true" />
        <compilation debug="false" targetFramework="4.0" />
    </system.web>

</configuration>

Imar · April 19th, 2012, 11:12 AM

Hi there,

Your DropDownList is not hooked to the ThemeList_SelectedIndexChanged method. In Markup View, add the following to the control:

OnSelectedIndexChanged="ThemeList_SelectedIndexCha nged"

Hope this helps,

Imar

Aka · April 19th, 2012, 11:53 AM

I suspected something like that. Was staring at the code for hours but didn't see that ^^
Thank you very much.

Edit: Its working now.

binaryspirit · April 22nd, 2012, 07:38 AM

hello sir, i have problem in understanding few things like
Reponse.Redirect.(Request.Url.ToString()); //though it is explained i dont get it

other thing is:
if (!string.IsNullOrEmpty(selectedTheme) && ThemeList.Items.FindByValue(selectedTheme) != null)
{
ThemeList.Items.FindByValue(selectedTheme).Selecte d = true;
}
why we are checking selectedtheme and themelist found value with null

and
if (!Page.IsPostBack) //is this to ensure that the following code will only execute
// only when page is loaded for the first time if it is so then how come the themelist gets updated on each postback.

please help me...

Imar · April 22nd, 2012, 08:59 AM

Hi there,

Quote:

Reponse.Redirect.(Request.Url.ToString()); //though it is explained i dont get it

This redirects to the same page as you're currently viewing. This causes a new GET request which in turn causes a new page life cycle to start which turn applies the theme by the code in BasePage

Quote:

if (!string.IsNullOrEmpty(selectedTheme) && ThemeList.Items.FindByValue(selectedTheme) != null)
{
ThemeList.Items.FindByValue(selectedTheme).Selecte d = true;
}
why we are checking selectedtheme and themelist found value with null

To ensure that a) you ended up with a valid theme name and b) to ensure that the theme you found is present in the drop down. It might not be there if you have a cookie with an old theme name that you removed from the drop down list.

Quote:

if (!Page.IsPostBack) //is this to ensure that the following code will only execute
// only when page is loaded for the first time if it is so then how come the themelist gets updated on each postback.

The DropDownList maintains its selected value in ViewState....

Cheers,

Imar

binaryspirit · April 22nd, 2012, 11:16 AM

thanx sir, its very clear now....