CSS Control Adapter Toolkit Update

Today we released a refresh of the CSS Control Adapters for ASP.NET 2.0 (incorporating bug fixes, feature suggestions, and adding support for new controls).  You can download it for free and immediately begin using it to enable pure CSS optimized markup for the following ASP.NET controls:

  • Menu
  • TreeView
  • GridView (new)
  • DetailsView
  • FormsView
  • DataList
  • Login (new)
  • ChangePassword (new)
  • CreateUser (new)
  • PasswordRecovery (new)
  • LoginStatus (new)

As I blogged about with the first release of the CSS Control Adapters, these control adapters use a new built-in extensibility mechanism in ASP.NET 2.0 called "control adapters".  A control adapter allows you to plug-in into any ASP.NET server control and override, modify and/or tweak the rendering output logic of that control.

What is cool about control adapters is that they do not require a page developer to program against a new control, or modify the control programming model semantics (you still use the same control properties, methods, events and templates you did before).  A developer building a page can be entirely oblivious that a control adapter is being used (the control adapter model makes it very clean to register and encapsulate this support).

Quick Getting Started Walkthrough

To use the CSS Control Adapter Toolkit, simply follow the below steps using either Visual Web Developer (which is free) or Visual Studio 2005:

Step 1: Install the CSS Control Adapter Toolkit:  

Download and install the CSS Control Adapters on your machine.  Click here to download a .VSI template project for Visual Studio that will create a ready-to-run project template with the CSS control adapters installed.  This is a safe download that doesn't modify any files or settings within VS or ASP.NET, so you don't need to worry about it causing any problems with existing code.

Step 2: Create a New Web Site with the CS Control Adpaters Registered:

Within Visual Web Developer or VS 2005, choose the "File->New Web Site" menu option.  This will bring up the "New Website" dialog.  Choose your language and then select the new "CSS Friendly Web Site" project template option that has been installed:

This will create a new web-site project for you that already has the CSS Control Adapters included as source code within your app_code directory.  It also then includes some default CSS stylesheet files with pre-defined class names for you to easily customize with whatever CSS markup you want:

Step 3: Try out some of the CSS styled control samples: 

To see how the control adapters adapt server control markup, explore the "walkthrough" sub-directory that is also added by default to the new project:

For example, the "SimpleMenu.aspx" page statically defines a menu control like below that also has an "OnClick" event handler wired up (alternatively you could use navigation to directly navigate to a specific page):

<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="Menu_OnClick" CssSelectorClass="SimpleEntertainmentMenu">
    
<Items>
        
<asp:MenuItem Text="Music">
            
<asp:MenuItem Text="Classical" />
            <
asp:MenuItem Text="Rock">
                
<asp:MenuItem Text="Electric" />
                <
asp:MenuItem Text="Acoustical" />
            </
asp:MenuItem>
            
<asp:MenuItem Text="Jazz" />
        </
asp:MenuItem>
        
<asp:MenuItem Text="Movies" Selectable="false">
            
<asp:MenuItem Text="Action" />
            <
asp:MenuItem Text="Drama" />
            <
asp:MenuItem Text="Musical" />
        </
asp:MenuItem>
    
</Items>
</asp:Menu>

Where the code for the Menu_OnClick event looks like this in the code-behind:

    Public Sub Menu_OnClick(ByVal sender As ObjectByVal As MenuEventArgs)
        MessageLabel.Text 
"You selected " & e.Item.Text & "."
        
e.Item.Selected = True
    End Sub

At runtime the CSS Control Adapter causes the menu to output CSS styleable output using <li> and <ul> elements instead of tables, and when we apply a CSS stylesheet to the page we get a nice hierarchical drop-down menu:

While you are looking at the samples, you might also want to checkout the CheckBoxTreeView sample - which demonstrates how to use CSS to stylize the <asp:treeview> control to enable inline checkboxes:

 

So How Do Control Adapters Work?

Control Adapters are classs that derive via the System.Web.UI.Adapters.ControlAdapter base class, and which implement rendering methods that allow a control adapter to completely customize how the markup of an individual control is rendered.  When you create a new web site project using the "CSS Friendly Web Site" project template, the source code for 11 pre-build CSS friendly control adapters are automatically added to your app_code directory:

You can use these control adapter classes as-is to get pure CSS friendly output (no need to change the code), or you can tweak them if you want to customize the rendering output however you want. 

ControlAdapters are then registered with ASP.NET by added a .browser file to the /App_Browsers directory immediately underneath the project's application root.  A .browser file includes simple markup like below that allows you to specify which Control Adapter should be used for which control:

<browsers>
  
<browser refID="Default">
    
<controlAdapters>
      
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="CSSFriendly.MenuAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.TreeView" adapterType="CSSFriendly.TreeViewAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.DetailsView" adapterType="CSSFriendly.DetailsViewAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.FormView" adapterType="CSSFriendly.FormViewAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.DataList" adapterType="CSSFriendly.DataListAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.GridView" adapterType="CSSFriendly.GridViewAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.ChangePassword" adapterType="CSSFriendly.ChangePasswordAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.Login" adapterType="CSSFriendly.LoginAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.LoginStatus" adapterType="CSSFriendly.LoginStatusAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.CreateUserWizard" adapterType="CSSFriendly.CreateUserWizardAdapter" />
      <
adapter controlType="System.Web.UI.WebControls.PasswordRecovery" adapterType="CSSFriendly.PasswordRecoveryAdapter" />
    </
controlAdapters>
  
</browser>
</browsers>

You can customize different control adapters for different browsers if you want, or just define them for "Default" to apply them by default to all browsers that visit your app.

Once you do that you are good to go - and can use standard CSS stylesheets to customize all style information.

For questions or reporting any bugs/issues, please visit the CSS Control Adapters Forum on the http://forums.asp.net web-site.  The CSS Control Adapters above work both with the VS 2005 Web Site Project Model and the VS 2005 Web Application Project Model.  There are also both VB and C# versions of the control adapters that you can use.

I'd also 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!

Thanks,

Scott

Published Friday, September 8, 2006 6:53 PM by ScottGu

Comments

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 12:01 AM by Bryan Peters
Awesome! I've always boasted at how great ASP.NET's table-less output has been, but certain controls were still using the old-school approach (formview used a table?). Thanks to everyone who put some work into this. It's much appreciated by all the CSS + MS junkies like myself.

# Mixing a CSS Control and a &quot;normal&quot; Control on the same WebPage or WebApplication

Saturday, September 9, 2006 4:50 AM by Patrick Spieler
How can I mix e.g. a ASP.NET GridView Control and ASP.NET CSS Control Adapter GridView Control on the same WebPage or at least in one WebApplication? - Is it just possible to do it for the whole WebApplication thru the App_Browser mechanism? Thanks

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 6:14 AM by David
How are you doing this for asp.net v3? Will the webcontrols still render the ugly html that v2 does today and the toolkit will be a standalone download. Or will the toolkit merge into the webcontrols so they by default render the pretty html that the toolkit does today.

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 10:40 AM by Joel
Is there a way to use the control adaptor for the menu to set a specific css class for a particular menu item? I'm still looking for a way to image-only menu items with roll-overs.

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 12:27 PM by ScottGu

Hi David,

We are still finalizing our plans there.  We are doing a lot of new CSS work and are going to have much richer Visual Studio CSS design-time support for CSS and using them with ASP.NET controls.

Expression Web Designer is also a new product coming out from Microsoft that has a lot of CSS designer integration built-into it (and also supports ASP.NET 2.0 controls today).  You can download a free beta of it here: http://www.microsoft.com/products/expression/en/web_designer/default.mspx

Visual Studio Orcas will share the same WYSIWYG designer surface with Expression -- so you'll also get all of its great design-time features integrated into VS as well going forward.

Thanks,

Scott

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 12:28 PM by ScottGu

Hi Joel,

Can you provide more details on your scenario (feel free to email them to me at: scottgu@microsoft.com if that is easier)?

Specifically -- do you only want this to happen on one specific menu, or on all menus?

Once I understand your scenario I can help get you a sample.  You can definitely do image-only roll-overs using the CSS Adapter Toolkit.

Thanks,

Scott

# re: CSS Control Adapter Toolkit Update

Saturday, September 9, 2006 10:48 PM by Vikram

Hi

This is why I like your blog most. Practicle example to show what new feature means to the web Development process

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 11:28 AM by Art Toscano
Great stuff Scott (as usual). How about a template with both Atlas AND the CSS controls? Also, after installed, I didn't see the new template on the Web Application model, only on the Website.

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 12:05 PM by ScottGu

Hi Art,

We should have a VS 2005 Web Application Project option template for the CSS adapters for the final release.  In the meantime, you can just add the adapter files manually.

One technique you can use to mix-match templates and build your own is the one I described here: http://weblogs.asp.net/scottgu/archive/2006/09/04/Tip_2F00_Trick_3A00_-Creating-Re_2D00_Usable-Project-and-Item-Templates-with-VS-2005.aspx

This way you could create a single template that has both Atlas and the CSS Adapters (and potentially anything else you want).

Hope this helps,

Scott

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 1:10 PM by Marco
Hi Scott, we have tried to adapt the CSS TreeView Adapter to our TreeView some time ago, but gave it up. The reason because we habe to change the logic of the adapter is that our data model doesn't fit into the TreeView model with root, parent and leaf nodes. With our model we need to have parent nodes which look and behave like root nodes, then different types of parent nodes and different types of leaf nodes. That was not a problem. We gave it up because we had problems with populating nodes on demand. It would be nice if you could post a sample how the adapter initially works and especially what it does when nodes are populated dynamically on demand. How are the integrated into the existing markup? Thanks. Marco

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 1:34 PM by ScottGu

Hi Marco,

The TreeView in the April release of the CSS Control Adapters didn't support the PopulateOnDemand feature, and I think also didn't handle postback scenarios well.

Both of these have been addressed in this current release.  If you look in the \walkthrough directory created in the site above, you'll find a populateondemand sample with the treeview which should do what you are after.

Hope this helps,

Scott

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 3:21 PM by Andy
The GridView control adapter is a great addition. I'd slightly question the XHTML used for the pagination, which would be best done using a bullet list for each page number. Validators don't like inline links in sequence, without seperators, especially for W3C level 2/3 guidelines. Though I realise many people (going from tables to CSS based designs) might stumble with float lefts for the bullet list of links. Of course, to do this I can modify the control adapter for my own needs. But what would be a great bonus is a Wizard control adapter. Please please! This is probably a hard one, with the many templated regions. But even a Beta version with just the basics (ie. no tables, missing out the templates) would be much appreciated. Or a tutorial on an outline Wizard control adapter (hint hint!).

# re: CSS Control Adapter Toolkit Update

Sunday, September 10, 2006 7:54 PM by ahmed adly
I have a problem while setting up Atlas.msi ,after i agreed about license agreement and i check the Check Boxes of install Atlas & Register the .asbx file in the IIS and while installing it reaches 99% and then a message Box appeared with that message "%1 is not a valid 32 application", my OS is win xp and i have .net 2005 full version on it not the express , so any ideas ? , and is there any way to build the dll manually to view the atlas web form if the installation failed completely???thx alot

# re: CSS Control Adapter Toolkit Update

Monday, September 11, 2006 1:29 AM by valens
Hi ScottGu, Can you offer me an Vista RC1 product cd-key? My mail:valens_lu@hotmail.com . Thanks! valens

# re: CSS Control Adapter Toolkit Update

Monday, September 11, 2006 3:26 AM by Christin
Hi Scott, is it possible to use the onclick-event AND the navigateurl-property at the same time in the css menu-control. With the original menu-control if I define a navigateurl, the onclick-event doesn't fire.

# re: CSS Control Adapter Toolkit Update

Monday, September 11, 2006 12:04 PM by cj
i'd just like to put my vote into have the best possible way to customize controls using css in version 3. the control adapters are very nice and i use a few of them, but they're an awful lot of work to set up when you need to be able to customize them. having them built into the program to begin with would be a great benefit, and i hope the powers that be understand how important it is and how time-saving it would be for us css and standards geeks.

# re: CSS Control Adapter Toolkit Update

Monday, September 11, 2006 4:21 PM by Christian
Hi Scott, is it possible to use the navigateurl and the onclick-event of the menu-control at the same time? Currently if i provide a navigateurl, the onclick-event doesn't fire at all. Thnx

# re: CSS Control Adapter Toolkit Update

Monday, September 11, 2006 4:34 PM by ScottGu

Hi Christian,

Good question -- one that to be honest with you I'm not 100% sure of the answer of. :-)

Any chance you could post it here: http://forums.asp.net/1018/ShowForum.aspx

Russ is monitoring that forum pretty closely and should be able to help answer it for you.

Thx!

# re: CSS Control Adapter Toolkit Update

Tuesday, September 12, 2006 10:16 AM by ScottGu

Hi Rosdi,

Can you send me a sample .zip file that shows the problem?  I can then loop you in with a few people to investigate.

Thanks,

Scott

# re: CSS Control Adapter Toolkit Update

Tuesday, September 12, 2006 9:47 PM by rosdi

I did a short digging.. the problem appears only when 'Enable Partial Rendering' is ticked (in Atlas Script Manager).

I have emailed you sample .zip

You are doing helluva job here Mr Scott.. I believe you should be nominated for a Nobel price  for the work you do.. :p

# re: CSS Control Adapter Toolkit Update

Tuesday, September 19, 2006 5:23 AM by Charles
Hi Scott, I have question regarding CSS Menu adapter. When using horizontaly placed menu control, I would like the 2nd level items of my menu (and 3rd level and so on) to be displayed horizontally, not vertically. In the end it would appear I have 2 lines of items visible (walking through the 2nd level of menu). Is there some option in css I could style this properties on?

# re: CSS Control Adapter Toolkit Update

Wednesday, September 20, 2006 12:00 AM by ScottGu

Hi Charles,

Any chance you could post your CSS menu question in this forum: http://forums.asp.net/1018/ShowForum.aspx

Russ (who built the CSS adapters) is great at answering questions here.  I have to confess I'm not 100% sure on this CSS question! <g>

Thanks,

Scott

# re: CSS Control Adapter Toolkit Update

Wednesday, September 20, 2006 4:08 AM by charles
thanks scott, I will post it there... but I searched this formum before posting it here and didn't find an answer, so I thought it will be a very specific question with NO IT CAN'T BE as an anwer :) thanks and do not post this comment

# re: CSS Control Adapter Toolkit Update

Thursday, September 28, 2006 3:42 AM by Neil Chen
hi Scott, I've found some bugs in this toolkit. First, the Events are not properly adapted, especially we can't use the OnAdapted... events in UserControls, because the code only checks 'Page' for the event delegate. fortunitely, I solved this problem by myself. But now i encountered another problem. when I use the TreeView control in an UserControl, I can't collect CheckedNodes property as needed. now I'm wondering how to solve this.

# re: CSS Control Adapter Toolkit Update

Thursday, September 28, 2006 6:06 AM by judy
hi Scott. I use of skin file for asp.net control .plz let me know difference use this tool and skin file. I think css friendly is better because skin add some style to page! Thanks for your attention.

# re: CSS Control Adapter Toolkit Update

Thursday, September 28, 2006 10:19 AM by ScottGu

Hi Neil,

Any chance you could post details of the issue you ran into on this forum: http://forums.asp.net/1018/ShowForum.aspx

Russ will be able to take a look and help.

Thx!

Scott

# re: CSS Control Adapter Toolkit Update

Thursday, September 28, 2006 10:21 AM by ScottGu

Hi Judy,

Skin files for ASP.NET controls allow you to cusotmize any property on a server control (including defining templates and non-style settings).

What I'd recommend is using the CSS Control Adpaters to style your UI, and then use .skin files for any non-CSS property you want to configure.

Note that ASP.NET Themes can contain both CSS and Skin files -- so they work well together (and are not mutually exclusive).

Hope this helps,

Scott

# re: CSS Control Adapter Toolkit Update

Wednesday, October 4, 2006 6:12 AM by Geraint Rees (Geraint.rees@ntlworld.com)
Would it be possible to be able to pick a custom css class for each menu item? Could you possible point me in the right direction to make this possible, as i am try to achieve the below as out put Regards Geraint And Thanks

# re: CSS Control Adapter Toolkit Update

Thursday, October 5, 2006 10:37 AM by ScottGu

Hi Geraint,

You could definitely modify the CSS providers to output separate class rules for each item.  Alternatively, you could handle events on the Menu control to customize the nodes yourself when they are first added into the Menu.

Hope this helps,

Scott

# re: CSS Control Adapter Toolkit Update

Tuesday, October 24, 2006 6:26 PM by Michael
Hi, I added the css control adapter to my site and boom, my login control will no longer log me in. Why is the login control so finiky? What can I do? My project is in a serious time crunch and I really can't afford to spend 3 days on this. My users can no longer log in. Please help. Thanks, Michael.

# re: CSS Control Adapter Toolkit Update

Friday, October 27, 2006 8:43 AM by Marco Holland
Hi Scott, I downloaded your "CSS Control Adapters for ASP.NET 2.0" to work with the Treeview control aspects of remembering the (view)state (which node selected and which nodes expanded). I use the Telerik RadTreeView instead of the standard web TreeView! I have the following questions for you: - How can I use your code example (what do I need to do/use) to enhance my 3rd party (Telerik!) RadTreeView a) To remember which node was selected and which were expanded during a postback? b) To show a more flexible advanced stylesheet Thanks in advance, Marco (I am a simple MCSD but not a super hacker so a simple adjustment solution/hint would be appreciated)

# re: CSS Control Adapter Toolkit Update

Saturday, October 28, 2006 12:12 PM by ScottGu

Hi Marco,

In theory you should be able to build a Control Adapter for Telerik controls - although you'd probably need to chat with them about how best to go about this (I'm not sure which methods they expose).

Hope this helps,

Scott

# re: CSS Control Adapter Toolkit Update

Saturday, October 28, 2006 1:30 PM by ScottGu

Hi Michael,

What error are you seeing when you applied the CSS Adapter?

Thanks,

Scott

# re: CSS Control Adapter Toolkit Update

Monday, October 30, 2006 2:57 AM by Mateusz Kierepka
Hi, What about adding support to dynamic CSS including? Now every CSS is included in each page, this is not very good for web transfer. It would be nice if for example grid is used on page just grid CSS is included in header. Kind regards Mateusz

# re: CSS Control Adapter Toolkit Update

Monday, October 30, 2006 6:37 AM by Kev Winchcombe
Any news on a CSS friendly Wizard control? Or is there a list of the next ones that are being done?

# re: CSS Control Adapter Toolkit Update

Tuesday, November 21, 2006 11:23 AM by Bruno Figueiredo

Is it possible to add a control adapter at runtime? I've tried, it gets added to the collection of adapters, but the adapter is never called. If I put the adapter on the .browser file it works. This is my code:

protected override void OnInit(EventArgs e)

       {

           string aux2 = (typeof(TextBox)).AssemblyQualifiedName;

           if (!HttpContext.Current.Request.Browser.Adapters.Contains(aux2))

               HttpContext.Current.Request.Browser.Adapters.Add(aux2, "MsdnMagazine.LabelTextBoxAdapter");

       }

Thanks....

# re: CSS Control Adapter Toolkit Update

Tuesday, November 21, 2006 11:40 AM by ScottGu

Hi Bruno,

Unfortunately I don't think there is a way to add a control adapter dynamically at runtime.

Sorry!

Scott

# re: CSS Control Adapter Toolkit Update

Tuesday, November 21, 2006 12:13 PM by Bruno Figueiredo

:(

Thanks for the fast answer Scott.

By the way, do you now any other way of changing the render of another control?

I'm building a asp.net control extender. The ideia is to add another control, or at least render html, before the extended control. Any sugestions?

# Menu is not collapsing

Monday, November 27, 2006 3:55 AM by Pradeep

Hi , i am using adapter for menu, and facing a problem . my menu is always in a collapsed manner..i want the menu items to be displyed only when i click the particular menu.

Please guide  me...

# re: CSS Control Adapter Toolkit Update

Tuesday, December 12, 2006 5:40 AM by Jyoti

Hi,

Is there going to be a control adaptor for web parts?

# re: CSS Control Adapter Toolkit Update

Friday, February 9, 2007 7:39 PM by Chris Brooksbank

First thanks for this. I now have a page styled 100% with css no presentational junk markup in the aspx. To do this I did have to convert my DataGrid to a GridView.

One ( non showstopper ) issue. If I convert another old page to use the GridView it will immeditely output CSS friendly markup, even before I write the CSS. I would like to be able to mark this GridView with a flag and output things the old way until the CSS is polished enough.

# re: CSS Control Adapter Toolkit Update

Thursday, February 22, 2007 11:35 AM by massimo

hi

i have to develop intranet-applications with asp.net for my company.

we have a big intranet that is mainly developed in java with very strict design guidelines for everything like treemenu,menu,table and the even the behavior...

so i cannot use the asp.net controls out of the box.

we have defined stylesheets for everything. so i think the best way would be to map the rendered html to this stylesheets which are updated with versions and so on.

i looked the example of the control adapter treeview example and there <ul> is used instead of <table> tag.

i would like to have the original source code of the controls code to use it as template when I override the methods.

i hope my english is understandable

# re: CSS Control Adapter Toolkit Update

Thursday, March 1, 2007 6:14 AM by santosh

when i used css friendly adapters i can get rid of the tables that my designer really hates. But my treeview lost its collapsing property. Also my asp:menu control is always vertical even when i set the orientation to horizontal

# re: CSS Control Adapter Toolkit Update

Wednesday, March 14, 2007 12:58 AM by .NetGuy

Hi

Dunno if this is mentioned yet, but is there any way to remove the sytle generated in the head section? I don't want this.

   <style type="text/css">.shl_ln { border-right: 1px solid #000; padding-right: 2px; }</style><style type="text/css">

.ctl00_ctl00_MainNav_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }

.ctl00_ctl00_MainNav_1 { color:#124500;text-decoration:none; }

etc...

Thanks