Using a custom ASP.NET base page

This is my second article in my series deconstructing some of the cool features in BlogEngine.NET

Creating your own base Page class which is derived from the System.Web.UI.Page class is nothing new or exciting, so I won’t be going into the concept in detail. If you’re new to the idea, you might want to review a couple of these articles to get an overview:

• Using a Custom Base Class for your ASP.NET Pages' Code-Behind Classes (by Scott Mitchell / 4 Guys From Rolla)
• Four Helpful Features to Add to Your Base Page Class (by Scott Mitchell / dot net slackers)

Frankly, I’ve avoided making use of custom base pages for years. I just never found a need within my applications. But enough about me, let’s take a look at what BlogEngine.NET uses their BlogBasePage for:

/// The class is responsible for assigning the theme to all
/// derived pages as well as adding RSS, RSD, tracking script
/// and a whole lot more.

Okay, so it seems like there may be quite a bit of uses for implementing a custom base page, so let’s review a couple of the things BE.NET has done.

Injecting code into the page header

Part of BE.NET’s settings allow the blog owner to include custom code to the HTML head section of each page. The completely slimmed down version looks something like this:

public abstract class BlogBasePage : System.Web.UI.Page
{
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        AddCustomCodeToHead();
    }

    // Adds code to the HTML head section.
    protected virtual void AddCustomCodeToHead()
    {
        string code = string.Format("{0}<!-- Start custom code -->{0}{1}{0}<!-- End custom code -->{0}",
            Environment.NewLine, "your custom code here");
        LiteralControl control = new LiteralControl(code);
        Page.Header.Controls.Add(control);
    }
}

This will inject the following into your HTML header, just above the </head> tag:

<!-- Start custom code -->
your custom code here
<!-- End custom code –->

Registering a tracking script

Similar to above, BE.NET calls it’s AddTrackingScript() method during the OnLoad event, which calls ClientScript.RegisterStartupScript() to add a tracking script, such as Google Analytics, near the end of your HTML form.

ClientScript.RegisterStartupScript(this.GetType(), "tracking", "\n" + 
    "your tracking script here", false);

Compressing and removing CSS whitespace

Okay, so the base page does not perform the actual compression or whitespace removal, but it is where all of the referenced .css files in the page replaced with link to a compressed version.  BE.NET has a css.axd http handler which does the whitespace removal and compression. Perhaps that will be the focus of it’s own article some day.

CompressCSS() is the last method to be called during the Onload event:

/// <summary>
/// Finds all stylesheets in the header and changes the
/// path so it points to css.axd which removes the whitespace.
/// </summary>
protected virtual void CompressCss()
{
    foreach (Control control in Page.Header.Controls)
    {
        HtmlControl c = control as HtmlControl;
        if (c != null && c.Attributes["type"] != null && c.Attributes["type"].Equals("text/css", StringComparison.OrdinalIgnoreCase))
        {
            if (!c.Attributes["href"].StartsWith("http://"))
            {
                c.Attributes["href"] = "css.axd?name=" + c.Attributes["href"];
                c.EnableViewState = false;
            }
        }
    }
}

I hope this can get you thinking about the uses you may find for implementing your own custom base page.

I will leave this article without a live demo and source code, mostly because the CSS compression isn’t complete without the implementation of the CSS HTTPHandler and because Scott Mitchell has a full source code example in his posts mentioned above.