ASP.NET Quicky: Control adapters

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

   2: {

   3:     protected override void Render(System.Web.UI.HtmlTextWriter writer)

   4:     {

   5:         //TODO: Implement your own rendering logic here.

   6:     }

   7: }

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.

• System.Web.UI.Adapters.WebControlAdapter
• System.Web.UI.Adapters.MenuAdapter
• System.Web.UI.Adapters.DataBoundControlAdapter
• System.Web.UI.Adapters.HierarchicalDataBoundControlAdapter

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.

   1: <browsers>

   2:     <browser id="Default">

   3:       <controlAdapters>

   4:         <adapter controlType="System.Web.UI.WebControls.Menu"

   5:                  adapterType="WebApplication1.MenuAdapter">

   6:         </adapter>

   7:       </controlAdapters>

   8:     </browser>

   9: </browsers>

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.

Conclusion

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.

Share this