Unable to switch themes after implementing Navigation

January 23rd, 2014, 09:09 AM

After completing chapter 6, my webpage seemed to be working correctly, loading up the correct theme, and dynamically switching themes whenever I selected a different one. I may be wrong in this, but I think something I did during chapter 7: navigation made it so that it only loads in Monochrome. When I select Dark Grey, it shows the new selection in the DropDown, but doesn't change the theme. Also, it no longer "remembers" which theme I select and defaults to Monochrome anytime I reload the page.

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>
                <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowExpandCollapse="False">
                    <LevelStyles>
                        <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
                    </LevelStyles>
                </asp:TreeView>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
            </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">
                    <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;
                }
            }
        }
        switch (Page.Theme.ToLower())
        {
            case "darkgrey":
                Menu1.Visible = false;
                TreeView1.Visible = true;
                break;
            default:
                Menu1.Visible = true;
                TreeView1.Visible = false;
                break;
        }
    }
    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());
    }
}

root Default.aspx

Code:

<%@ Page Title="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>Hi there visitor and welcome to Planet Wrox</h1>
    <p class="Introduction">
        We're glad you're <span class="auto-style1">paying a visit</span> to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the collest music community 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="Login.aspx">log in</a> here</p>
</asp:Content>

BasePage.cs

Code:

using System;
using System.Web;

public class BasePage : System.Web.UI.Page
{
    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.");
        }
    }

    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;
            }
        }
    }
    
    public BasePage()
    {
        this.PreRender += Page_PreRender;
        this.PreInit += Page_PreInit;
    }
}

Web.sitemap

Code:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode url="~/" title="Home" description="Home">
    <siteMapNode url="~/Default.aspx" title="Home"
    description="Go to the homepage" />
    <siteMapNode url="~/Reviews/Default.aspx" title="Reviews"
    description="Reviews published on this site">
      <siteMapNode url="~/Reviews/AllByGenre.aspx" title="By Genre"
      description="All Reviews Grouped by Genre" />
      <siteMapNode url="~/Reviews/All.aspx" title="All Reviews"
      description="All Reviews" />
    </siteMapNode>
    <siteMapNode url="~/About/Default.aspx" title="About"
    description="About this Site">
      <siteMapNode url="~/About/Contact.aspx" title="Contact Us"
      description="Contact Us" />
      <siteMapNode url="~/About/AboutUs.aspx" title="About Us"
      description="About Us" />
    </siteMapNode>
    <siteMapNode url="~/Login.aspx" title="Login"
    description="Log in to this web site" />
  </siteMapNode>
</siteMap>

HTML

HTML Code:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Planet Wrox
</title>

    <script src="/Scripts/modernizr-2.7.1.js"></script>
<link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">
	/* <![CDATA[ */
	#Menu1 img.icon { border-style:none;vertical-align:middle; }
	#Menu1 img.separator { border-style:none;display:block; }
	#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
	#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
	#Menu1 ul.dynamic { z-index:1; }
	#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
	#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
	#Menu1 a.popout-dynamic { background:url("/WebResource.axd?d=YAYach_zykzn7tRotFpEUr0m264rnCVS_wqzm96hS41BU7-6lKuSzllTTwuyDhHe6ISD0VRBc4JVgTyB5VKbdD_iM2r1xRKmMUeBO1TSaw81&t=635116749316159565") no-repeat right center;padding-right:14px; }
	/* ]]> */
</style></head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="HbED8PspK15atpH81MPLnpGA0eyEzpBuKsjVsKBoUNVv9QmRJw9wy4b2Ae8Vy7QlPDuKKo79jZjcUhGB7SJ6Xkl6AOV/2pNUaif3UB/ZYO5KUBN2U/zfiASgrJp5HrVwL8Van5QimLuGiuxiV84lBZkH+hL9p8Dowj4UB9fettPho8bo0cxMgk3KPSomcCHPfcHZ4ieSeAqrTYNT8imXy+AQ9kMUfJSRde95k6V7x5zRV2CpDkF5QKYlIxZt63BH2jGunRZO3i/lmoCb9mPQDNhMunYUgTpPgV6Zi+wceI4kheo107ORBe0NALfJNW3fiyewupWT4MPc/dMZoRJdqJaX0HiBcV+duwxfnx9zsC9KKJyNBf2CBifAos+qde3fPEWJxZbbYnI0NejPxou8FLeVgrBEhg8WPqXXUwS7xlLQcpuQZ8j1FuuIb4Z9QTlCEHTDf9oLpFqyvj3ZOh68Ui8bX1aGpSRxd/sD+vAB1/LTc49dpg7waBuuMCz9FFArHokpD+1d47rmiOw2OEmdYvyCxzw77erI6p6JCuUdX4tJeoaAuf7EFBc4U0axByyvID7tY5hrqeih++lBAxUQ2eZpl+8iu5DXUHUPv40FRdWx7ts21XWsUyAL/YXeprF1WniOepQr/NWSHfDGAdY/fjaFJdLNO+T43OmC6fp78Egqae4CiAEiDwT0EsWF+U/XC0aYjdXeBIWOpDO9vnjPJxooJzu9OInIBj1LTM1n1ToDPW59rYfBzr1zf5muMQk3fsPqWZuuXJdSxOv9QSlwPULZmtfMsWGwdx5uS5JUnsD9mE21x/2LdLqWogf6OrLd0zx14UPiGOnthbi/QJgA9f2EXO/MZJeOB6dVei2gJIQ0EDXfRRUfD0oWMHp6FWK21nZsUQ6uvvVX9yB3GR8iSRYceGK9+tO7Ili/gj+w7ok+7/Vnb2Vz9puWXH0wCNTGBOwYlpdFrSdPn9jtLyk+2ZnCLZChD5q3tV5tgj8z3vFZ42Iuc+5vCCD2y0GxN7jniLWSkvg760X9DibsdPsr0uGlrcmmAGR2TlUxBV5sbqGRjQxT2luQHPfZaL7ySB/rh5WIF5i2fW0feCDCDjQU3+grcCpve8aB673qlsohk2wwh1eYmnZc7TMaHkBQejdUCPuGmrZqfm/upo0y2G8cXm2gHA7HGye5NmsFqwzgw/4Plce06DnhYWuJAhqkbB0HSsUfLdG74MSU1hCzd4GQkKWvd/XbfIphh8Fnnwo8I1/Inb1LbwBVFBOdsWoM2H9udosbMrVsiNrBxrTpyLGDmEHrrgSvi83XP/19w9m236zpQ3sNABpo7jIOhBCHyQMCd5juqP2enygDJShiWajOGKRisgL/jLZNapcQkgcgRGiCFMHhiJF9dkvD7+Zr+hHSi8Bf2h+eUk8wQWFALgDdRnzKdYlLmoWXDoe1EfSB4uBkPy42dpqQ/9xKH5Z5UDgRGgzKH1ZdtIjRGRzxHFqAvsbkmMHQ05j/xPseBFL5ZRw=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



<script src="/WebResource.axd?d=fqV81KWLWhVg-lLAb4IT6wuXiN28PZKDLNaPBUhWMen93DNQaclGMbIKp-JN4KpHRztMfCRu3GeVlC20nJRx2ahPOKEpGPz8M1M173EFUQI1&amp;t=635116749316159565" type="text/javascript"></script>
<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qIMss+jU2+MHc3gJ0JeQTw/8vJ/8EXAUwMxI+Ga9plbpguuiMUrNlSEaYyRD5db4iJsUCKf7fkv0Y9q8hrQt0+C++ItvmwLJ/6BZFJ1oGpQZb0G7InzawuR91RhBgyO+T/8Q/XxigaoqjKCHm7QzV39rg9HQvthiOZc7VY4LQ3E=" />
</div>
        <div id="PageWrapper">
            <header><a href="/"></a></header>
            <nav>
                <a href="#Menu1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a><div class="MainMenu" id="Menu1">
	<ul class="level1">
		<li><a title="Go to the homepage" class="level1 selected" href="/Default.aspx">Home</a></li><li><a title="Reviews published on this site" class="level1" href="/Reviews/Default.aspx">Reviews</a><ul class="level2">
			<li><a title="All Reviews Grouped by Genre" class="level2" href="/Reviews/AllByGenre.aspx">By Genre</a></li><li><a title="All Reviews" class="level2" href="/Reviews/All.aspx">All Reviews</a></li>
		</ul></li><li><a title="About this Site" class="level1" href="/About/Default.aspx">About</a><ul class="level2">
			<li><a title="Contact Us" class="level2" href="/About/Contact.aspx">Contact Us</a></li><li><a title="About Us" class="level2" href="/About/AboutUs.aspx">About Us</a></li>
		</ul></li><li><a title="Log in to this web site" class="level1" href="/Login.aspx">Login</a></li>
	</ul>
</div><a id="Menu1_SkipLink"></a>
                
                
            </nav>
            <section id="MainContent">
                
    <h1>Hi there visitor and welcome to Planet Wrox</h1>
    <p class="Introduction">
        We're glad you're <span class="auto-style1">paying a visit</span> to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the collest music community 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="Login.aspx">log in</a> here</p>

            </section>
            <aside id="Sidebar">
               Select a Theme<br /> <select name="ctl00$ThemeList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ThemeList\',\'\')', 0)" id="ThemeList">
	<option selected="selected" value="Monochrome">Monochrome</option>
	<option value="DarkGrey">DarkGrey</option>

</select></aside>
            <footer>Footer Goes Here</footer>
        </div>
    
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

January 23rd, 2014, 10:17 AM

Also, I know there's other threads related to this same topic. I've read them and was still unable to track down where my mistake was.

Imar · January 25th, 2014, 06:18 AM

Hi there,

Looks like you accidentally removed the SelectedIndexChanged handler from the drop down list. That is, if you change this

Code:

<asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True">

to this:

Code:

<asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">

it should work again.

Hope this helps,

Imar

January 25th, 2014, 08:33 AM

Thank you. I've updated my code as you suggested, though it's still doing the same thing.

Imar · January 25th, 2014, 09:05 AM

Are you testing this code on a page that inherits BasePage? That's required for the theme to be applied.

With the change below, I could make it work in my site, so I am not sure why this doesn't work. Maybe you can make the site's code available as a zip file somewhere so I can take a look?

Cheers,

Imar

January 25th, 2014, 09:27 AM

I've uploaded it here: http://www.filedropper.com/site_2

Imar · January 26th, 2014, 07:42 AM

Hi there,

That ZIP file doesn't contain the site, but only the .sln file and packages.

If you followed along with the book. you want to zip the folder C:\BegASPNET\Site.

Cheers,

Imar