Anyone that has worked with ASP.net that cares about web standards has no doubt lamented the HTML output of most web controls at some point. Thankfully with ASP.net 2.0, times are changing for the better. Scott Guthrie recently introduced the CSS Control Adapter Toolkit which provides a seamless way to improve the HTML output of your controls without effecting how they are used.
Being able to change the HTML output of a server control isn’t a new idea, you’ve been able to do it since day dot. Unfortunately, each method which allows you to override the HTML output has its own problems. In the case of a custom control, they are a lot of work to develop from the ground up and if you simply inherit a web control you then lose the ability to just ‘drag and drop’ and have it just work. Using CSS Control Adapters would allow you to change the HTML output of a web control, without creating a custom control or changing how you use the standard web controls.
To provide a simple example, consider a treeview style menu control. For the sake of an example, lets assume that the HTML output of that control by default is a convoluted nested mess of <table>
tags. Since you’re a standards advocate and you care about the health of your clients browser, you’d really like to clean that up. You could implement a CSS Control Adapter to render you’re favourite treeview menu control using an elegant unordered list (<ul>). Better yet, maybe you don’t get consistent rendering of your fangdangle control on a particular platform/browser (a handheld device might be an excellent example). You could implement a handful of CSS Control Adapters for your web control and then customise which one is used through the use of a .browser
file. The .browser
files are used to register your adapters and also provides a simple way to define that adapter A is used in browsers H and I while adapter B is used in browsers E, F and G.
The significance of the CSS Control Adapter is that you can change the HTML output of a server control, without changing how the standard object is used. This means you could start implementing adapters for your existing code base, enable them and you haven’t had to change any of your existing code or how you were using the web controls! Pretty neat stuff I think and definitely a positive step in the right direction for ASP.net 2.0!
Hi,
I am curious how do we achieve Horizontal Menu with Horizontal SubMenu using CSS Control Adapter Toolkit? That means when user clicks on the top layer Menu, the SubMenu will be displayed horizontally as well which i can’t find any tutorial of how to achieve that using CSS Control Adapter Toolkit.
Thank you very much.