Adding a Build Banner to ASP.NET Pages

• Download demo project - 5.35 KB
• Download source - 44.88 KB

Introduction

Developing Web applications is often a very dynamic process, and the 'instantly available' nature of the technology lends itself to iterative development processes, and frequent publication.
When deploying a build for UAT (User Acceptance Testing), it is helpful to display to customers something to remind them the current build is a debug build for a number of reasons:

1. If a version number is shown in this banner, this can be easily referred to when submitting feedback.
2. Build versions will often perform poorly compared to release versions of the same assemblies, the banner may explain this.
3. The user may accidentally use the test site thinking it is the live one, or vice versa (this happens often!), the banner makes this obvious.

This document explains, and provides fully functional code, for a plugin to the HTTP pipeline which will render such a 'development banner' to any ASPX page in the website in question.
The only requirement is to add the appropriate configuration to the Web.config file, and ensure the banner assembly is in the sites bin directory.

The example banner is added to the page as a floating corner image, so as not to interrupt the layout of the page. The image, ALT text, and JavaScript are all stored as embedded resources in the final assembly, making this a completely standalone, and modular tool.

Background and Prerequisites

Basic knowledge of ASP.NET is required, and a rudimentary understanding of the HTTP pipeline would be helpful, but is not mandatory. In fact, if you wish to just start using the sample, you can download the completed assembly and skip straight to the "Configuration" section below!

Floating an Image

The banner image to be placed on the Web page is simply a partially transparent PNG, surrounded by an absolutely positioned DIV, which is aligned to the top-right hand corner of the page. JavaScript is used to place the required HTML on the page, rather than inserting the HTML directly into the hypertext stream.

<div style="Position: absolute;Top: 0;Right: 0;
    Background: transparent;Filter: Alpha(Opacity=60);-moz-opacity:.60;opacity:.60;">
    <img src="{0}" alt=\"development build: version {1}\" />
</div>

String formatting is used to insert the URL of the banner image, and the alternate text, into the HTML string.

// obtain the version number of the executing assembly, 
// so that it may be used in the banners alternate text 
Version version = page.GetType().BaseType.Assembly.GetName().Version;

// retrieve the banner HTML from the localized resources, 
// inserting a dynamic URL for the image, and the alternate text
string szHtml = string.Format(BuildConfigurationBannerResources.BannerHtml, 
    page.ClientScript.GetWebResourceUrl(GetType(), 
    "Common.Web.Resources.BannerImage.png"), version);

// register a JavaScript that will insert the HTML into the DOM 
// after the page has loaded.
page.ClientScript.RegisterStartupScript(GetType(), "DevelopmentBanner", 
    string.Format("Event.observe(window, 'load', function()
        {{new Insertion.Bottom($(document.body), '{0}');}});", szHtml), true);

The HTTP Pipeline: Manipulating ASP On The Fly

The HTTP pipeline is an execution sequence in ASP.NET, ordering the sequence of execution when servicing an HTTP request.
Put basically, an HTTP module is an implementation of the IHttpModule interface, configured to be merged into this execution sequence via the Web.config, allowing developers to easily add functionality into this pipeline.

We are going to use an HTTP module to register our custom JavaScript on all ASP.NET pages that are serviced by the runtime.

The pipeline event we are interested in is PreRequestHandlerExecute, wherein we will attach our custom JavaScript. We could manipulate the HTML content directly, however there is no need to incur the complexity of parsing HTML, when we can simply use the C# Page object model - which will in turn take care of HTML output.

We can access the Page object through the Context Handler of the application, this will be a Page instance in the case of the request being for an ASPX page (as opposed to an AXD, or some other runtime mapped URL type).

IHttpHandler handler = application.Context.Handler;
if (handler is Page)
{
    Page page = handler as Page;
    if (IsAssemblyDebugBuild(page))
    {
        ...
    }
}

Deciding Whether to Show or Hide the Banner

To determine whether the Web application assembly is a Debug build, the following code looks for the DebuggableAttribute on the assembly - which is inserted by the .NET compiler during debug builds.

private bool IsAssemblyDebugBuild(Page page)
{
    foreach (Attribute att in 
        page.GetType().BaseType.Assembly.GetCustomAttributes(false))
        if (att is System.Diagnostics.DebuggableAttribute)
            return (att as System.Diagnostics.DebuggableAttribute).IsJITTrackingEnabled;
    return false;
}

Configuration

To configure your Web application to use the banner, ensure the banner assembly is in your Web application's bin directory, and place the following XML in the Web.config file.

 <httpModules>
   <add name="Banner" type="Common.Web.Modules.BuildConfigurationBannerModule, 
        Common.Web"/>
 </httpModules>

This is all that is required, and all Web pages in your application will have the banner applied to it, when built as a Debug assembly.

History

• 2007.01.30: Initial publication