Post
Ask Question

AJAX ColorPickerExtender in ASP.Net With JavaScript Function

AJAX ColorPickerExtender

The AJAX ColorPickerExtender provides client-side color-picking functionality with a UI in a popup control. It can be attached to any ASP.NET TextBox control.
 
Properties of AJAX ColorPickerExtender 
  • targetcontrolid: It is used for the TextBox Control that will display the hexadecimal color value.

  • samplecontrolid: It is used for the Control that will show the preview of the selected color.

  • PopupButtonID: It is used for the ID of a control to show the ColorPicker popup when clicked.

  • PopupPosition: It indicates where the color picker popup appears, like at the BottomLeft (default).

  • BottomRight, TopLeft, TopRight,Left or Right of the TextBox.

  • OnClientColorSelectionChanged: The JavaScript function to be called when the color is changed.
Now we will create and use an AJAX ColorPickerExtender in ASP.NET.
 
Step 1: Open Visual Studio and create a project named AJAXColorPickerExtender.
 
Step 2: Add one Webform named ColorPicker.
 
Step 3: Now in design view we will add a ToolkitScriptManager from the ToolBox.
  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  2. </asp:ToolkitScriptManager>  
Step 4: Now we will add a TextBox that contains the Hexadecimal value of the color and a Button to trigger the color picker. We will also add a DIV in which we can view a preview of the colors. 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>  
  2.   
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.       
  15.         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  16.         </asp:ToolkitScriptManager>  
  17.        <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>  
  18.         <br />  
  19.         <br />  
  20.         <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">  
  21.         </div>  
  22.         <asp:Button ID="btncolor" runat="server" Text="SelectColor" />  
  23.     </div>  
  24.     </form>  
  25. </body>  
  26. </html>  
Now the Design View looks like this.
 
 
 
Step 5: Now we will add the AJAXColorPickerExtender from the AJAX panel from the ToolBox and we will provide some properties for it.
 
   
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>  
  2.   
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.       
  15.         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  16.         </asp:ToolkitScriptManager>  
  17.        <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>  
  18.         <br />  
  19.         <br />  
  20.         <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">  
  21.         </div>  
  22.         <asp:Button ID="btncolor" runat="server" Text="SelectColor" />  
  23.         <asp:ColorPickerExtender ID="ColorPickerExtender" runat="server"  
  24.             TargetControlID="tbcolor"  
  25.             SampleControlID="view"  
  26.             PopupButtonID="btncolor"  
  27.             PopupPosition="Right"  
  28.             OnClientColorSelectionChanged="Color_Change">  
  29.         </asp:ColorPickerExtender>  
  30.     </div>  
  31.     </form>  
  32. </body>  
  33. </html>  
Step 6: Now On the OnClientColorSelectionChanged event we call the Color_Change JavaScript function. 
  1. <script type="text/javascript">  
  2.         function Color_Change(sender){  
  3.             sender.get_element().value = "#" + sender.get_selectedColor();  
  4.         }  
  5.  </script>  
The function adds a Hash (#) as prefix to the color hexadecimal value in the TextBox.
 
Step 7: Now the complete code will be like this. 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>  
  2.   
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10.     <script type="text/javascript">  
  11.         function Color_Change(sender){  
  12.             sender.get_element().value = "#" + sender.get_selectedColor();  
  13.         }  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.     <form id="form1" runat="server">  
  18.     <div>  
  19.       
  20.         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  21.         </asp:ToolkitScriptManager>  
  22.        <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>  
  23.         <br />  
  24.         <br />  
  25.         <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">  
  26.         </div>  
  27.         <asp:Button ID="btncolor" runat="server" Text="SelectColor" />  
  28.         <asp:ColorPickerExtender ID="ColorPickerExtender" runat="server"  
  29.             TargetControlID="tbcolor"  
  30.             SampleControlID="view"  
  31.             PopupButtonID="btncolor"  
  32.             PopupPosition="Right"  
  33.             OnClientColorSelectionChanged="Color_Change">  
  34.         </asp:ColorPickerExtender>  
  35.     </div>  
  36.     </form>  
  37. </body>  
  38. </html>  
Now we will run project and see the output.
 
 
 
 
 
 
This is all about AJAX ColorPickerExtender in ASP.NET.
Thank you and happy coding. 


Similar Articles