Although I love ASP.NET the way it is at the moment, there are still moments that I stick it behind a piece of wallpaper and forget about it. One of those moments is when you need to use CSS to style things like the ASP.NET menu control. The generated HTML is so horrible that there’s no way you’re going to be able to style it properly.
There is however a way around all that. You can change the HTML that is being rendered by applying a custom control adapter. In this post I’m going to show you a short sample on how you can do just that.
What are control adapters
Every control in ASP.NET has its own rendering logic build into the control. This ensures that the control can be rendered. The rendering logic does not always produce the correct result in every browser imaginable. So the ASP.NET introduced a clever bit of technology called control adapters to solve this issue.
A control adapter changes the way a control is rendered, by overriding the standard rendering logic of that control. The ASP.NET runtime finds the right control adapter for each control, by looking at the browser metadata. When you take a look at the C:windowsmicrosoft.netFrameworkv4.0.30319ConfigBrowsers directory, you can find several .browser files. One for each common browser that is available today. In these files are specifications on what the browser is supporting and what control adapters need to be used.
Being able to render the correct HTML for each browser is not all that the control adapters are good for. If you don’t like the way ASP.NET is doing things, you can also write your own control adapter to change the way a control is rendered.
Building your own control adapter
To modify the HTML rendering of a particular control, you need to write your own control adapter. A control adapter is a class that is derived from System.Web.UI.Adapters.ControlAdapter. In this class you can override the Render method to implement your own rendering logic.
1: public class MyCustomControlAdapter : ControlAdapter
3: protected override void Render(System.Web.UI.HtmlTextWriter writer)
5: //TODO: Implement your own rendering logic here.
While this provides you with the most flexibility possible, it’s also one of the more ugly ways to implement a control adapter. To get a more elegant result, you can inherit from one of the following classes.
Each of these adapters contain specific methods that you can override to render custom HTML for specific parts of the control the adapter is defined for.
Applying the custom adapter
To apply the custom adapter to a web application, you need to add a custom browser file to the web application.
The first step to add a custom adapter to your web application is to create a folder named App_Browsers. In this directory you need to create a new file named Default.browser with the following contents.
2: <browser id="Default">
4: <adapter controlType="System.Web.UI.WebControls.Menu"
Once you have the file in place, the ASP.NET runtime will automatically detect the control adapter and load it for each instance of the control, the adapter is defined for.
While control adapters will help you produce prettier HTML it got me wondering. Why didn’t Microsoft output better HTML in the first place? Or is it just me, wanting to be different all the time.
It’s still a cool feature though.
I remember an add-on on the asp.net site that rendèd some controls with better styleable html. Are those using the same technique?
Frank de Groot - Schouten
Yup, there is an add-on for ASP.NET called CSS-friendly control adapters. That add-on provides prettier html too.
It uses the exact same technique as I demonstrated in this post.
No your right Microsoft should put more effort in to their HTML ouput. They are getting better for the web, but don’t get me started on Outlook email HTML :-).
Peterborough Website Designer
I liked this one as a programmer
beycon web yaz?l?m
Does this work with .net 4?
Yes this works for ASP.NET 4 too.