ColorFul Web DropDown List in ASP.NET

In this example we will build an ASP.NET User Control which provides a listing of colors with the list items displayed in the actual color that the list item represents.This user control can be re-used across the web application, enabling the users to preview the color selections available in the drop down list, making your web page more interactive.

How it looks

Figure 1: Sample ColorCombo

Let's begin...

Conceptual Background

The code example generates a list of Colors using the KnownColors enumeration. We then remove the System Colors from this list, for the sake of this example - as the system colors would not be highly intuitive on a web-based interface.
We will make use of the color attribute of the html

And now the Details

If you like to check out the code right away, the complete code listing is available at the end of the article .

Getting started:

First, we create a new Visual C# Project of type ASP.Net Web Application and add a new User Control named as ColorComboUC.ascx

Add an HTML DropDown control from the toolbox (Note we will use the HTML Server Control and not the Web Server Control in this example. A known bug prevents the attributes property of ListItem from working with the DropDownList control. For more information, check out the related MS KB Article)

<Select id="cboColor" runat="server" NAME="cboColor"><option></option></select>
Note that the HTML control needs to be marked as a server control. If you drag-drop the control from the Visual Studio toolbox's HTML tab, right click on the control and click on 'Runas Server Control'

In the Page Load event handler, we will add code to populate the drop-down and set the color for each item within the list. First we get an enumeration of all Colors available in the KnownColor enumeration

KnownColor enumColor = new KnownColor();
Array Colors = Enum.GetValues(enumColor.GetType());

Next we have some code for removing the System Colors from the list of colors. Elements cannot be added or removed from an Array object, so we create another ArrayList object to contain our final list of colors

foreach(object clr in Colors)
{
if (!Color.FromKnownColor((KnownColor)clr).IsSystemColor)
ALColor.Add(clr.ToString());
}

The color of the dropdownlist's item(s) is set by specifying the color for the style tag in the attributes collection.

for (int i= 0 ;i < cboColor.Items.Count;i++)
{
cboColor.Items[i].Attributes.Add("style", "color:" + cboColor.Items[i].Text);
}

This would translate to an HTML representation as follows:
....
<option value="Red" style="color:Red">Red</option>
...

We added the code to set the attributes of the dropdownlist items in every page load, irrespective of postback. This is to work around the limitation that the attributes of the dropdownlist control on the Web User Control did not get loaded on PostBack. An alternative solution can save the attribute values in the ViewState and reload the attributes from the saved ViewState when the page is reloaded on PostBack.

We have also added some extra code to track the selected item from the list. Refer to the complete code listing for details

The only thing left is to use the user control in our web form and check out the colors !

Figure 2 : The simple test web page changes the background color of the label based on the color selected from the color combo.
Complete Code Listing - User Control

(1) User Control Code: ColorComboUC.ascx

<%@ Control %>
<%@ Import Namespace="System.Drawing" %>
<script language="C#" runat="server">
public String strSelectedColor;
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
KnownColor enumColor = new KnownColor();
Array Colors = Enum.GetValues(enumColor.GetType());
ArrayList ALColor = new ArrayList();
foreach(object clr in Colors)
if (!Color.FromKnownColor((KnownColor)clr).IsSystemColor)
ALColor.Add(clr.ToString());
cboColor.DataSource = ALColor;
cboColor.DataBind();
}
for (int i= 0 ;i < cboColor.Items.Count;i++)
{
cboColor.Items[i].Attributes.Add("style", "color:" + cboColor.Items[i].Text);
}
}
private void cboColor_ServerChanged(object sender, System.EventArgs e)
{
if (cboColor.SelectedIndex > -1)
strSelectedColor = cboColor.Items[cboColor.SelectedIndex].Text;
else
strSelectedColor = cboColor.Items[0].Text;
}
</script>
<SELECT id="cboColor" name="cboColor" runat="server" OnServerChange="cboColor_ServerChanged">
<OPTION selected></OPTION></SELECT>

(2) Test Web Page: colorcombotest.aspx

<%@ Page language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="uc1" TagName="WebUserControl1" Src="colorcomboUC.ascx" %>
<script Language="C#" runat="server">
private void Button1_Click(object sender, System.EventArgs e)
{
Label1.BackColor = Color.FromName(WebUserControl11.strSelectedColor);
}
</script>
<html>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form runat="server" ID="Form1">
<uc1:WebUserControl1 id="WebUserControl11" runat="server">
</uc1:WebUserControl1>
<asp:Button id="Button1" runat="server" Text="Test"OnClick="Button1_Click">
</asp:Button><BR>
<asp:Label id="Label1" runat="server" Width="516px">Label</asp:Label><BR>
<BR> </form>
</body>
</html>

What's next

You can modify this drop-down list to create a combo box to display your application specific listing with item's belonging to the same category with the same color to show a grouping. You can also apply different styles to modify the appearance of the list items in different ways - for example, apply different font styles to format the list items in different fonts

NOTE: This article is purely for educational purpose. This article should not be construed as a best practices white paper. This article is entirely original, unless specified. Any resemblance to other material is an un-intentional coincidence and should not be misconstrued as malicious, slanderous, or any anything else hereof.