Render CheckBoxList as an Unordered List
Introduction
The CheckBoxList, like most other web controls, makes my life a whole lot easier by automating what used to be a lot of drudge work. The CheckBoxList also, like most other web controls, spits out ugly, ugly markup that makes me incredibly pissed off. But the good thing in ASP .NET is that if you donât like the way something works, you can almost always inherit from the class and override the behavior, which is what weâre going to be doing with CheckBoxList.
Web Custom Controls vs. User Controls
Web custom controls have several benefits over user controls. To use a user control, you need to copy the .ascx file to each and every project that you you want to use it in, whereas web controls are compiled into .dll files, which means that to use them you just add a reference to the .dll file. Thereâs also the fact that user controls donât have designer support (admittedly not a big deal for me, since I work almost exclusively in the âSource View,â but I know lots of other people swear by the âDesign Viewâ); web custom controls, on the other hand, do.
Web Custom Controls
Creating web custom controls can look like an untamable beast, but actually itâs quite easy. Start by clicking File » New » Project » Visual C# » Windows » Web Control Library. You can just as easily create a web custom control in whatever web project you happen to be working on, but because weâre interested in easy reuse, weâll put our extended CheckBoxList file in a web control library. Name it whatever you want.
Visual Studio will automatically create a file called WebCustomControl1.cs for you. Delete everything inside the class â we donât need it. Rename the file to something more appropriate, like UlCheckBoxList, and change all instances of WebCustomControl1 in the file to UlCheckBoxList (Visual Studio will probably automatically change the class name for you, but you also need to change the ToolboxData).
Base Class
All web custom controls need to inherit from the WebControl class either directly or indirectly. The CheckBoxList control already inherits from this class. Since weâre interested in only the rendering part of the CheckBoxList weâll inherit from this one.
The Code
using System;using System.Collections.Generic;using System.ComponentModel;using System.Text;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace XhtmlWebControls{[ToolboxData("<{0}:UlCheckBoxList runat=server></{0}:UlCheckBoxList>")]public class UlCheckBoxList : CheckBoxList{protected override void Render(HtmlTextWriter writer){Controls.Clear();string input = "<input id={0}{1}{0} name={0}{2}{0} type={0}checkbox{0} value={0}{3}{0}{4} />";string label = "<label for={0}{1}{0}>{2}</label>";writer.WriteLine("<ul>");for (int index = 0; index < Items.Count; index++){writer.Indent++;writer.Indent++;writer.WriteLine("<li>");writer.Indent++;StringBuilder sbInput = new StringBuilder();StringBuilder sbLabel = new StringBuilder();sbInput.AppendFormat(input,""",base.ClientID + "_" + index.ToString(),base.ClientID + "$" + index.ToString(),Items[index].Value,(Items[index].Selected ? " checked" : ""));sbLabel.AppendFormat(label,""",base.ClientID + "_" + i.ToString(),Items[index].Text);writer.WriteLine(sbInput.ToString());writer.WriteLine(sbLabel.ToString());writer.Indentâ;writer.WriteLine("</li>");writer.WriteLine();writer.Indentâ;writer.Indentâ;}writer.WriteLine("</ul>");}}}
Explained
Line 11: [ToolboxData("<{0}:UlCheckBoxList runat=server></{0}:UlCheckBoxList>")]
This tells Visual Studio what to write in the âSource Viewâ of the .aspx page in which weâre going to use the control. That is, if you drag and drop the control from the Toolbox onto the .aspx page.
Line 16: Controls.Clear();
The CheckBoxList has a single child control of type CheckBox, which is used to render all the checkboxes in the list. But as weâre going to be writing the HTML ourselves, we donât care about this control. So I cleared it, just in case having it around screws up something.
Line 18: string input = â<input id={0}{1}{0} name={0}{2}{0} type={0}checkbox{0} value={0}{3}{0}{4} />â;
Line 19: string label = â<label for={0}{1}{0}>{2}</label>â;
The html thatâs going to be outputted with some âstring format variablesâ thrown in. The formats are going to be replaced with the actual values later on (lines 35 - 47).
Line 25: writer.Indent++;
Makes the <li> tags and everything underneath appear one tab to the right (in the HTML source code) of the <ul> tag.
Line 38: base.ClientID + â_â + i.ToString(),
Line 39: base.ClientID + â$â + i.ToString(),
If your CheckBoxListâs name was âCheckBoxList1,â then the id and the name you see in the HTML source code would be âCheckBoxList1_xâ and âCheckBoxList1$x,â where x is the number of the checkbox in the list. I saw no reason to change this.
Adding Our Class to the Toolbox
Compile the Web Control Library you just created. Go to the Toolbox, right-click on âGeneralâ (or whichever tab you want to put the class under) and select âChoose Itemsâ â In âChoose Toolbox Items,â under â.NET Framework Components,â select âBrowseâ and point to the .dll file of the class (should be located in the âDebugâ folder in the âBinâ folder of your Web Control Library folder). Click OK. And youâre good to go.
