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.

Published Wednesday, November 29, 2006 11:01 PM by ScottGu

Comments

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

Thursday, November 30, 2006 3:43 AM by Hanan

How will the 3.0 framework effect the Friendly CSS project?

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

Thursday, November 30, 2006 10:08 AM by ScottGu

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

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

Thursday, November 30, 2006 11:45 AM by Joe

Scott,

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

Thanks

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

Thursday, November 30, 2006 11:48 AM by Rob

Is there a template included for Web Application Projects?

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

Thursday, November 30, 2006 12:19 PM by ScottGu

Hi Joe,

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

Hope this helps,

Scott

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

Thursday, November 30, 2006 3:00 PM by Edmund

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

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

Friday, December 1, 2006 1:10 AM by ScottGu

Hi Brian,

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

Thanks,

Scott

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

Friday, December 1, 2006 1:14 AM by ScottGu

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

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

Friday, December 1, 2006 1:15 AM by ScottGu

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

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

Friday, December 1, 2006 9:45 AM by Patrick

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?

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

Friday, December 1, 2006 12:16 PM by Ryan Ternier

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.

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

Friday, December 1, 2006 10:02 PM by wahyu

It ignores some basic property such as StaticDisplayLevels.

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

Saturday, December 2, 2006 6:57 PM by ScottGu

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

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

Saturday, December 2, 2006 6:58 PM by Edmund

To all those that encounter the forms authentication issue I mentioned earlier.

With the amazingly quick response of Scott and Russ Helfand, it's acknowledged that under some conditions "the UserName and Password may be unavailable (at least during significant portion of) the page lifecycle when you use the adapter"

A workaround is to access the UserName property of the <asp:Login> control as such:

((TextBox)myLoginCtrl.FindControl("UserName")).Text

Edmund

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

Tuesday, December 12, 2006 12:28 PM by Ken Prat

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?

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

Thursday, December 28, 2006 12:09 PM by Xtoff

Hi Scott

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

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

Saturday, December 30, 2006 11:27 AM by ScottGu

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

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

Friday, January 12, 2007 4:36 PM by BobH

Hi Scott

Nice work.

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

Thanks

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

Friday, January 12, 2007 5:26 PM by ScottGu

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 <ul><li> elements for the data being pulled from the SiteMapDataSource?

Thanks,

Scott