Dynamic Themes in ASP.Net 2.0

There are a few good articles out there about changing page themes dynamically in ASP.Net 2.0. Sue’s is the best and helped me get to the point of creating my own method of handling this. The problem I had with Sue’s is that it was less of a real world example and more of a generic howto. For me building an enterprise web app I am using themes to allow customizations by the various clients using it. Sue’s example shows how to change based on a dropdown list. Unfortunately it was not that easy for me.

The themes I am loading on demand are based on database values, query strings, and cookies. When a user logs in, I need to know who they are and what theme to apply. But first things first, the base page. The easiest way to accomplish this feat is to create a custom BasePage class for which all the other pages in your application will inherit.

For my purposes:

public class BasePage : System.Web.UI.Page
{
    protected override void OnPreInit(EventArgs e)
    {
        try
        {
            base.OnPreInit(e);

            int intClientId =0;

            if (Request.Cookies["ClientID"] != null)
            {
                intClientId = Convert.ToInt32(Session["ClientId"]);
            }
            else if (Request["id"] != null)
            {
                intClientId = Convert.ToInt32(Request["id"]);
            }

            if (intClientId != 0) Page.Theme = intClientId.ToString();
                else Page.Theme = "Default";
        }

        catch (Exception ex)
        {
            Page.Theme = "Default";
        }
    }
}

Okay, so let’s dissect this. Essentially I am first checking for ClientId in a cookie, then in the query string. If neither are present than I will load the default theme. And, if there is an error, I load the default theme. You’ll always want to load a default in the instance there is an error.

Another trivial issue with this (which I’ll admit took the longest to figure out), was that the stylesheet within the theme’s directory is to be named the same as the theme. For instance, here is my App_Themes (default theme directory) folder structure with a theme for the available ClientId.

+ App_Themes
   + 1
      - 1.css
      - controls.skin
   + 2
      - 2.css
      - controls.skin
   + etc

Note the stylesheets are named respective to their theme. I had had all stylesheets named style.css thinking by loading the appropriate theme, it would load the appropriate stylesheet in the directory. This is not the case.

So once you have the BasePage class created under the App_Code directory and your various themes created you are set to go. Now you have to set all the pages in your app to inherit from the BasePage class you have just created. Like so..

public partial class Portal : BasePage //inherits from our newly created base page class
{
    protected void Page_Load(object sender, EventArgs e)
    {
          // page load stuff
    }
}

Note: You cannot have a master page inherit from your base class because master pages do not have the OnPreInit event.

As usual, if you have any questions, email me at abrudtkuhl[at]gmail.com.

tags: .net, asp.net, web development