ASP.NET 2.0 CSS Friendly Control Adapters 1.0

Version information

This version was last updated on 20 November 2006.

If you downloaded the original version on 4/27/2006 (Beta 1) please update your bits immediately.

Download the source

Introduction

Welcome! ASP.NET is a great technology for building web sites but it would be even better if it provided more flexibility for customizing the rendered HTML. For example, the Menu control makes it simple to add a menu to a web site, but it would be better if it didn't create <table> tags and was easier to style using CSS. Happily, it's easy to customize and adapt the Menu control to generate better HTML. Indeed, you can modify any ASP.NET control so it produces exactly the HTML you want.

The key is to use something that may be new to you: control adapters. These are little chunks of logic that you add to your web site to effectively "adapt" an ASP.NET control to render the HTML you prefer. The ASP.NET 2.0 CSS Friendly Control Adapters kit provides pre-built control adapters that you can easily use to generate CSS friendly markup from some of the more commonly used ASP.NET controls.

Getting Started

Before trying to learn how control adapters work, it's helpful to see them in action. Use the Examples menu at the top of this page to see the impact of adapting some of the ASP.NET controls.

Each example page lets you enable/disable the adapters so you can immediately see their impact. Likewise, you can dynamically change themes, swapping in a different set of CSS files without changing the HTML markup. A source code viewer lets you study how each sample is constructed.

These sample control adapters demonstrate how to build an ASP.NET web site that is particularly easy to style with CSS. Feel free to use, copy, clone and modify the markup, CSS and code that you find here. To experiment with a local copy of this web site:

1. Install Visual Web Developer (VWD) or Visual Studio 2005 (VS).
2. Download this kit's VSI file. It adds a new web site template to your installation of VWD/VS.
3. Use the File menu in VWD/VS to create a new web site that uses the new template: Tutorial on ASP.NET CSS Friendly Control Adapters.
4. Run the new web site using the built-in Cassini web server (F5 key in VWD/VS).