Click here to Skip to main content
15,867,568 members
Articles / Web Development / XHTML
Article

Color Picker ASP.NET AJAX Extender Control

Rate me:
Please Sign up or sign in to vote.
4.82/5 (20 votes)
1 Oct 2008CPOL6 min read 133.6K   49   20
Web UI coclor picker control implemented as an ASP.NET AJAX Extender.

Introduction

Color Picker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup block. You can interact with the Color Picker by clicking on a colored area to set a color. It's built on top of ASP.NET AJAX and the AJAX Control Toolkit library.

Why the Color Picker Extender?

It is not that easy to find a decent color picker control for ASP.NET. There are a number of pure JavaScript color picker controls out there, but just a few of them leverage the ASP.NET server side model. If however you strict your requirements even further, and decide that you want to use ASP.NET AJAX and the AJAX Control Toolkit, then finding such a color picker would be much more challenging for you. So, the reason of this work is to overcome this challenge and provide the developers' community with an easy to use standard open source solution.

What's Special About the Color Picker Extender?

  1. Color Picker is built on top of ASP.NET AJAX and the AJAX Control Toolkit, which makes it a natural choice for those using those frameworks.
  2. Color Picker is not a standalone server control, but an AJAX extender to a standard TextBox ASP.NET server control, which makes it very easy to use.
  3. Color Picker extender is multi-browser compatible: it works with IE 6/7, Firefox, Safari, and Goggle Chrome, which makes it totally suitable for Web 2.0 solutions.
  4. Color Picker is compatible with the UpdatePanel: can be placed inside the UpdatePanel, which makes it useful for both client-side and server-side scenarios.

Design Approach

When a user input of a color value is required, the challenge is that at the end, the color value is a 6 digit hexadecimal number, and it is not that transparent for an average person how to associate this number with a visual color. So, from this point of view, the requirement of what we need can be formulated as: a simple, visual way to reliably select a 6 digit hexadecimal color value and submit it to a Web application.

In ASP.NET, the basic user input functionality is provided by a standard TextBox input control, so it is natural to build a Color Picker as an extender to a TextBox control. Visualizing a color selection, obviously, should be client-side functionality in order not to spoil the user experience with heavy page refreshing. Having such solid platforms as ASP.NET AJAX and the AJAX Control Toolkit at our disposal makes it an easy choice to build the Color Picker as an ASP.NET AJAX Control Toolkit Extender control.

Additionally, taking this approach allows separating functional concerns of the user input between multiple controls when each one is responsible for a certain part of the entire solution only: TextBox provides with basic input and submission functionality; the color picker provides a client-side visual way of a color selection; if we need to validate a value before submitting it to the server, a set of validator controls are out there to help.

Project Setup

The project for the AJAX extender can be easily created from the "ASP.NET AJAX Control Project" template that comes with Visual Studio 2008, or using the one from the AJAX Control Toolkit. More information about setting the environment is available here.

After creating a project (see the screenshot of a Visual Studio Solution Explorer window), it should contain at least two files: {Control}Extender.cs and {Control}Behavior.js where {Control} substitutes the name of the control, which, is in this case, is ColorPicker. The {}Extender.cs file contains a C# class that is derived from the AjaxControlToolkit.ExtenderControlBase class, and represents an AJAX server extender control available on an ASP.NET page. The {}Behavior.js file contains the JavaScript code that implements the client-side functionality according to the ASP.NET AJAX framework rules. Additional files of the project like *.ico, *.css, and {}Designer.cs are used mostly for decorating the usage of the extender in the IDE.

One very important detail of the project is that all the resource files (anything that is not C# code) should have the BuildAction set to Embedded Resource in the Properties window, and a corresponding [assembly: WebResource(...)] attribute must appear in the {}Extender.cs file in order for the resource to be accessible on a web page.

And, of course, as the AJAX Control Toolkit is used, don't forget to have a reference to the AjaxControlToolkit.dll.

Implementation Details

The largest part of all the work including client-side rendering, events hooking up, cross-browser compatibility, etc., is done by both ASP.NET AJAX and the AJAX Control Toolkit framework, so the only thing left really for a developer is to implement the visual appearance of the control.

The first version of the color picker UI is very simple, and is implemented as a table of 216 predefined colors. It's rendered as follows:

HTML
<table>
    <tbody>
        <tr>
            <td><div> </div></td>...
        </tr>
        ...
    </tbody>
</table>

The table consists of 12 rows of 18 cells each. Each cell contains a clickable div element, with the background color attribute set to a represented color value. The size and appearance of the table is defined through the embedded CSS definitions.

Usage Example

The Color Picker extender is extremely easy to use. First of all, there is no need to manipulate the HTML or JavaScript code at all: everything is done on an ASP.NET page via regular mark-up.

First, register the Color Picker assembly either on an ASP.NET page or in a Web.config file:

Page:

ASP.NET
<%@ Register TagPrefix="cdt" Assembly="CDT.ColorPickerExtender" Namespace="CDT" %>

Web.config:

ASP.NET
<add tagprefix="cdt" namespace="CDT" assembly="CDT.ColorPickerExtender" />

Then, add a ColorPicker tag on the page and assign its properties to the corresponding values:

ASP.NET
<asp:textbox id="TextBox1" runat="server" columns="7" maxlength="7" />
<asp:imagebutton id="ImageButton1" runat="server"
   imageurl="~/Images/icon_colorpicker.gif" />
<cdt:colorpickerextender id="cpe" runat="server"
      targetcontrolid="TextBox1"
      samplecontrolid="ImageButton1"
      popupbuttonid="ImageButton1" />

Done. You can download a working example with the Color Picker extender itself from the release page of the Color Picker’s Codeplex project.

Where to

There are already a few ideas for further development directions of the Color Picker extender. Some folks mentioned that it'd be nice to have different versions of the UI (not just a table of predefined colors, but also something more interactive like a Windows color picker, for example). Another feature is to introduce a SampleDisplayMode to be able to select what type of color to change for the sample element: background (as it's now), text color, or both. Custom styling of the Color Picker UI has to become available through CSS, and animation of the popup block is nice to have too. Additional suggestions are welcome on the Color Picker's project page on Codeplex.

References

The Color Picker extender is an open source project on codeplex.com, and everybody is welcome to visit it here: www.codeplex.com/cpe, download the latest release, leave a comment, start a discussion, suggest a feature, or report a bug.

You may also want to check out my blog: blog.turlov.com, for future announcements about the Color Picker extender.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Canada Canada
Alexander Turlov is a professional software development consultant that has been working in IT industry since 1987. His programming experience includes such languages as FORTRAN, Pascal, Basic, C, C++ and C#. He's been working for different industries including but not limited to science, manufacturing, retail, utilities, finance, insurance, health care, education and so on. His area of professional interests is cloud powered rich web applications development with .NET, C#, ASP.NET/MVC and JavaScript. He is working in software development doing architecture, design and development on .NET platform and using Microsoft Visual Studio, Azure and Visual Studio Team Services as his primary tools. He holds a M.Sc. degree in physics and various industry certifications including MCSD.NET, Azure and Scrum.

View my profile on LinkedIn

View my blog

Comments and Discussions

 
Questionajax control tool kit Pin
sathish430327-Mar-12 23:04
sathish430327-Mar-12 23:04 
QuestionAjax Toolkit ColorPickerExtender Control in ASP.Net Pin
Rajesh Singh0072-Jan-12 2:27
Rajesh Singh0072-Jan-12 2:27 
AnswerRe: Ajax Toolkit ColorPickerExtender Control in ASP.Net Pin
Alexander Turlov7-Jul-12 13:54
Alexander Turlov7-Jul-12 13:54 
GeneralColor Picker Extender in Model Popup Extender Pin
koese17-Feb-10 17:05
koese17-Feb-10 17:05 
GeneralRe: Color Picker Extender in Model Popup Extender Pin
Alexander Turlov1-Apr-10 8:25
Alexander Turlov1-Apr-10 8:25 
GeneralBuilding a SamplePanel by using three ColorPicker's Pin
calcpuc12-Aug-09 9:23
calcpuc12-Aug-09 9:23 
GeneralRe: Building a SamplePanel by using three ColorPicker's Pin
Alexander Turlov18-Aug-09 5:06
Alexander Turlov18-Aug-09 5:06 
GeneralRe: Building a SamplePanel by using three ColorPicker's Pin
calcpuc23-Aug-09 2:55
calcpuc23-Aug-09 2:55 
GeneralColorPickerExtender+VS 2005 Pin
judyIsk20-Jul-09 23:04
judyIsk20-Jul-09 23:04 
GeneralRe: ColorPickerExtender+VS 2005 Pin
Alexander Turlov23-Jul-09 8:39
Alexander Turlov23-Jul-09 8:39 
GeneralRe: ColorPickerExtender+VS 2005 Pin
judyIsk25-Jul-09 21:18
judyIsk25-Jul-09 21:18 
AnswerRe: ColorPickerExtender+VS 2005 Pin
Alexander Turlov28-Jul-09 9:24
Alexander Turlov28-Jul-09 9:24 
QuestionGood work - but is it possible to change color pallets? Pin
taminha23-Mar-09 8:01
taminha23-Mar-09 8:01 
AnswerRe: Good work - but is it possible to change color pallets? Pin
Alexander Turlov6-Apr-09 4:22
Alexander Turlov6-Apr-09 4:22 
GeneralWell done ;) - My 5 Pin
Alomgir Miah A19-Feb-09 4:24
Alomgir Miah A19-Feb-09 4:24 
QuestionUsing The OnClientColorSelectionChanged property Pin
EOLNik1-Dec-08 11:51
EOLNik1-Dec-08 11:51 
AnswerRe: Using The OnClientColorSelectionChanged property [modified] Pin
Alexander Turlov11-Mar-09 5:47
Alexander Turlov11-Mar-09 5:47 
GeneralRun on .NET 2.0 Framework Pin
yoon lim14-Oct-08 23:17
yoon lim14-Oct-08 23:17 
I noticed that it is designed for .NET 3.5
I just wondered can it run on .NET 2.0?

Cheers
AnswerRe: Run on .NET 2.0 Framework Pin
Alexander Turlov15-Oct-08 6:32
Alexander Turlov15-Oct-08 6:32 
GeneralThanks Pin
Member 45654333-Oct-08 12:48
Member 45654333-Oct-08 12:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.