Get to know ASP.NET 2.0 CSS Friendly Control Adapters

Hi , I discovered some time ago an amazing feature of ASP.NET 2.0. This feature is called the "CSS friendly control adapters". What this feature basically mean is that we can take a given control , a server control of any kind such as the Button, BulletedList any other server control we have in ASP.NET and simply control the HTML this control renders.

This feature making the control HTML  rendering much easier than having to inherit the control itself or writing a custom control from scratch. Lets see how this is done in a simple sample:

Say we have a page containing a bulleted list ( in simple html this is an un ordered list with the UL tag in use)

<div>
   <asp:BulletedList runat=server ID="blBooks">
       <asp:ListItem Text="book1" Value="book1"></asp:ListItem>
       <asp:ListItem Text="book2" Value="book2"></asp:ListItem>
       <asp:ListItem Text="book3" Value="book3"></asp:ListItem>
   </asp:BulletedList>

If we run this page and check its HTML we will see indeed that this control renders to a simple combination of the UL and LI html tags:

<ul id="blBooks">
    <li>book1</li><li>book2</li><li>book3</li>
</ul>

Now what if we want a different HTML outout for different browsers of even for mobile devices, what then?

Well apparently there is a simple solution called "Control adapters". You can tell the runtime that instead of calling the Render function of the control to call the Render functions of some different class. This class is the control adapter. So how do we get it to work?

1. Add a class to your app_code folder or to the any class library referenced from your web project. This class must inherit WebControlAdapter class. (found in the System.Web.UI.WebControls.Adapters namspace).

2. Override its rendering functionality, here is a sample for the BulletedList control:

public classBulletedListControlAdapter :
       WebControlAdapter
{
  protected override voidRenderBeginTag(HtmlTextWriter writer)
  {
    writer.WriteLine();
    writer.WriteBeginTag("table");
    writer.Write(HtmlTextWriter.TagRightChar);
    writer.Indent++;
  }

  protected override voidRenderEndTag(HtmlTextWriter writer)
  {
    writer.WriteEndTag("table");
    writer.Indent--;
    writer.WriteLine();
  }

  protected override voidRenderContents(HtmlTextWriter writer)
  {
    writer.Indent++;

    BulletedListbl = Control asBulletedList;
    if(bl != null)
    {
      foreach (ListItem i inbl.Items)
      {
         writer.WriteLine();
         writer.WriteBeginTag("tr");
         writer.Write(HtmlTextWriter.TagRightChar);
         writer.WriteLine();
         writer.Indent++;
         writer.WriteBeginTag("td");
         writer.Write(HtmlTextWriter.TagRightChar);
         writer.WriteLine();
         writer.Indent++;
         writer.Write("*");
         writer.Write(HtmlTextWriter.SpaceChar);
         writer.Write(i.Text);
         writer.WriteLine();
         writer.Indent--;
         writer.WriteEndTag("td");
         writer.WriteLine();
         writer.Indent--;
         writer.WriteEndTag("tr");
         writer.WriteLine();
        }
     }

     writer.Indent--;
    }
  }

3. Now we need to tell somehow to the runtime to use this adapter. We can do this by simply add a special folder called app_browsers. In this sample i will simply change the default browser instead of telling which adapter to use for each browser , but know this is possible.

Here is my BrowserFile.browser file:

<!-- File: MyAdapters.browser -->
<browsers>
  <browser refID="Default">   
    <controlAdapters>
      <adapter 
        controlType="System.Web.UI.WebControls.BulletedList"
        adapterType="MsdnMagazine.BulletedListControlAdapter" 
      />
    </controlAdapters>
  </browser>
</browsers>

Thats it.Now run the same page again, and see the html:

<table>
        <tr>
            <td>
                * book1
            </td>
        </tr>

        <tr>
            <td>
                * book2
            </td>
        </tr>

        <tr>
            <td>
                * book3
            </td>
        </tr>
    </table>

Enjoy,

Pini Dayan