Click here to Skip to main content
11,637,415 members (67,499 online)
Click here to Skip to main content

Color Picker ASP.NET AJAX Extender Control

, 1 Oct 2008 CPOL 86.3K 48
Rate this:
Please Sign up or sign in to vote.
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:

<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:

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

Web.config:

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

Share

About the Author

Alexander Turlov
Architect
Canada Canada
Alexander Turlov has been working in IT industry since 1987. His programming experience includes such languages as FORTRAN, Pascal, and Basic, C, C++ and C#. He's been working for different industries like science, manufacturing, retail, utilities, finance, insurance, health care, education and so on. His area of interests is 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, IIS and SQL Server as his primary tools, and a lot of other commercial and open source frameworks and tools. He holds a M.Sc. degree in physics and an MCSD.NET certification.

View my profile on LinkedIn

View my blog

You may also be interested in...

Comments and Discussions

 
Questionajax control tool kit Pin
sathishyadhuv27-Mar-12 23:04
membersathishyadhuv27-Mar-12 23:04 
QuestionAjax Toolkit ColorPickerExtender Control in ASP.Net Pin
Rajesh Singh0072-Jan-12 2:27
memberRajesh Singh0072-Jan-12 2:27 
AnswerRe: Ajax Toolkit ColorPickerExtender Control in ASP.Net Pin
Alexander Turlov7-Jul-12 13:54
memberAlexander Turlov7-Jul-12 13:54 
GeneralColor Picker Extender in Model Popup Extender Pin
koese17-Feb-10 17:05
memberkoese17-Feb-10 17:05 
GeneralRe: Color Picker Extender in Model Popup Extender Pin
Alexander Turlov1-Apr-10 8:25
memberAlexander Turlov1-Apr-10 8:25 
GeneralBuilding a SamplePanel by using three ColorPicker's Pin
calcpuc12-Aug-09 9:23
membercalcpuc12-Aug-09 9:23 
GeneralRe: Building a SamplePanel by using three ColorPicker's Pin
Alexander Turlov18-Aug-09 5:06
memberAlexander Turlov18-Aug-09 5:06 
GeneralRe: Building a SamplePanel by using three ColorPicker's Pin
calcpuc23-Aug-09 2:55
membercalcpuc23-Aug-09 2:55 
GeneralColorPickerExtender+VS 2005 Pin
judyIsk20-Jul-09 23:04
memberjudyIsk20-Jul-09 23:04 
GeneralRe: ColorPickerExtender+VS 2005 Pin
Alexander Turlov23-Jul-09 8:39
memberAlexander Turlov23-Jul-09 8:39 
Could you please describe what exact problems you have?

In general if you use VS 2005 it does not allow you to compile your app against .NET 3.5 by default and instead references .NET 2.0 + Web Extensions 1.0. Such configuration won't allow you using the latest Ajax Control Toolkit that includes Color Picker control because it's compiled against .NET 3.5.

However you can manually reconfigure your app to include references to Web Extensions 3.5 (if you have .NET 3.5 installed on your machine of course) and then use the latest Ajax Control Toolkit. I can not unfortunately give you the whole instruction of how to configure your web app to use .NET 3.5; please refer to Microsoft docs.

If you still want to build your app against .NET 2.0 you wont' be able to use the latest Ajax Control Toolkit and you'll need to use the ACT version for .NET 2.0. In this case you have to download the source code of the Color Picker control from Codeplex and compile it against .NET 2.0. It will work with the corresponding ACT version for .NET 2.0.

Alexander Turlov
MCSD.NET

GeneralRe: ColorPickerExtender+VS 2005 Pin
judyIsk25-Jul-09 21:18
memberjudyIsk25-Jul-09 21:18 
AnswerRe: ColorPickerExtender+VS 2005 Pin
Alexander Turlov28-Jul-09 9:24
memberAlexander Turlov28-Jul-09 9:24 
QuestionGood work - but is it possible to change color pallets? Pin
taminha23-Mar-09 8:01
membertaminha23-Mar-09 8:01 
AnswerRe: Good work - but is it possible to change color pallets? Pin
Alexander Turlov6-Apr-09 4:22
memberAlexander Turlov6-Apr-09 4:22 
GeneralWell done ;) - My 5 Pin
Alomgir Miah Abdul19-Feb-09 4:24
memberAlomgir Miah Abdul19-Feb-09 4:24 
QuestionUsing The OnClientColorSelectionChanged property Pin
EOLNik1-Dec-08 11:51
memberEOLNik1-Dec-08 11:51 
AnswerRe: Using The OnClientColorSelectionChanged property [modified] Pin
Alexander Turlov11-Mar-09 5:47
memberAlexander Turlov11-Mar-09 5:47 
GeneralRun on .NET 2.0 Framework Pin
yoon lim14-Oct-08 23:17
memberyoon lim14-Oct-08 23:17 
AnswerRe: Run on .NET 2.0 Framework Pin
Alexander Turlov15-Oct-08 6:32
memberAlexander Turlov15-Oct-08 6:32 
GeneralThanks Pin
Member 45654333-Oct-08 12:48
memberMember 45654333-Oct-08 12:48 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 1 Oct 2008
Article Copyright 2008 by Alexander Turlov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid