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
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 .
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)
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" %>