Tip/Trick: Use the ASP.NET 2.0 CSS Control Adapters for CSS friendly HTML output

Tired of having html <table> elements rendered by the built-in ASP.NET server controls and wishing you could use a pure CSS solution instead?  If so, read on...

Last week we released Version 1.0 of the ASP.NET 2.0 CSS Control Adapters.  These adapters take advantage of a new extensibility feature in ASP.NET 2.0 that we call the "Control Adapter Architecture", and which enables developers to override, modify and/or tweak the rendering output logic of an existing server control (without changing any of its properties, supported events, or programming model).

The ASP.NET 2.0 CSS Control Adapters that we released last week provide pre-built control adapters for 11 of the most common ASP.NET controls (GridView, DetailsView, FormsView, DataList, Menu, TreeView, Login, LoginStatus, CreateUserWizard, ChangePassword and PasswordRecovery).  The CSS Control Adapters cause these ASP.NET controls to emit CSS friendly html output (eliminating things like inline styles and <table> elements), and can significantly help when using CSS on your web-site.

Click any of the links below to see a before/after example of how they change the markup generated by these built-in ASP.NET controls:

The CSS Control Adapter toolkit includes both VB and C# source code for all of the above control adapters. You can use the source-code as-is (without having to modify anything) to get pure CSS output.  Or if you want to tweak the output even further you can go in and modify the adapters to emit any custom markup you want:

I posted a nice tutorial two months ago that walksthrough how you can use the CSS Control Adapters that I highly recommend reading to learn how to get started. 

Scott Mitchell earlier today also posted a nice CSS Control Adapters article on www.4guysfromrolla.com that covers how to use them as well. 

You can ask questions and get help on how to use them on the CSS Control Adapters Forum on http://www.asp.net.

Hope this helps,

Scott

P.S. I'd like to pass along a special big thanks to Russ and Heidi for all of their awesome work in building these CSS Control Adapters and samples!

P.P.S. For additional ASP.NET Tips/Tricks blog posts of mine, please review my ASP.NET Tips, Tricks and Resources page.

19 Comments

  • How will the 3.0 framework effect the Friendly CSS project?

  • Hi Hanan,

    You will have no problems using the CSS Control Adapters with either .NET 2.0 or .NET 3.0 installed. They work just fine on both.

    Thanks,

    Scott

  • Scott,

    Is this release the "real thing" or is it still CTP/Beta?

    Thanks

  • Is there a template included for Web Application Projects?

  • Hi Joe,

    This release is the V1.0 release (not a beta or CTP).

    Hope this helps,

    Scott

  • Hi,

    Two questions:
    (1) Are they compatible with AJAX Beta 2
    (2) I am failing on forms authentication, where I cannot pass my login page (as if not authorized). Is there some special web.config settings needed for it to work?

    Thanks,
    Edmund

  • Hi Brian,

    Thanks a bunch for putting the compiled version on your site. And nice blog - I just subscribed!

    Thanks,

    Scott

  • Hi Edmund,

    The CSS Control Adapters are compatible with ASP.NET AJAX.

    Can you provide more details on your forms authentication issue? Are you saying it stopped working when you added the CSS control adapters (that would be odd). If you want to send me email (scottgu@microsoft.com) with an attached version of your web.config file I can take a look.

    Thanks,

    Scott

  • Hi Rob,

    Unfortunately there isn't a built-in template for VS 2005 Web Application Projects. What you can do pretty easily, though, is copy the .browser files and the adapter files into an empty web project, and then choose file->export template to create your own project template with them in there.

    I recommend combining these with the ASP.NET AJAX bits and/or the toolkit to have one new file project template with everything in it.

    Hope this helps,

    Scott

  • I saw that the menu doesnt know if it crosses the limit of the browser window.

    The original one renders a scroll thingy when the number of menu items crosses the bottom (or top) of the browser window.

    will this be added to the CSS menu control aswell?

  • Scott,

    Thanks for the great article. How hard is the hit on performance when using these adapters?

    I know the data transfered will most likely be larger, however what about the actual control rendering/creating on the server?

    Thanks.

  • It ignores some basic property such as StaticDisplayLevels.

  • Hi Ryan,

    There isn't much of a performance hit - on the order of only a few % points. You'll typically make it up, though, because the size of the page rendered is smaller - which leads to lower memory allocations and faster response time.

    So I wouldn't worry about using them because of performance concerns.

    Hope this helps,

    Scott

  • To all those that encounter the forms authentication issue I mentioned earlier.
    With the amazingly quick response of Scott and Russ Helfand, it&#39;s acknowledged that under some conditions &quot;the UserName and Password may be unavailable (at least during significant portion of) the page lifecycle when you use the adapter&quot;
    A workaround is to access the UserName property of the &lt;asp:Login&gt; control as such:
    ((TextBox)myLoginCtrl.FindControl(&quot;UserName&quot;)).Text
    Edmund

  • In all of this, I don't see any discussion why we should have to jump through all these hoops just to generate decent markup. (Perhaps I need to visit the forums.)

    Just exactly what is the big hairy deal about generating quality cross browser markup? What?

  • Hi Scott

    Will there be any built-in support for those in VS Orcas?

  • Hi XToff,

    VS Orcas will have much richer support for CSS within the VS Designer - with a lot of great CSS features being added.

    Hope this helps,

    Scott

  • Hi Scott
    Nice work.

    As soon as I replace the menu Item collectin with a siteDataSource the menu no longer renders horizontally -
    Thanks

  • Hi Bob,

    Are you seeing issues with the menu items being generated, or are you seeing issues with the CSS styling of them?

    When you do a view-source of the HTML do you see elements for the data being pulled from the SiteMapDataSource?

    Thanks,

    Scott

Comments have been disabled for this content.