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
Filed under: , ,

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?

# ASP.net Control adapters V1.0 &laquo; Coding with a Caffeine Rush&#8230;

Thursday, November 30, 2006 5:15 AM by ASP.net Control adapters V1.0 « Coding with a Caffeine Rush…

PingBack from http://caffeinecode.wordpress.com/2006/11/30/aspnet-control-adapters-v10/

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

Thursday, November 30, 2006 9:34 AM by Brian DeMarzo

Scott -- for those who are interested, I have a precompiled assembly that includes all the CSS adapter code in one place. http://demarzo.net/articles/1056.aspx

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

Thursday, November 30, 2006 9:39 AM by Speednet

Hi Scott,

Thanks for posting this.  I used the CSS adapters recently, and I highly recommend them.  They are very easy to implement, for anyone who may be concerned.

I also wanted to point out a very important modification to the GridView adapter that I recently posted on the ASP.NET Forums.  Using the stock CSS adapter it is very difficult to apply classes or styles to individual header, item, or footer cells, which in some situations makes the use of the GridView an unattractive option.  The modification I posted applies both classes and inline styles to the rendered code.  You basically just replace the WriteRows() function with the one I posted, plus the small change posted later in the same topic thread.  http://forums.asp.net/thread/1457609.aspx#1480598

# 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 01, 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 01, 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 01, 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 01, 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 01, 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 01, 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 02, 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 02, 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

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

Saturday, February 10, 2007 6:10 PM by Russ Helfand

BobH's posted (Jan 12, 2007) that he had trouble when using a SiteMapDataSource with a horizontal menu. I'm happy to report that his issue was resolved quite easily.  See his forum posting at http://forums.asp.net/thread/1545112.aspx. As always, folks are encouraged to post problems, suggestions and concerns at the forum dedicated to discussing the CSS Friendly adapters, http://forums.asp.net/1018/ShowForum.aspx. Best regards to Dr. Bob, Scott and everyone else,

Russ

# MSDN Blog Postings &raquo; Web Development Cookbook... ou encore Quelques recettes pour des d??veloppements Web ?? basses calories :)

Monday, December 17, 2007 8:39 PM by MSDN Blog Postings » Web Development Cookbook... ou encore Quelques recettes pour des d??veloppements Web ?? basses calories :)

Pingback from  MSDN Blog Postings  &raquo; Web Development Cookbook... ou encore Quelques recettes pour des d??veloppements Web ?? basses calories :)

# Url Rewriting with ASP.NET

Thursday, January 17, 2008 9:51 PM by Focus Web Solution NotePad

Url Rewriting with ASP.NET

# ASP.NET Web Forms and XHTML at Coderoni.com

Monday, February 11, 2008 12:06 AM by ASP.NET Web Forms and XHTML at Coderoni.com

Pingback from  ASP.NET Web Forms and XHTML at Coderoni.com

# Tip/Trick: Url Rewriting with ASP.NET | IDGLabs.COM

Wednesday, April 02, 2008 6:14 AM by Tip/Trick: Url Rewriting with ASP.NET | IDGLabs.COM

Pingback from  Tip/Trick: Url Rewriting with ASP.NET | IDGLabs.COM