Click here to Skip to main content
Click here to Skip to main content

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

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:

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:

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:

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

About the Author

UsualDosage
Architect
United States United States
I have been an ASP.NET/C# Programmer/Software Architect for about 10 years, specializing in web architecture, user interface, and user experience. I formerly wrote business applications for mortgage banking front-ends in C++ before switching to the .NET Framework many years ago, and I've never looked back. I'm an evangelist of HTML5 and web standards, and spend the majority of my time working on front end design, performance and scale.

My primary website is located at http://www.usualdosage.com

Comments and Discussions

 
Generalanother good colorpicker PinmemberViper30003-Jun-07 14:39 
GeneralOpera 9.0 and IE7 PinmemberRobin Imrie22-Nov-06 23:31 
GeneralRe: Opera 9.0 and IE7 PinmemberHaojun lv-CH4-Feb-07 20:12 
GeneralPlease clarify Anthem and Atlas Pinmembervarnk3-Oct-06 3:37 
GeneralRe: Please clarify Anthem and Atlas PinmemberUsualDosage3-Oct-06 3:43 
Questiondo you have a blog? Pinmemberwingsfish_27-Sep-06 21:22 
AnswerRe: do you have a blog? PinmemberUsualDosage28-Sep-06 3:53 
GeneralFeedback PinmemberTCHamilton27-Sep-06 6:25 
GeneralRe: Feedback PinmemberUsualDosage27-Sep-06 7:28 
GeneralGood Article Pinmembernorm .net26-Sep-06 10:00 
Good Job! 5 Cool | :cool:
 
We made the buttons on the screen look so good you'll want to lick them. Steve Jobs

GeneralRe: Good Article PinmemberUsualDosage26-Sep-06 10:29 
GeneralConvert Color To Hex Pinmemberonkelborg26-Sep-06 9:25 
GeneralRe: Convert Color To Hex PinmemberUsualDosage26-Sep-06 10:26 
GeneralRe: Convert Color To Hex Pinmemberonkelborg26-Sep-06 10:29 
GeneralRe: Convert Color To Hex PinmemberUsualDosage26-Sep-06 10:36 
GeneralRe: Convert Color To Hex Pinmemberonkelborg26-Sep-06 10:45 
GeneralRe: Convert Color To Hex PinmemberUsualDosage26-Sep-06 10:58 
GeneralRe: Convert Color To Hex Pinmemberonkelborg26-Sep-06 11:15 
GeneralRe: Convert Color To Hex PinmemberUsualDosage26-Sep-06 11:21 
GeneralRe: Convert Color To Hex PinmemberDon Jewett5-Oct-06 22:13 
GeneralRe: Convert Color To Hex Pinmemberonkelborg6-Oct-06 1:52 
GeneralRe: Convert Color To Hex PinmemberUsualDosage6-Oct-06 6:21 
GeneralRe: Convert Color To Hex PinmemberDon Jewett6-Oct-06 6:52 
GeneralRe: Convert Color To Hex PinmemberChrisPXL2-Oct-06 20:51 
GeneralRe: Convert Color To Hex PinmemberUsualDosage3-Oct-06 3:33 

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 | Mobile
Web02 | 2.8.140721.1 | Last Updated 26 Sep 2006
Article Copyright 2006 by UsualDosage
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid