Sunday, April 08, 2007

CSS Friendly Adaptor Controls

Our web designers are always complain about the code generated from ASP.NET controls. For an example code generated from Menu controls are using table tags. But modern web designers love CSS based menus b'cos of two reasons. They looks elegant and the page size is very small compared to table base menus. So here is what you are looking for...... CSS Friendly Adaptor Controls, brilliant piece of work. You can make your existing site produce CSS friendly code and style your controls using CSS without even touching your existing aspx pages. It's definitely a wow isn't it :) Actually it is.... Compare the following rendered html using adaptor control with your own table base menu rendering results you will feel the difference.

<div class="SimpleEntertainmentMenu" id="Menu1">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('Menu1','bMusic')" class="AspNet-Menu-Link">
Music</a>

<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('Menu1','bMusic\\Clasical')" class="AspNet-Menu-Link">
Clasical</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">

<a href="javascript:__doPostBack('Menu1','bMovies')" class="AspNet-Menu-Link">
Movies</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('Menu1','bMovies\\Action')" class="AspNet-Menu-Link">
Action</a>
</li>
</ul>

</li>
</ul>

</div>
</div>


In the App_Browsers folder create the CSSFriendlyAdapters.browser and configure all the adaptor controls to be used with different ASP.NET controls.
In this file you can configure in which browsers Adaptor controls should be enabled or disables. Please refer CSS Friendly Adaptors for more details

2 comments:

Anonymous said...

Hey, interesting post! bookmarked :)

Anonymous said...

Loving the new design, great work. Will it always be like this?