One of the components of the 360 Web Content Management System (website in progress) that I wanted to develop was an events calendar that allowed you to post events into color-coded categories. You can see a demo of it here. At first, I had it so that users would manually enter in a 6-character HTML color code, but it was very non-intuitive for anyone who’s never worked with HTML before. Eventually I stumbled upon the ASP.NET Color Picker control. It’s a custom ASP.NET control that you can add to a page much in the way that you can add a text box, radio buttons, or a drop down list.

Here’s how to implement the ASP.NET Color Picker Control

(1) Download the library and add it to your project

First, download the library from the ASP.NET Color Picker Control website. Make sure to download the latest binary release from the website. Currently that version is ASP.NET Color Picker v.1.4.10423.1 Binary. Once you get the zip file, it will contain a library that you should extract to the /bin/ folder of your website.

(2) Register the library on your page

ASP.NET provides a set of standard controls that you can add to a page that start with the “ASP” prefix, such as “<ASP:TextBox runat=”server” id=”txtBox” />. Any custom controls will have their own prefix that you specify by registering the library on the page. It’s another line of code that you add to the top of the page next to your page definition. It should look something like this:

<%@ Register Assembly=”Karpach.WebControls” Namespace=”Karpach.WebControls” TagPrefix=”cc1″ %>

(3) Add the control to your page

Now that you have the library referenced, you can add the control to your page and make use of it.  For the purpose of this demo, I’m going to set the AutoPostBack property to true and run a function whenever the color is changed. This will show us the color that we picked inside of a label (also shown below) after we select a new color.

<cc1:ColorPicker ID=”colorBackgroundColor” runat=”server” AutoPostBack=”true” OnColorChanged=”chngColor” />
<br /><br />
<asp:Label ID=”lblResults” runat=”server” Text=””></asp:Label>

(4) Create Your C# Function

After we choose a color, we have to do something with it. With the ColorPicker control above, I’m using the OnColorChanged property to call the “chngColor” function, which in C# will look something like this. This will also demonstrate how to programmatically read the color chosen with the .Color property of the ASP.NET Color Picker Control

protected void chngColor(object sender, EventArgs e)
{
lblResults.Text = “<div style=’background-color:#” + colorBackgroundColor.Color.Replace(“#”, “”) + “;height:50px;width:80px;text-align:center;padding-top:35px;’>Sample Text</div>”;
}

(5) Success

So far, we’ve added the library to our project, registered the library on the page, added the control to the page, and done something with the color chosen by the user. Your page should look something like this:

You can download my sample program here.