In this article I will explain with an example, how to implement AJAX Control ToolKit Color Picker Extender control in ASP.Net.
 
 
Using the ASP.Net AJAX Control Toolkit
First you have to download and install the AJAX Control Toolkit DLL. For more details, refer my article Install AJAX Control Toolkit in Visual Studio ToolBox.
 
 
Registering ASP.Net AJAX Control Toolkit
In order to use ASP.Net AJAX Control Toolkit controls, you will need to add reference of AJAX Control Toolkit Library and then register on the Page as shown below.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net ScriptManager control, an ASP.Net TextBox, an HTML DIV and a Button control.
The HTML Markup also consists of an AJAX Control ToolKit Color Picker Extender control.
Color Picker has been set with the following properties:
1.  TargetControlID – The Control which will display the hexadecimal color value.
2. SampleControlID – The Control which will show the preview.
3.  PopupButtonID – The Control which will trigger the color picker.
4. OnClientColorSelectionChanged – The JavaScript function to be called when the color is changed.
The OnClientColorSelectionChanged event handler is assigned with JavaScript Color_Changed function.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" Width="170px" />
<br/>
<div id="preview" style="width: 70px; height: 70px; border: 1px solid #000; margin: 0 3px; float: left"></div>
<asp:Button ID="Button1" runat="server" Text="Choose Color" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
    SampleControlID="preview" PopupButtonID="Button1" PopupPosition="Right"
    OnClientColorSelectionChanged="Color_Changed" />
 
 
JavaScript function to set hexadecimal value in the TextBox
The following JavaScript function is called when color is selected.
Inside this function, a Hash (#) is added as prefix to the color hexadecimal value in the TextBox.
<script type = "text/javascript">
    function Color_Changed(sender)
    {
        sender.get_element().value = "#" + sender.get_selectedColor(); 
    }
</script>
 
 
Screenshot
AJAX Control Toolkit Color Picker Control in ASP.Net
 
 
Downloads
Download Code