Click here to Skip to main content
Click here to Skip to main content
Go to top

Adding a Build Banner to ASP.NET Pages

, 1 Feb 2008
Rate this:
Please Sign up or sign in to vote.
This article explains a pluggable way to place a banner on pages built in debug mode, without making any code changes.
Sample Image - maximum width is 600 pixels

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Adam Langley
Software Developer (Senior)
New Zealand New Zealand
"Find a job you love, and you'll never work a day in your life."
 
Adam Langley is a software engineer in Auckland, New Zealand.
 
Software development is his personal passion, he takes pride in his work, and likes to share his experiences with the development community.
 
When he's not coercing computers, you'll find him riding his motorcycle, or attempting to carve something creative from bone.

Comments and Discussions

 
QuestionCustomizing for multiple environments like Development, QA, Staging etc? PinmemberRaghu Karupakala2-Jan-09 6:11 
GeneralNice work, very useful PinmemberCarl Reid8-Feb-08 3:46 
GeneralRe: Nice work, very useful PinmemberAdam Langley8-Feb-08 20:44 
GeneralRe: Nice work, very useful PinmemberMatt Sollars20-Feb-08 9:47 
GeneralVersion is always 0.0.0.0 Pinmemberm1ke c6-Feb-08 3:02 
AnswerRe: Version is always 0.0.0.0 PinmemberAdam Langley6-Feb-08 10:10 
AnswerRe: Version is always 0.0.0.0 PinmemberKanedogg086-Feb-08 16:24 
GeneralRe: Version is always 0.0.0.0 Pinmemberbibbynet19-Feb-08 19:47 
QuestionRe: Version is always 0.0.0.0 PinmemberAdam Langley19-Feb-08 20:23 
GeneralRe: Version is always 0.0.0.0 Pinmemberbibbynet20-Feb-08 6:38 
GeneralAwesome Idea! Pinmember Vasudevan Deepak K5-Feb-08 22:26 
GeneralGetCustomAttributes PinmemberEd.Poore3-Feb-08 12:15 
GeneralThanks Pinmemberabyssalnightmare31-Jan-08 9:15 
GeneralLove It - Small Change I Made PinmemberJohn Knaack30-Jan-08 8:59 
GeneralRe: Love It - Small Change I Made PinmemberAdam Langley30-Jan-08 10:08 
GeneralRe: Love It - Small Change I Made Pinmemberabyssalnightmare31-Jan-08 10:33 
GeneralRe: Love It - Small Change I Made PinmemberAdam Langley31-Jan-08 10:54 
GeneralRe: Love It - Small Change I Made Pinmemberabyssalnightmare1-Feb-08 2:16 
GeneralGreat Idea Pinmembermerlin98130-Jan-08 4:15 
GeneralFixed instead of absolute Pinmemberthany.org29-Jan-08 23:37 
GeneralRe: Fixed instead of absolute PinmemberAdam Langley30-Jan-08 10:05 
Generalgood thing Pinmemberasen5129-Jan-08 22:41 
Generalcool PinmemberPragenshMPatel29-Jan-08 21:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 1 Feb 2008
Article Copyright 2008 by Adam Langley
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid