Dynamically Switching Themes

robbiehaas · September 7th, 2010, 06:45 AM

After completing the exercises on pages 227 & 231, I run into an issue with what appears to be a conflict with the CSS code for the DarkGrey & Monochrome themes. If I have Monochrome set in the web.config file ( <pages theme="Monochrome" styleSheetTheme="Monochrome"></pages>), the DarkGrey theme on the dropdown list appears incorrect when selected. If I have DarkGrey set in the web.config file, the Monochrome them on the dropdown list appears incorrect when selected.

The CSS is fine code is correct, as the themes appear fine when selected in web.config file but not when dynamically switching themes. How do I correct this?

Thanks!

Imar · September 7th, 2010, 07:11 AM

Hi there,

Take a look at page 231, step 4 and the paragraph that follows. It explains the reason and a fix for this problem.

Cheers,

Imar
---------------------------------------------------------------------------------------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter.

Author of Beginning ASP.NET 4 : in C# and VB, Beginning ASP.NET 3.5 : in C# and VB, and ASP.NET 2.0 Instant Results.
While typing this post, I was listening to: Girl I Love You by Massive Attack (From the album: Heligoland) What's This?

pydis · January 30th, 2014, 04:15 PM

Hi!
I have the exact same issue, however, I have deleted the css-include-line.

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" styleSheetTheme="Monochrome"></pages>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>

</configuration>

frontend.master

Code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="PageWrapper">
            <header><a href="/"></a></header>
            <nav>Menu Goes Here</nav>
            <section id="MainContent">
                <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <aside id="Sidebar">
                Select a theme<br />
                <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
                    <asp:ListItem>Monochrome</asp:ListItem>
                    <asp:ListItem>DarkGrey</asp:ListItem>
                </asp:DropDownList></aside>
            <footer>Footer Goes Here</footer>
        </div>
    </form>
</body>
</html>

Frontend.master.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 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))
            {
                ListItem item = ThemeList.Items.FindByValue(selectedTheme);
                if (item != null)
                {
                    item.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());
    }
}

BasePage.cs

Code:

using System;
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)
        {
            string folder = Server.MapPath("~/App_Themes/" + preferredTheme.Value);
            if (System.IO.Directory.Exists(folder))
            {
                Page.Theme = preferredTheme.Value;
            }
        }
    }

    private void Page_PreRender(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(this.Title) || this.Title.Equals("Untitled Page", StringComparison.CurrentCultureIgnoreCase))
        {
            throw new Exception(
            "Page title cannot be \"Untitled Page\" or an empty string.");
        }
    }
    public BasePage()
    {
        this.PreRender += Page_PreRender;
        this.PreInit += Page_PreInit;
    }
}

I can't see whats wrong?

Imar · January 30th, 2014, 04:45 PM

Hi there,

Take a look at this:

Code:

<pages theme="Monochrome" styleSheetTheme="Monochrome"></pages>

You also have the styleSheetTheme set. So when you dynamically set the DarkGrey theme, both themes are applied.

Just remove styleSheetTheme from web.config and it should work.

Cheers,

Imar

pydis · January 30th, 2014, 05:31 PM

Ohh...

So, to get VS to display the layout correctly in designmode, I need the styleSheetTheme="", but I can't use it in production?

Seems a bit odd, but hey :)

Anyway, thanks!

Imar · January 30th, 2014, 05:52 PM

You can use it in production if you wanted to. Take another look at the intro section on themes where the differences between the two are explained. For the Planet Wrox site, you can't mix the two, because only the Theme (and not the StyleSheetTheme) is overridden dynamically at runtime.

Hope this helps.

Imar