Changing Themes

Many Web sites are moving toward letting the user perform some configuration tasks. One of the more interesting changes an ASP.NET developer can provide is multiple themes. A user could view your Web site using one of several predefined themes, including using no theme at all (which would be a good choice for those who use screen readers). The only problem is that Microsoft doesn't make this process especially easy or straightforward.

The secret to changing a theme is to understand when ASP.NET needs the information. If you try to change the theme during the Page.Load() event, it's too late. In fact, the environment generates an error, rather than simply ignoring the problem. The event you need to handle is Page.PreInit(). Unfortunately, you can't access any of the controls on the form during this event; they don't exist yet.

The best way to approach the problem is to provide a control on screen, such as a drop-down list box. Set the AutoPostBack property for this control to true, so that any change automatically posts the page back to the server. You'll need to create three pieces of code behind to handle this particular requirement, starting with the SelectedIndexChange() event handler shown here.

protected void ddlSelect_SelectedIndexChanged(
   object sender, EventArgs e)
{
   // Create a cookie to hold the selected theme.
   HttpCookie SelTheme;
   SelTheme = new HttpCookie("Theme");

   // Get the selected theme.
   SelTheme.Value = ddlSelect.SelectedValue;
   SelTheme.Expires = DateTime.Now.AddMonths(1);

   // Save the cookie.
   if (Response.Cookies["Theme"] == null)
      Response.Cookies.Add(SelTheme);
   else
   {
      Response.Cookies.Remove("Theme");
      Response.Cookies.Add(SelTheme);
   }

   // Reload the Web page.
   Response.Redirect("Default.ASPX");
}

All that this code does is save the current drop-down list box selection as a cookie. It then redirects the response back to the current page. Changing the theme requires a trip back to the server, because you can't render the Web page again. Notice that this code uses the Response object, not the Request object.

The next step in the process is to initialize the page. This process occurs during the pre-initialization process, so you must handle the PreInit() event, as shown here.

protected void Page_PreInit(object sender, EventArgs e)
{
   // Retrieve the theme name if present.
   String ThemeName;
   if (Request.Cookies["Theme"] != null)
      ThemeName = Request.Cookies["Theme"].Value;
   else
      return;

   // Change the page theme to match.
   switch (ThemeName)
   {
      case "None":
         this.Theme = ";
         break;
      case "BasicBlue":
         this.Theme = "BasicBlue";
         break;
      case "SmokeAndGlass":
         this.Theme = "SmokeAndGlass";
         break;
      case "MyTheme":
         this.Theme = "MyTheme";
         break;
   }
}

In this case, the code retrieves the cookie that contains the name of the theme, and then places it in a string. The code uses a switch statement to choose the correct theme from the list. You might wonder why I didn't simply place the string directly into the theme. This code provides a certain level of security; it won't select a non-existent theme, even if someone changes the cookie.

Now that you've changed the theme, it's important to perform one last task: make the theme name on the Web page match the one used for rendering. To perform this task, you have to add code to the Page.Load() event handler, as shown here.

protected void Page_Load(object sender, EventArgs e)
{
   // Don't perform any processing on a postback.
   if (this.IsPostBack)
      return;

   // Retrieve the theme name if present.
   String ThemeName;
   if (Request.Cookies["Theme"] != null)
      ThemeName = Request.Cookies["Theme"].Value;
   else
      return;

   // Set the value of ddlSelect.
   switch (ThemeName)
   {
      case "None":
         ddlSelect.SelectedIndex = 0;
         break;
      case "BasicBlue":
         ddlSelect.SelectedIndex = 1;
         break;
      case "SmokeAndGlass":
         ddlSelect.SelectedIndex = 2;
         break;
      case "MyTheme":
         ddlSelect.SelectedIndex = 3;
         break;
   }
}

An important consideration in this case is not to perform any processing during a post back. Otherwise, you'll overwrite the current theme selection with the selection in the cookie. The Page.Load() event occurs before the SelectedIndexChange() event. Consequently, if you don't check for a post back, you'll end up reusing the same value.

When the page isn't a post back, such as when you redirect it using the Response.Redirect() method, the code retrieves the name of the theme from the cookie. Again, this code uses the switch statement to ensure no one can select a non-existent theme.

The Bottom Line

This article has only scratched the surface of what you can do with master pages and themes. Combining these two powerful ASP.NET 2.0 features with a content page produces output that's definitely simpler to work with than defining each page separately. Once you define the master page and theme, all anyone has to worry about is creating content. It really is that simple.