Click here to Skip to main content
13,836,827 members
Click here to Skip to main content
Add your own
alternative version


43 bookmarked
Posted 26 Sep 2006

AJAX Demystified - Part Three - An AJAX Color Picker using Anthem

, 26 Sep 2006
Rate this:
Please Sign up or sign in to vote.
Create an AJAX Color Picker for your website with the power of Anthem.

Sample Image - ajaxcolorpicker.gif


In my previous articles, I've delved into the basics of using the XMLHttpRequest object to create, send, receive, and process XML requests asynchronously from within a .NET application. Now that I've illustrated the majority of the mechanics behind creating the objects from within JavaScript, I'm going to (hopefully) simplify matters by introducing you to what I believe is one of the cleanest and simplest AJAX toolkits for Visual Studio, and show you a quick and simple way to create an AJAX-powered color picker for your ASP.NET application.


This example uses an AJAX toolkit referred to as Anthem. You may have seen the name thrown around quite a bit (especially in a lot of CodeProject articles). Anthem is a set of tools for Visual Studio that greatly eases the transition of your ASP.NET application into the world of AJAX. With some knowledge of Visual Studio, and virtually no knowledge of JavaScript, you can implement the functionality of AJAX controls simply by dragging the requisite control onto your web page and managing the code-behind.

I'm going to go into some detail on how to utilize the Anthem tools below, but before we begin, you should be sure you have the latest version of Anthem for your Visual Studio environment. You can download the control package (for free) at SourceForge. Anthem was created originally by Jason Diamond, and is now an active project on SourceForge. It is brilliant in its simplicity, and is definitely designed with the developer in mind. No, I'm not a shill for them. It's just good stuff.

Getting Started

Starting from this point, I'm going to assume a couple of things:

  • You have downloaded Anthem
  • You have built the project for your version of VS.NET
  • You have added the controls to your VS.NET toolbox

After you have added the controls to your VS.NET toolbox, it should look something like the following:

The Anthem Toolkit

In future articles, I will explore the utilization of some of the other controls provided, but for now, we're just going to stick with the Button and the Label controls.


Anthem's tools handle all of the JavaScript and XMLHttpRequests for you on the back end. You drag a control to a web page just like you would with an ASP.NET control. The main difference is that when you double click the control to add the default event handler, the Anthem controls create a callback function, instead of a postback function. This is the key to AJAX, and the beauty of the control set is that the event handler will look no different than a standard C# function in the code-behind.

In my example, I have created a simple HTML table that contains 48 cells (8 x 6). Within each cell is an Anthem button that has a certain background color. Each of these buttons has the same callback function within the code, as outlined below:

private void palette_Click(object sender, System.EventArgs e)
    Button btn = (Button)sender;
    this.btnColor.BackColor = btn.BackColor;
    this.lblColor.Text = ColorToHex(btnColor.BackColor);

The first part of the code implicitly casts the sender object into a Button type, because we know that the sender is in fact a Button. Now that we have the Button object (btn), we are going to set the btnColor object (another Button, this is the one that sits above the Label) to the background color of the sender object. Now, you will notice something important that is specific to Anthem:


What we are doing is letting the function know that we have changed something about the btnColor object, and that after the callback is complete, it will need to be "updated". This is the piece of code that will ensure that the new background color of btnColor will actually change and reflect on the client side.

The next step is to update the lblColor (Label) with our hexadecimal color value. You will notice that it calls the ColorToHex(System.Color) function. This function (and associated helper functions) are provided by Sandro Todesco, since, to my knowledge, there exists no single method in .NET to convert a System.Color to its hexadecimal value. This does the dirty work for us, consuming a System.Color, and returning the hexadecimal value. The code is documented internally regarding the origin of the conversion code and where you can download an example. In the palette_Click() function, again, you will notice:


Now that the Label has the hex value for the color, we'll make sure that the Label updates its text after the callback.

Using the Code

I have provided this demonstration of the functionality of Anthem for a couple of reasons. One, you may just want a color picker for your application. But, hopefully, you will also get a better feel for how easy Anthem is to utilize within your ASP.NET application. When you run the example, you might find it interesting to view the HTML source of the web page (right click on the page, then "View Source"). You will see all of the JavaScript functions that have been automatically created at runtime by the Anthem controls. Using AJAX in this manner enables people who are not JavaScript gurus to create very complicated AJAX-powered websites using the .NET language they are most comfortable with.

Happy coding!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Product Manager iMobile3
United States United States
I have worked professionally in IT since 2004, and as a software architect since 2008, specializing in user interface design and experience, something I am still extremely passionate about. In 2013 I moved into management, and since then I've held positions as Director of Product Development, Director of Engineering, and Practice Director.

You may also be interested in...

Comments and Discussions

Generalanother good colorpicker Pin
Viper30003-Jun-07 15:39
memberViper30003-Jun-07 15:39 
GeneralOpera 9.0 and IE7 Pin
Robin Imrie23-Nov-06 0:31
professionalRobin Imrie23-Nov-06 0:31 
GeneralRe: Opera 9.0 and IE7 Pin
Haojun lv-CH4-Feb-07 21:12
memberHaojun lv-CH4-Feb-07 21:12 
GeneralPlease clarify Anthem and Atlas Pin
varnk3-Oct-06 4:37
membervarnk3-Oct-06 4:37 
GeneralRe: Please clarify Anthem and Atlas Pin
DreamInHex3-Oct-06 4:43
memberDreamInHex3-Oct-06 4:43 
Questiondo you have a blog? Pin
wingsfish_27-Sep-06 22:22
memberwingsfish_27-Sep-06 22:22 
AnswerRe: do you have a blog? Pin
DreamInHex28-Sep-06 4:53
memberDreamInHex28-Sep-06 4:53 
GeneralFeedback Pin
TCHamilton27-Sep-06 7:25
memberTCHamilton27-Sep-06 7:25 
GeneralRe: Feedback Pin
DreamInHex27-Sep-06 8:28
memberDreamInHex27-Sep-06 8:28 
GeneralGood Article Pin
NormDroid26-Sep-06 11:00
professionalNormDroid26-Sep-06 11:00 
GeneralRe: Good Article Pin
DreamInHex26-Sep-06 11:29
memberDreamInHex26-Sep-06 11:29 
GeneralConvert Color To Hex Pin
onkelborg26-Sep-06 10:25
memberonkelborg26-Sep-06 10:25 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 11:26
memberDreamInHex26-Sep-06 11:26 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 11:29
memberonkelborg26-Sep-06 11:29 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 11:36
memberDreamInHex26-Sep-06 11:36 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 11:45
memberonkelborg26-Sep-06 11:45 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 11:58
memberDreamInHex26-Sep-06 11:58 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 12:15
memberonkelborg26-Sep-06 12:15 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 12:21
memberDreamInHex26-Sep-06 12:21 
GeneralRe: Convert Color To Hex Pin
Don Jewett5-Oct-06 23:13
memberDon Jewett5-Oct-06 23:13 
GeneralRe: Convert Color To Hex Pin
onkelborg6-Oct-06 2:52
memberonkelborg6-Oct-06 2:52 
GeneralRe: Convert Color To Hex Pin
DreamInHex6-Oct-06 7:21
memberDreamInHex6-Oct-06 7:21 
GeneralRe: Convert Color To Hex Pin
Don Jewett6-Oct-06 7:52
memberDon Jewett6-Oct-06 7:52 
GeneralRe: Convert Color To Hex Pin
ChrisPXL2-Oct-06 21:51
memberChrisPXL2-Oct-06 21:51 
GeneralRe: Convert Color To Hex Pin
DreamInHex3-Oct-06 4:33
memberDreamInHex3-Oct-06 4:33 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190114.1 | Last Updated 26 Sep 2006
Article Copyright 2006 by DreamInHex
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid