Ajax ColorPickerExtender in ASP.NET Example

-

Ajax ColorPickerExtender in ASP.NET Example :



In this Post I am going to explain how to use Ajax ColorPicker Extender in ASP.NET. Ajax ColorPicker Extender provides client-side color-selecting functionality with graphically (UI) in a popup control. It can be attached to any ASP.NET TextBox control.
But First Learn “what is colorpicker and why we use inasp.net”.

Ajax ColorPicker example in asp.net:

Register Ajax toolkit on top of asp.net web page .
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Color Picker ASP.NET AJAX Extender Control :
For using this control we use select change event of colorpicker as like this
    <script type="text/javascript">
        function colorChanged(sender) {
            sender.get_element().style.color = "#" + sender.get_selectedColor();
        }
    </script>
Copy this script and past in to head section of page.

AJAX Control Toolkit Color Picker Control in ASP.Net

Write this code with the textbox
<ajaxToolkit:ColorPickerExtender ID="defaultCPE" runat="server" OnClientColorSelectionChanged="colorChanged"                                    TargetControlID="Color1" />

Here TargetcontrolID is the textboxID.

Full Code of  ColorPickerExtender Control in AJAX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="colorpickar.aspx.cs" Inherits="colorpickar" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function colorChanged(sender) {
            sender.get_element().style.color = "#" + sender.get_selectedColor();
        }
    </script>
   
   
    <style type="text/css">
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
    </style>
   
   
</head>
<body>
    <form id="form1" runat="server">
    <div class="" align="center">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <h1 class="style1">
                    Use of Ajax Color Picker with textbox control
                </h2>
        <h1 class="style1">
                    in
                    Asp.net
                </h2>
                <div class="_psot_container">
                    <table style="width: 100%;">                    
                                             
                        <tr>
                            <td align="right" valign="top">
                             <strong>   Choose Color :</strong>
                            </td>
                            <td align="left">
                                <asp:TextBox runat="server"
                                ID="Color1" MaxLength="6"
                                AutoCompleteType="None" />
                                 <br />
                                <ajaxToolkit:ColorPickerExtender ID="defaultCPE"
                                runat="server"
                                OnClientColorSelectionChanged="colorChanged"
                                TargetControlID="Color1" />
                                <br />
                               
                            </td>
                            <td>
                                &nbsp;
                            </td>
                        </tr>                   
                       
                        <tr>
                            <td align="center" colspan="2">
                               <h3> Now you can use this colore code in text tag or control.</h3>
                                <p> &nbsp;</p></td>
                            <td>
                                &nbsp;</td>
                        </tr>                       
                       
                    </table>
                </div>
            </div>
    </form>
</body>
</html> 
Download Full Code here...


C# Code of  ColorPickerExtender Control :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class colorpickar : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Color1.Attributes.Add("readonly", "readonly");
    }
}

Adding a Color Picker Control to Your ASP.NET Application:

Ajax ColorPickerExtender in ASP.NET Example
Ajax ColorPickerExtender

Other Asp.net Related Post:

Comments

Post a Comment