Many ASP.Net developers are faced with the following problem: people around you (customers or managers) are telling you website "X" has cool feature "Y" and they want you to include it in your websites. Usually this is about Rich Internet controls. However, replacing those controls is not always simple, since you are ‘stuck’ with the standard ASP.Net control set with no or limited dynamic behavior.

Replacing those ASP.Net controls in your existing code is not only a lot of work but also introduces the risk of introducing new bugs. If only you could quickly replace your controls with the nice Backbase controls with a minimal risk of breaking your application. Fortunately, Backbase enables you to do exactly this using a technique called ‘Progressive Enhancement’. This article will help you to get started doing this.

Prerequisites and Intended Audience

This example is intended for anyone interested in Ajaxifying existing ASP.Net applications using the Backbase Progressive Enhancement method.

Backbase Prerequisites

• Backbase Client Framework
• Intermediate level experience with the Backbase Client Framework

ASP.Net Prerequisites

• Microsoft .Net Framework v2.0 or higher
• Microsoft Visual Studio 2005 or similar
• Intermediate level experience with ASP.Net

What is Progressive Enhancement?

Progressive Enhancement – also called HTML Enhancement – is the technique to enhance your existing HTML pages with minimal code change. You only tell the Backbase Client Framework what rules it should use for the enhancement.

The Backbase enhancement process is as follows:

• Your web server is executing your ASP.Net code and as a result returning an HTML page to the client browser. Note that the HTML page will include Backbase widgets (BTL in this case).
• The browser loads this HTML page.
• Like with any Backbase application, the JavaScript Client Engine is loaded and started.
• The Client Engine parses the HTML / BTL to find the enhancement rules.
• Based on the rules, it will replace HTML tags with Backbase widgets. Note that these HTML tags here are often not tags you wrote directly but generated based on your ASP.Net server controls.

As an example, this way we can easily enhance an ASP.Net DropDownList control:

Usually, you will want to translate a whole group of controls into their Backbase counterparts. However, it would be too rudimentary to just always translate certain tags. That is why the enhancement rules use the notion of CSS classes to determine what tags to include in what enhancement rule.

Example Application

For this example, we assume that we have an existing ASP.Net form with some input controls on it. In this case, we use a simple form that requires you to enter some personal information:

Enabling Backbase

The first step is to include the Backbase Engine in every page we want to enhance. You might consider creating a master page that deals with this, which you can re-use in your project if you have multiple pages that will require Progressive Enhancement. In this example, we will be using the following master page:

Next, since we are now using a master page, we have to modify our personal information form from a complete page to a content page for this master page. Therefore, we must strip everything around the form tag and put it inside an Asp:Content tag:

Now we can run it and check the result, which may not look very interesting, since it appears the same as the original form. However, you may have noticed the slight ‘flash’ of showing code. This shows us that the Backbase Client Framework is booting and busy parsing the code. Of course, this flash can easily be avoided in your final application.

Using Html Enhancement

The next step is to create the content page that will be placed in the ContentPlaceHolder, which contains the Progressive Enhancement:

The PersonalInformation_Enhanced.aspx Explained

Below is a code snippet from the enhanced form:

In the second line, we declare the actual command to perform the enhancement. The select attribute points to the HTML element that we want to enhance (including its children) and the rules attribute refers to the ruleset we should use. This ruleset is declared immediately after the b:enhanceHTML command. In every rule, we can specify the name of the CSS class to which the rule applies. The localName and ns specify the tag to which it will be translated.

In this example, we translate all tags with CSS class comboinput to the <b:comboBox /> tag (where b is the most common prefix for the BTL namespace). However, this is not sufficient, since the <b:comboBox /> tag requires <b:comboBoxOption /> tags as its children. Therefore, we have the next rule to do exactly this.

Note that we can copy attributes from the original tag or create additional attributes on the destination tag using the <b:enhanceHTMLAttribute /> tag.

Using b:xhtml

As you may have noticed, we have wrapped the form elements inside a <b:xhtml /> tag. This tag is designed to prevent its content from being parsed by the Backbase Client Framework.

The reason we need to prevent this is because we will be reconstructing the element using Progressive Enhancement. During this process, the enhanced element will get the same ID as the element it is replacing. Without the <b:xhtml /> tag, our form elements would already have been constructed and a duplicate build of the same instance would occur (based on the ID attribute), which will result in a warning message thrown by the Backbase Client Framework.

To ensure that the controls inside the <b:xhtml /> tag are sent back to the browser, we also enhance the normal XHTML input controls.

More Advanced HTML Enhancement

In the previous section, we showed the concept of HTML Enhancement. However, the example application was not that spectacular. But remember that you need not translate a control to its exact Backbase counterpart; you can do any kind of translation. In this last example, we convert a simple <asp:TextBox /> for entering your age into a nice spinner and we convert an <asp:DropDownList /> to select the number of children into a cool slider! All we need is the following rules, which are very similar to the rules in the previous section:

For another HTML Enhancement example, refer to the importHtml demo in the Backbase Client Framework distribution. It is not using ASP.Net and it may seem a bit complex at first, but after the simpler examples described here, you should be able to understand the code. Now it is up to you to be creative and think of all the advanced possibilities for your own web applications.

Additional Resources

• Progressive Enhancement Demo