Dotnet with Naveen: Color Picker Control

In this article I'm trying to explain how to work with Color Picker Control in ASP.net AJAX. This will give you the user friendly output. This article will help you for beginners those who are start to work with this.

Color Picker in ASP.net AJAX :

AJAX:

For this we must download AJAX control Toolkit dll and add reference to the project, by right clicking the project and choose assembly reference to add that. After added the dll add below lines of code in source code.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Color Picker Description:

Color picker is an ASP.net Ajax Extender control this will attach with TextBox control. It provides client side color-picking functionality. Once we click on Textbox then it will display the appropriate color in the texbox itself.

Color Picker Properties:

TargetControlID : The ID of the TextBox to extend with the color picker.

OnClientColorSelectionChanged :A client JavaScript function that will be called when the colorSelectionChanged event is raised.

Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ColorPicker.aspx.cs" Inherits="AJAX_ColorPicker" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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>
        function colorChanged(sender) {
            var txt = document.getElementById("txtColor").value;

            sender.get_element().style.color = "#" + txt;                 
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"></asp:ToolkitScriptManager>
    <div>

        <asp:TextBox ID="txtColor" runat="server" Font-Bold="true"></asp:TextBox>
        <asp:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="txtColor" OnClientColorSelectionChanged="colorChanged">
        </asp:ColorPickerExtender>

    </div>
    </form>
</body>
</html>

Script Manager:

</ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" >

Without wrote this line in source code it's throws the server error to overcome this issue we just add above lines of code under form tag.

Output:

Conclusion:

This article will help you for fresher those who are perform to design chart application and those who are beginners to perform this.

Dotnet with Naveen

About Me

Thursday 19 November 2015

Color Picker Control