How To: Control Adapters
(
May 10 2007 - 12:40:05 PM by
Timothy Khouri) - [
print article]
What We'll Learn
Control Adapters give the ability to change how any web control is rendered. This is a very powerful tool as you can just plug in your adapter to your web application and automatically change your content for the better. With very little code we are going to see how to change the way a very simple control is rendered, the RadioButtonList, without changing our ASP.NET code! We'll discuss some of the awesome benefits that come with this power, as well as some drawbacks.
Control Adapter Benefits
One of the greatest benefits of control adapters is that you don't have to change any of your ASP.NET code to change the way your website renders. This means that you can use the standard ASP.NET controls (TextBox, CheckBox, RadioButton, CheckBoxList, Panel, ASP.NET AJAX UpdatePanel) and even your Page class, and you can add functionality to some very handy methods such as OnInit, OnLoad, Render, OnUnload, RenderChildren and more.
Control adapters also are a huge help in a multi-developer environment. You may have some developers who are assigned to putting the ASP.NET side of the application together, while another developer may be in charge of ensuring semantics and styling the website with CSS. Using control adapters to enforce semantic markup is a clean solution for this.
Drawbacks of Control Adapters
Some of the disadvantages of using control adapters to change the way your control renders is that you don't have the ability to add your own custom properties. This means that if you wanted to add a "DefaultText" property to the asp:Literal control, you couldn't do it with control adapters, but rather you would have to inherit and make your own custom Literal class. Also if you wanted to do something like overriding the "Text" property and making it themeable, you couldn't do that as well. While these aren't necessarily 'show stoppers', they are definate drawbacks that need to be considered if you are considering changing the way your site renders.
Real World Code Samples
Let's now look at some real world examples of how to use control adapters (using the WebControlAdapter class) to fix the rendering of a RadioButtonList and a CheckBoxList. This particular task has already been addressed in another article (Semantic CheckBoxList & RadioButtonList), but now we will see how to do it with control adapters instead of making our own custom controls. First we will look at the C# code needed.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;
public class RadioButtonListAdapter : WebControlAdapter
{
protected override void Render(HtmlTextWriter writer)
{
ListControl targetControl = this.Control as ListControl;
if (targetControl == null || targetControl is IRepeatInfoUser == false)
{
base.Render(writer);
return;
}
writer.WriteBeginTag("ul");
if (targetControl.CssClass.Length > 0)
{
writer.WriteAttribute("class", targetControl.CssClass);
}
writer.Write(">");
IRepeatInfoUser repeaterInfo = (IRepeatInfoUser)this.Control;
for (int i = 0; i < targetControl.Items.Count; i++)
{
writer.WriteFullBeginTag("li");
repeaterInfo.RenderItem(ListItemType.Item, i, new RepeatInfo(), writer);
writer.WriteEndTag("li");
}
writer.WriteEndTag("ul");
}
}
So that's all the code to make a CheckBoxList or RadioButtonList render using an un-ordered list (the <ul> tag). The other articles went into more detail about why you would want to do this, but for now we're just talking about how to do it. So now we'll look at the ASP.NET code we need for this.
<asp:CheckBoxList runat="server">
<asp:ListItem Text="One" />
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</asp:CheckBoxList>
Notice that our ASP.NET code is exactly as you would normally make a CheckBoxList. So now we need to tell our web application "when" it should use our code to render instead of using the default rendering. To do this, we are going to use a "browser" file. So first, add the "App_Browsers" folder to your ASP.NET 2.0 web application. Now you'll need to add a browser file. I named mine "All.browser" but the name of the file doesn't really matter as long as it ends with the ".browser" extension. The contents of your file should look like this:
<browsers>
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.CheckBoxList"
adapterType="RadioButtonListAdapter" />
<adapter controlType="System.Web.UI.WebControls.RadioButtonList"
adapterType="RadioButtonListAdapter" />
</controlAdapters>
</browser>
</browsers>
So now we have told our web app to change the rendering of the above two controls for the "Default" browser (meaning all of them). It's as simple as that! Now our RadioButtonList or CheckBoxList will render clean and semantic markup that can be easily styled using CSS.