Adding a Color Picker Control To Your ASP.NET ApplicationBy Scott Mitchell
Over the years I've worked on a number of projects where users could customize some aspect of the site. One such application surveyed a group of employees with and then made recommendations on how to best organize the employees into teams. Companies could buy a certain number of surveys and then direct their employees to the site to complete the survey. Before sending their employees to the site, a company could adjust the survey's look and feel, uploading their own logo and choosing background and foreground colors, among other customizations.
A common requirement for such customizable websites is the ability for the user to select one or more colors. In a website, colors are typically specified via a hexadecimal
string that specifies the red, green, and blue components. For example, the string
#FF0000 is the string for the color red. Of course, asking a user to choose
a color by typing in a hexadecimal string is a surefire way to confound and frustrate them. Ideally, users will select colors from a color picker, which is a user interface
element that displays a palette of colors from which the user can select one.
ASP.NET does not ship with a built-in color picker control, but there are a variety of commercial, free, and open source color picker controls. This article looks at two such controls. This article starts with a look at the open source ColorPicker Control Extender that ships as part of the Ajax Control Toolkit. Next, it examines the free ASP.NET Color Picker control from obout. Read on to learn more!
Using the Color Picker Extender in the ASP.NET Ajax Control Toolkit
The ASP.NET Ajax Control Toolkit (ACT) is an open source collection of ASP.NET server controls that provide client-side and Ajax-related functionality. Most of the controls in the ACT work as extenders, meaning that they extend the functionality of an existing Web control on the page. For instance, the TextBoxWatermark Extender control extends a TextBox control, including a watermark in the textbox's content when rendered in a browser.
Using the ColorPicker Extender in your own project is fairly straightforward. To get started, you can either download the demo available at the end of this article - which includes
the ACT assembly (
AjaxControlToolkit.dll) - or you can download the ASP.NET Ajax Control Toolkit from
CodePlex (if you haven't done so already). Keep in mind that the ColorPicker control was added to the ACT in May 2009 (release 30512). If you have an older version of the
ACT you'll need to either get a newer version before continuing or use the ACT assembly included in the download at the end of this article, which is the assembly for the most
recent stable release at the time of writing (release 30930). Finally, add the controls in the ACT to the Toolbox in Visual Studio.
|New To The Ajax Control Toolkit?|
|If you have not used the ACT before then you may be a bit overwhelmed with these instructions, as there's a lot of "download this" and "do that." Rather than provide detailed instructions on getting started with the ACT, let me recommend that you read the Get Started with the AJAX Control Toolkit tutorial. This tutorial walks through downloading the ACT and adding the ACT controls to Visual Studio's Toolbox.|
The Extender Wizard adds a ColorPicker Extender control to the page and associates the extender with the selected TextBox control via the extender's
property. The following declarative markup shows the germane markup after the ColorPicker Extender has been added. The red markup is what was
added by the Extender Wizard.
With that code in place, visit the page through a browser and click on the TextBox to display the color palette. After selecting a color, the palette disappears and the hexadecimal value of the selected color is displayed in the textbox. Now that the color has been stored in the TextBox, it will be sent back to the server on postback, where the selection can be saved to a database.
While this default behavior certainly works, it leaves a little to be desired. For starters, it shows the hexadecimal string in the TextBox. This may confuse most users, who likely have no idea of the relationship between the hexadecimal string and the selected color. Also, the TextBox is not read-only, meaning a user can type in a non-sensible value (or change the hexadecimal string added by the ColorPicker Extender). The download available at the end of this article includes a more refined user experience by implementing the following enhancements:
- The TextBox is only 35 pixels wide so that it looks more like a color swatch than a textbox.
colorChangedis executed. This function removes focus from the textbox and sets both the foreground and background colors of the textbox to the just-selected color. This has the effect of hiding the users text (as it's colored the same color as the background).
Note that both ColorPicker Extenders have their
OnClientColorSelectionChanged set to the same value. The
OnClientColorSelectionChanged property can
with the extender via the
get_element() function. Use the
get_selectedColor() function to retrieve the just-selected color. I created a function named
colorChanged, which removes focus from the TextBox and then sets both the foreground and background colors to the just-selected color.
The following screen shot shows this demo in action. In the screen shot, the user has already selected a color for the background and is in the process of choosing a foreground color.
When the user clicks the Place Order Button a postback ensues and the hexadecimal values in the TextBox controls are sent back to the server, where they can be read via the
Text properties and used as needed.
Picking Colors With obout's Free ASP.NET Color Picker Control
The ColorPicker Extender in the ACT is hardly the only ASP.NET color picker control available. Another such control is the free ASP.NET Color Picker from obout. obout makes a variety of commercial ASP.NET server controls, but the Color Picker control is available for free and offers a richer palette than the ColorPicker Extender in the ACT.
To get started with obout's ASP.NET Color Picker control, start by downloading the obout Suite, which includes all of
obout's ASP.NET controls. In the download you will find an assembly specifically for the Color Picker control (
obout_ColorPicker.dll) - copy this file to your
Bin folder and add the Color Picker control to Visual Studio's Toolbox.
To obout Suite download includes a plethora of demos that you can run and explore from your computer. There are also more than a dozen examples you can try out online from the Color Picker page. The demo available for download at the end of this article replicates the functionality implemented using the ACT's ColorPicker Extender, but with a few minor tweaks:
- Instead of using a TextBox control for the color swatch I instead used a Label control.
- Because I am not using a TextBox to store the color selection I need some way to transmit the selected colors from the client to the server on postback. I used two HiddenField controls to accomplish this.
With the obout Color Picker control I specify what control (if any) should show the selected color. Here, I selected the foreground and background color Labels accordingly.
You can also specify the client-side property that should be set to the selected color. This defaults to
value, which if used with a TextBox control as the target
would behave just like the ACT's ColorPicker Extender, setting the text of the TextBox to the selected color. However, I want the Label's background color set to the
selected color, so I set
Note the two HiddenField controls that appear at the top of the above markup. These controls are used to pass the user's selected colors back to the server on postback.
onFGColorPicked - which assign the just-selected
sender.getColor() returns the hexadecimal string of the
The following screen shot shows the obout Color Picker control in action. Note that the palette offers a wider array of color choices than the ACT's ColorPicker. Also, the obout Color Picker control includes the ability to have predefined colors displayed in the palette (or to limit the user to choosing among a set of pre-defined colors).