Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML
Article

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

Rate me:
Please Sign up or sign in to vote.
4.62/5 (10 votes)
26 Sep 20064 min read 105.2K   395   43   25
Create an AJAX Color Picker for your website with the power of Anthem.

Sample Image - ajaxcolorpicker.gif

Introduction

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.

Background

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.

Overview

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:

C#
private void palette_Click(object sender, System.EventArgs e)
{
    Button btn = (Button)sender;
    this.btnColor.BackColor = btn.BackColor;
    this.btnColor.UpdateAfterCallBack=true;
    this.lblColor.Text = ColorToHex(btnColor.BackColor);
    this.lblColor.UpdateAfterCallBack=true;
}

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:

C#
this.btnColor.UpdateAfterCallBack=true;

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:

C#
this.lblColor.UpdateAfterCallBack=true;

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!

License

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


Written By
Software Developer (Senior) CentralReach
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.

Comments and Discussions

 
Generalanother good colorpicker Pin
Viper30003-Jun-07 14:39
Viper30003-Jun-07 14:39 
GeneralOpera 9.0 and IE7 Pin
Robin Imrie22-Nov-06 23:31
professionalRobin Imrie22-Nov-06 23:31 
GeneralRe: Opera 9.0 and IE7 Pin
Haojun lv-CH4-Feb-07 20:12
Haojun lv-CH4-Feb-07 20:12 
GeneralPlease clarify Anthem and Atlas Pin
varnk3-Oct-06 3:37
varnk3-Oct-06 3:37 
GeneralRe: Please clarify Anthem and Atlas Pin
DreamInHex3-Oct-06 3:43
DreamInHex3-Oct-06 3:43 
Questiondo you have a blog? Pin
wingsfish_27-Sep-06 21:22
wingsfish_27-Sep-06 21:22 
AnswerRe: do you have a blog? Pin
DreamInHex28-Sep-06 3:53
DreamInHex28-Sep-06 3:53 
GeneralFeedback Pin
TCHamilton27-Sep-06 6:25
TCHamilton27-Sep-06 6:25 
GeneralRe: Feedback Pin
DreamInHex27-Sep-06 7:28
DreamInHex27-Sep-06 7:28 
GeneralGood Article Pin
NormDroid26-Sep-06 10:00
professionalNormDroid26-Sep-06 10:00 
GeneralRe: Good Article Pin
DreamInHex26-Sep-06 10:29
DreamInHex26-Sep-06 10:29 
GeneralConvert Color To Hex Pin
onkelborg26-Sep-06 9:25
onkelborg26-Sep-06 9:25 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 10:26
DreamInHex26-Sep-06 10:26 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 10:29
onkelborg26-Sep-06 10:29 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 10:36
DreamInHex26-Sep-06 10:36 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 10:45
onkelborg26-Sep-06 10:45 
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 10:58
DreamInHex26-Sep-06 10:58 
GeneralRe: Convert Color To Hex Pin
onkelborg26-Sep-06 11:15
onkelborg26-Sep-06 11:15 
> Well, that's not really the point. This is an intermediate article, and the code is easy to follow and well commented. I don't generally consider simple string manipulation advanced or hard to understand. If you want to use named colors in your HTML, feel free. If you like more control and a wider support of colors, use Hex. It's a matter of preference to the designer. The code snippet I've included reliably returns hex values in all cases.

I can't see any reason to why you want to add extra code for something that's built in into the framework, with even better support since it returns the name if possible. Why reinvent a half wheel when there is a whole and tested wheel ready to use? You won't get fewer colors just since you use named colors, but the html that's produced it's easier to read, and the code will return hex if needed. But just if needed.

Right now I'm getting a feeling that you think of the web as a windows application rather then html, and want's to transform html into something that html isn't :/ It's _better_ to use names. The only reason I can think of is if you want to access the colors from javascript on the client and modify them, but I've got a feeling that it's not the case this time...
GeneralRe: Convert Color To Hex Pin
DreamInHex26-Sep-06 11:21
DreamInHex26-Sep-06 11:21 
GeneralRe: Convert Color To Hex Pin
Don Jewett5-Oct-06 22:13
Don Jewett5-Oct-06 22:13 
GeneralRe: Convert Color To Hex Pin
onkelborg6-Oct-06 1:52
onkelborg6-Oct-06 1:52 
GeneralRe: Convert Color To Hex Pin
DreamInHex6-Oct-06 6:21
DreamInHex6-Oct-06 6:21 
GeneralRe: Convert Color To Hex Pin
Don Jewett6-Oct-06 6:52
Don Jewett6-Oct-06 6:52 
GeneralRe: Convert Color To Hex Pin
ChrisPXL2-Oct-06 20:51
ChrisPXL2-Oct-06 20:51 
GeneralRe: Convert Color To Hex Pin
DreamInHex3-Oct-06 3:33
DreamInHex3-Oct-06 3: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.