Apply page theme

ryanburnett · September 10th, 2010, 03:02 PM

Hi Imar, I think I'm just running into constant problem on my second read though of this book! Im on Chapter 6 now, on the programmatically changing the themes. I have done the drop down list, cookies and the page class, of which it inherits, with some code that should apply the theme from a cookie in the page pre init stage of the life cycle. The first problem is that the cookie isnt implementing the previous state of the drop down list on a page refresh, its just being stored in the view state. The second, which may be seen as the biggest, is that it dosent work

Anyways here are my files!

I'm keeping you busy lol...

~/Masterpages/Default.master

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="Masterpages_Default" %>
<!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="wrapper"> <asp:Label ID="Label1" runat="server" />
        <div id="top">
            <div id="navigation">
                <ul>
                    <li><asp:HyperLink ID="HyperLink2" NavigateUrl="~/Browse/" runat="server">Browse</asp:HyperLink></li>
                    <li><asp:HyperLink ID="HyperLink1" NavigateUrl="~/Browse/" runat="server">Browse</asp:HyperLink></li>
                    <li><asp:HyperLink NavigateUrl="~/Browse/" runat="server">Browse</asp:HyperLink></li>
                </ul>            
            </div><!-- End of Navigation -->
            <div id="header">
                <asp:HyperLink NavigateUrl="~/" runat="server">
                    <asp:Image ImageUrl="~/App_Themes/Default/Images/logo.png" runat="server" />
                </asp:HyperLink><!-- End of Logo -->
                <div class="advert">
                    <asp:HyperLink NavigateUrl="http://www.woothemes.com/" runat="server">
                        <asp:Image ID="Image1" ImageUrl="~/App_Themes/Default/Images/468x60a.jpg" runat="server" />
                    </asp:HyperLink>
                </div><!-- End of Top Ad -->
            </div><!-- End of Header -->
        </div><!-- End of Top -->

        <div class="content">
            <div class="main-content">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
                </asp:ContentPlaceHolder>
            </div><!-- End of Main Content -->
            <div id="sidebar">
                <span>Select a theme:</span>
                <asp:DropDownList ID="ThemePicker" AutoPostBack="true" SelectedIndexChanged="ThemePicker_SelectedIndexChanged" Width="100%" runat="server">
                    <asp:ListItem>Default</asp:ListItem>
                    <asp:ListItem>Dark</asp:ListItem>
                    <asp:ListItem>Green</asp:ListItem>
                    <asp:ListItem>Red</asp:ListItem>
                </asp:DropDownList>
            </div><!-- End of Sidebar -->
        </div><!-- End of Content -->
    </div><!-- End of Wrapper -->
</form>
</body>
</html>

~/Masterpages/Default.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_Default : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string selectedTheme = Page.Theme;
            HttpCookie themeOption = Request.Cookies.Get("ThemeOption");
            if (themeOption != null)
            {
                selectedTheme = themeOption.Value;
            }
            if (!string.IsNullOrEmpty(selectedTheme) && ThemePicker.Items.FindByValue(selectedTheme) != null)
            {
               ThemePicker.Items.FindByValue(selectedTheme).Selected = true;
            }
        }
    }

    protected void ThemePicker_SelectedIndexChanged(object sender, EventArgs e)
    {
        HttpCookie themeOption = new HttpCookie("ThemeOption");
        themeOption.Expires = DateTime.Now.AddMonths(3);
        themeOption.Value = ThemePicker.SelectedValue;
        Response.Cookies.Add(themeOption);
        Response.Redirect(Request.Url.ToString());
    }
}

~/Default.aspx

Code:

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>Hello this is some test content!</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="Default"></pages>
        <compilation debug="false" targetFramework="4.0" />
    </system.web>
</configuration>

~/App_Code/BasePage.cs

Code:

using System;
using System.Web;

/// <summary>
/// Summary description for BasePage
/// </summary>
public class BasePage : System.Web.UI.Page
{

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

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

Then I have App_Themes containing two themes call Default and Dark. They both have sub folders call Images and a stylesheet.

I hope you can spot an error that I am totaly stumped off lol. I think its gunna need yet another re-read (the whole book).

Oh, Imar, from the last thread. I wasnt intending on being narrow minded on the VB.net syntax, its just so radically different than anyother. I will probably learn it for freelancing and updating current VB.net application. (If I ever get any good at ASP.net that is)....

Thanks again! / Ryan

Imar · September 11th, 2010, 05:30 AM

Isn't it as simple as this:

Code:

 
HttpCookie themeOption = Request.Cookies.Get("ThemeOption");
if (themeOption != null)
{
  Page.Theme = "Dark";
}

If there *is* a cookie, you assign a hard code value of Dark instead of assigning the cookie's value. If the cookie doesn't exist, you do nothing (so the default theme is applied).

Quote:

The first problem is that the cookie isnt implementing the previous state of the drop down list on a page refresh, its just being stored in the view state.

I don't understand what you mean with this or what the problem is....

Cheers,

Imar

ryanburnett · September 11th, 2010, 01:38 PM

Hi Imar,

What I meant was... we put a drop down list in with all of the avaliable themes right? In the book you use a cookie to apply the selected theme and to select that theme from the list. My problem is that on refresh the selected theme in the drop down list is comming from the viewstate, and if I close the browser and re-open it its back to it first index, not the currently applied theme? Is there any problems with my code that stand out to you?

Thanks so much! / Ryan

ryanburnett · September 11th, 2010, 01:40 PM

Oh and btw, the theme is hard coded

here:

Code:

Page.Theme = "Dark";

so I could test if it was even working and I just fogot it was like that and never changed it back to themeOption.Value

Basically the list is not applying the theme. Is the cookie code correct? :S

Imar · September 11th, 2010, 03:13 PM

In that case, can you repost the full, current code you're having problems with? There's not much point in debugging code that's not the real code you're having problems with....

Or better yet: upload the sample site in a zip to some shared drive like a Live Skydrive. Makes it easier to run the example for me....

Cheers,

Imar

ryanburnett · September 12th, 2010, 04:20 PM

Sorry for the slow reply Imar, I uploaded the site to my SkyDrive... as you can see the theme dosent change when you select it in the drop down list

http://cid-647d386f1e018f08.office.l...ic/WooTube.zip

Imar · September 13th, 2010, 02:54 AM

Hi there,

Take a look at this:

Code:

 
<asp:DropDownList ID="ThemePicker" AutoPostBack="true" 
     SelectedIndexChanged="ThemePicker_SelectedIndexChanged" Width="100%"  runat="server">
  <asp:ListItem Value="Default" />
  <asp:ListItem Value="Dark" />
</asp:DropDownList>

The SelectedIndexChanged is not valid; it should be OnSelectedIndexChanged. Without On, the method in Code Behind is never called when the page posts back, and thus the cookie is never created.

Cheers,

Imar

ryanburnett · September 13th, 2010, 11:33 AM

Well I deserve a slap!

Thanks again Imar!

Edward Colins · September 17th, 2010, 07:56 AM

Hi i tried this try it out and i really cant get any results.........
i thought i would be a genius and try it on my own,
my code in the Preinit is like this :

Code:

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

and in the Page load is like this :

Code:

 protected void Page_Load(object sender, EventArgs e)
    {
        ThemeList.SelectedValue = Page.Theme; 
    }

and in the drop down list event is :

Code:

protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
    {
        HttpCookie PreferedTheme = new HttpCookie("PreferedTheme");
        PreferedTheme.Expires = DateTime.Now.AddMonths(3);
        PreferedTheme.Value = ThemeList.SelectedValue;
        Response.Cookies.Add(PreferedTheme);
        Response.Redirect(Request.Url.ToString());
    }

my own point of view is : the drop down list makes a new cookie sets its properties and adds it to the users' cookies then loads the page again, when the page loads, the preinit fires, and checks if there is a cookie called "PreferedTheme" it will put it as the page's theme, if not it's going to be default theme. then when the page loads, the drop down list's value = page.theme... isn't this what is actually happening? why when i did this the drop down list posts back and nothing happens on the site and the value of drop down list doesn't change?

any help?

Imar · September 17th, 2010, 08:02 AM

Hi there,

Can you post the other relevant bits of your code such as the full code for the BasePage class and the code behind and DropDownList definition of the Master Page?

Cheers,

Imar