Introduction

ASP.NET 2.0 introduced a plethora of new controls aimed at making life easier for developers. The other day I was using one of those new controls, the BulletedList, for the first time, to help me generate and write an unordered list to the page at runtime.

I could find very little real-world usage information about the new BulletedList control on the web, but fortunately it's a very easy control to master.  It basically contains a collection of ListItem controls, one per bulleted item, and it can render each ListItem as plain text, a hyperlink to a URL, or as a hyperlink to initiate a PostBack.  The DisplayMode property of the BulletedList control specifies how each of the ListItems will render.

The page I was constructing used the BulletedList to build a simple plain-text list, using code similar to this:

Source (.aspx file)

Code-behind file (VB version)

Code-behind file (C# version)

To my surprise, the output made the bold text in my bullets look very bad:

All the angle brackets in the <strong> tags were being HTML encoded to < and >, which is normally a nice safety feature, but in this case I wanted to retain the angle brackets as-written so the page could see the HTML tags and render the bold text.

After I realized that the BulletedList control HTML encodes all plain text in each ListItem, I figured out fairly quickly that there was no option to output un-encoded (raw) text.  A Google search on the topic only turned up one person who posted a usenet question about the same problem, without any replies.

So I did what any responsible .NET coder would do: I built my own control.

RichTextBulletedList Control

The RichTextBulletedList control uses the very common technique of inheriting all the properties and methods of the .NET control (in this case from the BulletedList control), and overriding the Render() method to control the output.

The RichTextBulletedList's Render() method calls the base class's Render() method, but instead of allowing the base method to write directly to the page, a new HtmlTextWriter is created and is passed to the base method, rather than passing the page's HtmlTextWriter.

Once the output from the base class's Render() method is captured, it is then modified to restore angle brackets, as well as quote characters.  (In addition to the angle brackets, the base class also changes quotes (") into ", so we need to take care of that too, so attribute values in the HTML tags can be recognized as such.) Then, the modified output is passed to the page.

Below is the complete source listing for the RichTextBulletedList control.  To create the control, create a new class file in the site's App_Code folder, and replace the default code in the new class file with the following:

RichTextBulletedList.vb (VB version)

RichTextBulletedList.cs (C# version)

Then, make two small changes to the example page, inserting a <%@ Register %> tag and changing the BulletedList tag to a RichTextBulletedList tag.  Here is the new page source:

Source (.aspx file)

Now when the page is opened in a web browser we see the desired appearance, with the <strong> tags properly rendered as bold text.

Other Thoughts

You may have noticed an odd line of code in the RichTextBulletedList source listing:

VB

C#

This is actually a fairly important line of code, because it retains the original BulletedList's ability to display HTML encoded angle brackets and quotes, even in the same line of text where some of the angle brackets and quotes have been un-encoded.

To keep an angle bracket or quote character HTML encoded (not interpreted as an HTML tag), just double-up the characters.  For example, to show the plain text string, "In all cases 1 < 2", you would create a ListItem with the text, "In all cases 1 << 2".

For creating good, reusable controls, the concept of adding functionality without eliminating existing functionality is important, and this shows that concept in a small way.

Summary

The RichTextBulletedList control is one of those nice, small additions to any ASP.NET toolkit to quickly solve a specific problem.

Rather than re-inventing the wheel by creating a completely new control, we built new functionality on top of the existing ASP.NET 2.0 BulletedList control, and to the greatest extend possible, we were very careful to preserve all of the existing functionality and behavior.

For developers who have not yet ventured into the realm of modifying existing controls, this can provide a simple example, not only to show that it can be fairly simple, but also to demonstrate some of the reusable code concepts you'll want to follow.

The new control's code also demonstrates how to capture and modify the output of a base class's Render() method, and through this example stresses the importance of using the base class's Render() method, rather than completely replacing it.

You can find an example of the RichTextBulletedList in action here.  In the lower-right portion of the page, the unordered list with bold and non-bold text is rendered using the RichTextBulletedList control.

Author Bio

Todd Northrop is the owner and creator of Lottery Post, the Internet's largest online lottery community.  He founded his company, Speednet Group, to perform consulting, web development, and web hosting.  Todd has specialized in software development using Microsoft products since around the time Visual Basic 3.0 made its debut, and has modeled and programmed databases from the time Microsoft acquired SQL Server from Sybase.  He originally created Lottery Post 7 years ago using classic ASP and SQL Server 2000, and is now in the process of rearchitecting the site using ASP.NET 2.0 with ASP.NET AJAX.  It will be a multi-year effort by the time it's complete, with the nice side-effect of requiring the creation of cool new techniques and features that he can write about.

About Speednet .

Sorry, no bio is available This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
HtmlDecode	Wesley Bakker	2/2/2007 9:43 AM
Hi Todd, It's much easier to use HtmlDecode instead of all sorts of regex. Cheers, Wes Reply | Permanent link
RE: HtmlDecode	Speednet .	2/2/2007 10:25 AM
Hello Wes, Thanks for commenting! It would indeed be much easier to execute one HtmlDecode, followed by a one Regex to change the << >> and "". However, the point of this article and the control is to maintain as much of the base functionality as possible, and only change what is necessary to acheive the desired functionality. Doing an HtmlDecode may have other effects beyond preserving HTML tags. For example, the — code may be changed into the actual character, and so on. If that is your intention, then it would be better to use HtmlDecode, but my intention when creating this control was to maintain as much of the base control's functionality as possible. -Todd Reply | Permanent link
RE: HtmlDecode	Speednet .	2/2/2007 10:26 AM
Hello Wes, Thanks for commenting! It would indeed be much easier to execute one HtmlDecode, followed by a one Regex to change the << >> and "". However, the point of this article and the control is to maintain as much of the base functionality as possible, and only change what is necessary to acheive the desired functionality. Doing an HtmlDecode may have other effects beyond preserving HTML tags. For example, the — code may be changed into the actual character, and so on. If that is your intention, then it would be better to use HtmlDecode, but my intention when creating this control was to maintain as much of the base control's functionality as possible. -Todd Reply | Permanent link
RE: HtmlDecode	Speednet .	2/2/2007 10:27 AM
Sorry for the double-post, I was thrown by the AJAX posting, and did not notice that it made the first post. Reply | Permanent link
RenderBulletText	Richard Deeming	2/3/2007 4:21 PM
A better solution is to override the RenderBulletText method. This avoids the need to capture and maniplutae the output, and ensures that only the item text is affected. protected override void RenderBulletText(ListItem item, int index, HtmlTextWriter writer) { switch (this.DisplayMode) { case BulletedListDisplayMode.Text: if (!item.Enabled) { writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled"); writer.RenderBeginTag(HtmlTextWriterTag.Span); writer.Write(item.Text); writer.RenderEndTag(); } else { writer.Write(item.Text); } return; case BulletedListDisplayMode.HyperLink: if (!item.Enabled || !this.IsEnabled) { writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled"); } else { writer.AddAttribute(HtmlTextWriterAttribute.Href, ResolveClientUrl(item.Value)); if (!string.IsNullOrEmpty(this.Target)) { writer.AddAttribute(HtmlTextWriterAttribute.Target, this.Target); } } if (!string.IsNullOrEmpty(this.AccessKey)) { writer.AddAttribute(HtmlTextWriterAttribute.Accesskey, this.AccessKey); } writer.RenderBeginTag(HtmlTextWriterTag.A); writer.Write(item.Text); writer.RenderEndTag(); break; case BulletedListDisplayMode.LinkButton: if (!item.Enabled || !this.IsEnabled) { writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled"); } else { PostBackOptions options = new PostBackOptions(this); options.Argument = index.ToString(Culture Reply | Permanent link
Re: RenderBulletText	Speednet .	2/3/2007 4:35 PM
Thank you for commenting Richard! Your code seems to have been cut off, but I understand your point. That certainly is another valid way to go with it. I'm not sure which is "better", but someone creating a RichTextBulletedList on their own now has one more way to do it! -Todd Reply | Permanent link
lottery site	Alberto Nigris	2/4/2007 6:17 AM
Hi Todd, can you say something about the very nice popup in gridview of your lottery site? The combo with indentation is very nice too. Did you use commercial controls or something else? Thanks Reply | Permanent link
Re: lottery site	Speednet .	2/4/2007 7:43 AM
Thank you Alberto. The popup menu is being done with Milonic menus (www.milonic.com), although I am pushing them pretty hard by customizing the popup with JavaScript after the user clicks the link. The drop down box with indentation is using , which is a standard HTML tag that many people don't even know about. I created an extended version of the DropDownBox server control that allows you to add optgroup markers whereever you like, either declaritively or programmatically. Thanks for commenting! -Todd Reply | Permanent link
Re: lottery site	Speednet .	2/4/2007 7:45 AM
The word "OPTGROUP" was dropped by the blog engine above. The sentence should read, "The drop down box with indentation is using OPTGROUP..." Reply | Permanent link
Nice Update	UncleJohnsBand .	1/6/2007 6:30 PM
This was perfect.....I have added it the Enhanced Web Admin (EWA) that GBPVR uses. I maintin the code for EWA and this was something that I didn't even know that I needed. ;-) However...after trying it out I foung a great use for it. GBPVR: http://www.gbpvr.com/ What is GB-PVR? GB-PVR is a fully featured Personal Video Recorder (PVR), allowing you to schedule TV recordings and view and pause live TV. In additional to this PVR functionality, it also acts as a media center allowing you to watch movies, listen to music, view pictures and listen to FM radio. GB-PVR also supports specialist hardware decoders including Sigma Designs XCard, Hauppauge PVR350 and Hauppauge MediaMVP. GB-PVR also supports multiple tuners, allowing you to record more multiple channels at one time. Reply | Permanent link

---

Please login to rate or to leave a comment.