Dynamically switching themes

KingJames978 · March 8th, 2012, 05:33 PM

I am having trouble switching page themes using the
Dropdown list. The page loads as Monochrome and when I try to switch to DarkGrey, the page stays as monochrome. Here is my code for files that involve the DropDownList.

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 id="Head1" 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 id="A1" href="~/" 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" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
        <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;
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_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.");
        }
    }

    private void Page_PreInit(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = Response.Cookies.Get("PreferredTheme");
        if (preferredTheme != null)
        {
            Page.Theme = preferredTheme.Value;
        }
    }

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

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>
        <compilation debug="false" targetFramework="4.0" />
        <pages theme="Monochrome" ></pages>
    </system.web>
</configuration>

I tried removing the styleSheetTheme in the pages script on page 231 step 4. and the page still stays as monochrome. Any idea what is keeping the Drop down menu from switching from Monochrome to DarkGrey?

(Is there a way to attach a screenshot of my solution explorer ?)

Imar · March 8th, 2012, 05:53 PM

Hi there,

Take a look at this:

Code:

  private void Page_PreInit(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = Response.Cookies.Get("PreferredTheme");
        if (preferredTheme != null)
        {
            Page.Theme = preferredTheme.Value;
        }
    }

You're trying to read from the Response.Cookies collection while you should read from the Request.Cookies collection.

Quote:

(Is there a way to attach a screenshot of my solution explorer ?)

Technically yes, but I think that feature is limited to Wrox staff and authors. There are plenty sites available where you could post an image though, and then provide a link here.

Cheers,

Imar

KingJames978 · March 9th, 2012, 04:21 PM

I changed the Pre_Init event in BasePage.cs from:

Code:

HttpCookie preferredTheme = Response.Cookies.Get("PreferredTheme");

to

Code:

HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");

and the DropDownList still doesn't switch from monochrome to dark grey.

I have links to show images each of the code files

Frontend.Master
http://s1257.photobucket.com/albums/...tendmaster.png

Frontend.Master2
http://s1257.photobucket.com/albums/...endmaster2.png

web.config
http://s1257.photobucket.com/albums/...Dwebconfig.png

Basepage.cs
http://s1257.photobucket.com/albums/...BasePagecs.png

Solution Explorer
http://s1257.photobucket.com/albums/...plorer3912.png

Solution Explorer2
http://s1257.photobucket.com/albums/...lorer23912.png

Imar · March 10th, 2012, 03:54 AM

Hi there,

Is the page you're testing this on inheriting the BasePage? Can you post the code for that page?

While the screenshots for the Solution Explorer etc are useful, they are not so good for code. It makes it impossible to copy your code into my site and see what's wrong, or use search for example.

Cheers,

Imar

KingJames978 · March 13th, 2012, 03:14 PM

It does inheirit from the BasePage. Here is the latest code from BasePage.cs and Frontend.master.cs

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_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.");
        }
    }

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

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

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) && 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());
    }
}

Imar · March 13th, 2012, 04:04 PM

Maybe your browser doesn't accept cookies? Try it in a different browser and see if that works. I just copied your code into a new site, made sure that Default.aspx.cs was inheriting BasePage (you didn't post the code so I can only hope you understood me correctly), replaced Response with Request, added the themes, hit F5 and it worked....

Imar

KingJames978 · March 14th, 2012, 11:09 AM

I tried Firefox and IE and both of them accepts cookies and still get the same problem with the drop down list. I didn't attach a copy of my Default.aspx.cs code yet and I changed the public partial class from System.Web.UI.Page to BasePage

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)
    {

    }
}

Now I get the error when I run Default.aspx in Firefox "Server Error in '/' Application.
Page title cannot be "Untitled Page" or an empty string." and highlights the string in red from BasePage.cs.

Code:

throw new Exception("Page title cannot be \"Untitled Page\" or an empty string.");

The public partial class inheritance changed help solve the problem?

Imar · March 14th, 2012, 11:15 AM

Quote:

and I changed the public partial class from System.Web.UI.Page to BasePage

Ah, that explains it, and was what I meant with the BasePage earlier. Inheriting from BasePage gives your page the "apply selected theme" behavior through the code in BaseBage.cs.

Earlier in the book you enhanced BasePage to check for empty titles and throw an exception. You can fix this by giving your page a Title in the @Page directive in Markup View.

Hope this helps; looks like you're almost there.
Imar

KingJames978 · March 14th, 2012, 02:24 PM

On page 212, in step 6 I replaced all occurrences of System.Web.UI.Page with BasePage except the BasePage.cs file where we need System.Web.UI.Page. Then when I realized in step 7 where any pages that have an empty title attribute gives the error "Server Error in '/' Application. Page title cannot be "Untitled Page" or an empty string." Then I checked Default.aspx and I realized I had an empty title attribute which I filled in with Planet Wrox:

Code:

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

I noticed the login page working like it should which gave me the idea to check for an empty title in Default.aspx. Now the DropDownMenu work great now. I thank you so much for the help.

Imar · March 15th, 2012, 03:23 AM

You're welcome. Glad it's all working now.

Cheers,

Imar