When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, December 9, 2009

Adding a Color Picker Control To Your ASP.NET Application

By Scott Mitchell


Introduction


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!

- continued -

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.

The ColorPicker Extender control extends the functionality of a specified TextBox control. Specifically, the ColorPicker Extender adds JavaScript and other markup to the page so that when the user clicks inside the associated TextBox a color palette is displayed beneath the TextBox. The user can then pick a color from the palette. After doing so, the palette disappears and the textbox displays the hexadecimal string corresponding to the selected color. You can see a demo of this behavior from the ColorPicker Demonstration page.

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.

To use the ColorPicker Extender in an ASP.NET page, first make sure that the page (or the page's master page) includes a ScriptManager or ToolboxScriptManager control on it. The ScriptManager control adds the necessary JavaScript files used by the ASP.NET Ajax Framework and is mandatory when using any of the controls in the ACT. Next, add a TextBox to the page. To add a ColorPicker Extender to the Toolbox click the TextBox control's smart tag and choose the Add Extender option. This will bring up the Extender Wizard (shown below). Select the ColorPicker Extender and click OK.

Use the Extender Wizard to add a ColorPicker Extender to the TextBox.

The Extender Wizard adds a ColorPicker Extender control to the page and associates the extender with the selected TextBox control via the extender's TargetControlID 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.

<asp:TextBox ID="txtBGColor" runat="server"></asp:TextBox>

<cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server"
   Enabled="True" TargetControlID="txtBGColor">
</cc1:ColorPickerExtender>

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.
  • When a color is selected from the palette a JavaScript function named colorChanged is 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).
The demo available at the end of this article includes a user interface that prompts the user to enter a message and to choose foreground and background colors. As you might guess, the demo uses two ColorPicker Extender - one for the foreground color and one for the background color. The markup for the TextBox controls and ColorPicker Extenders follows:

<p>
   Choose a background color:
   <asp:TextBox ID="txtBGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
   
   <cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server"
      Enabled="True" TargetControlID="txtBGColor"
      OnClientColorSelectionChanged="colorChanged">
   </cc1:ColorPickerExtender>
</p>

<p>
   Choose a foreground color:
   <asp:TextBox ID="txtFGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
   
   <cc1:ColorPickerExtender ID="txtFGColor_ColorPickerExtender" runat="server"
      Enabled="True" TargetControlID="txtFGColor"
      OnClientColorSelectionChanged="colorChanged">
   </cc1:ColorPickerExtender>
</p>

Note that both ColorPicker Extenders have their OnClientColorSelectionChanged set to the same value. The OnClientColorSelectionChanged property can be used to execute a client-side JavaScript function once a color has been selected. From this function you can get a reference to the TextBox control associated 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.

<script type="text/javascript">
   function colorChanged(sender) {
      sender.get_element().blur();
      sender.get_element().style.color = '#' + sender.get_selectedColor();
      sender.get_element().style.backgroundColor = '#' + sender.get_selectedColor();
   }
</script>

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.

The user is selecting the 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 TextBox controls' 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 website's 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.
As with the earlier example, the obout Color Picker control demo includes two color pickers, one for the foreground color and one for the background color.

<asp:HiddenField runat="server" ID="fgColor" />
<asp:HiddenField runat="server" ID="bgColor" />

<p>
   Choose a background color:
   <asp:Label ID="lblBGColor" runat="server" Text=" " Width="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"></asp:Label>

   <obout:ColorPicker ID="cpBGColor" runat="server" TargetId="lblBGColor"
      PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onBGColorPicked">
   </obout:ColorPicker>
</p>

<p>
   Choose a foreground color:
   <asp:Label ID="lblFGColor" runat="server" Text=" " Width="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"></asp:Label>

   <obout:ColorPicker ID="cpFGColor" runat="server" TargetId="lblFGColor"
      PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onFGColorPicked">
   </obout:ColorPicker>
</p>

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 TargetProperty to style.backgroundColor.

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. The value of these HiddenField controls is set whenever the user selects a color. To execute a JavaScript function when a color is selected, use the Color Picker control's OnClientPicked property. I have created two JavaScript functions - onBGColorPicked and onFGColorPicked - which assign the just-selected color to the appropriate HiddenField value. As you can see from the code below, the JavaScript code sender.getColor() returns the hexadecimal string of the just-selected color.

<script type="text/javascript">
   function onBGColorPicked(sender) {
      var hiddenField = document.getElementById('<%=bgColor.ClientID %>');
      hiddenField.value = sender.getColor();
   }

   function onFGColorPicked(sender) {
      var hiddenField = document.getElementById('<%=fgColor.ClientID %>');
      hiddenField.value = sender.getColor();
   }
</script>

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

The user is selecting the foreground color.

Happy Programming!

  • By Scott Mitchell


    Attachments


  • Download the complete source code and demos from this article
  • Further Reading


  • Ajax Control Toolkit Home - Samples
  • Get Started with the AJAX Control Toolkit
  • ColorPicker Demonstration (Ajax Control Toolkit)
  • Using the ColorPicker Control Extender (VB Demo) (C# Demo)
  • obout Color Picker Control


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article