Recently I've been playing around with the new ASP.NET 2.0 CSS Friendly Control Adapters as I loath the bloated and overly complex table based markup that so many WebControls render by default. After building a test website using the Web Site template that is included with the adapter's v1.0 download I decided to incorporate them into a project I'm currently work on.

There is a good white paper that walks you thru integrating the adapters into your existing web site that I followed step-by-step... almost. First off, my site was using the Web Application Project model, not the Web Site Project model that all the samples use. (I'll post about that later.)

Copy the CSS Files

The guide says to copy the entire CSS folder (which contains some generic styles that make the controls work) to the root of your site. I didn't want to do this because I like nice, clean directory structures. And seeing as the project already had a Styles directory, I saw no reason to add a redundant CSS directory. It's all about the re-use!

I created a new subdirectory called Adapters, and the entire contents of the CSS folder from the example site into the new directory on my site. All of those style sheets now called <siteroot>/Styles/Adapters/ home.

As the white paper explains, you'll need to add a new <link ... /> element to your MasterPage (or whatever your application uses to wrap all pages) so the browser knows to load those CSS files. Pretty standard operation.

Copy the JavaScript Files

For the same reason that I didn't want create the CSS directory, I didn't want to copy the JavaScript folder into my site root. However, unlike the CSS files I couldn't find any documentation that explained how to tell the adapter code to look in my <siteroot>/Scripts/ directory, rather than the default <siteroot>/Scripts/ <siteroot>/JavaScript/ directory.

Not to fear. I took a quick peak under the hood and saw the following code in the WebControlAdapterExtender class: (sorry the formatting is so bad, but I wanted it to fit on the screen)

string folderPath =
    WebConfigurationManager.AppSettings.Get(
        "CSSFriendly-JavaScript-Path");
if (String.IsNullOrEmpty(folderPath))
{
    folderPath = "~/JavaScript";
}
string filePath = folderPath.EndsWith("/") ? 
    folderPath + "AdapterUtils.js" : 
    folderPath + "/AdapterUtils.js";
AdaptedControl.Page.ClientScript.RegisterClientScriptInclude(
    GetType(), 
    GetType().ToString(), 
    AdaptedControl.Page.ResolveUrl(filePath));

Score! The adapters use a key/value pair from the web.config's appSettings section to determine where the adapter JavaScript lives. All I had to do was add a key/value pair to my application's config file. Here is the one I used:

<add key="CSSFriendly-JavaScript-Path" value="~/Scripts/Adapters/"/>

And just like that, my controls were spitting out lean, clean CSS friendly markup... instead of puking out that garbled table-based crap.

All that was left to do was style my controls. I ended up adding a new CSS file for each control, and then dumped each of those files into the site's App_Themes folder.