How to Use ColorPickerExtender Control on ASP.NET Web Page

By
Hi Friend , Today we will learn "How to Use ColorPickerExtender Control on ASP.NET Web page ".  This control is used to provide client-side color picking functionality with UI in a Pop-up.You can select the color from the color piker by pressing the color Picker palette. You can enter custom color  value in the Text Box Control which is not present in the color picker palette.  If you have not install Ajax Toolkit on your visual studio then first install it from Here .  
There are some Properties of the ColorPickerExtender control as given below:-
  • TargetControlID :- It sets the ID of the text box to extend with ColorPickerExtender control.
  • SampleControlID :- It sets the ID of the control to show the color picker's selected color.
  • PopupButtonID :- It Sets the ID of the control to show the color picker pop-up when clicked.
  • SelectedColor:- It indicates the color value with which the ColorPickerExtender Control is Initialized.
  • PopupPosition :- It indicates the position where the ColorPickerExtender  control's popup should appear.
  • OnClientColorSelectionChanged:- It invokes the JavaScript function when the colorSelectionChanged event is raised.
There are some steps to implement this whole concepts as given below:-
Step 1 :- First open your visual studio --> File --> New --> Website --> Select ASP.NET Empty website --> OK --> Open solution Explorer --> Add a New web form (Default.aspx).
Step 2 :- Now Drag and Drop ToolkitSriptManager , Panel control , image control , Text Box
and Image Button controls on the page as shown below:-
web form

Step 3 :- Now open solution Explorer --> Create a new Folder (Images) --> Paste your images inside this folder which you want to use in your web page as shown below:-
explorer

Step 4 :-  Now Go  each Properties of Image  and Image Button controls and Set appropriate Image URLs  as shown below:-
image_urls

Step 5 :- Now Open Source file --> Drag and drop  two ColorPickerExtender control and  bind its some properties  as given below in codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp; <span class="style2"><strong><span class="style3">&nbsp;How to Use 
        ColorPickerExtender Control on the Web Page</span></strong></span><br />
         <asp:ColorPickerExtender ID="ColorPickerExtender1" runat="server"  TargetControlID="TextBox1" SampleControlID="Panel1">
         </asp:ColorPickerExtender>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server" Height="171px" Width="473px">
            <asp:Image ID="Image1" runat="server" Height="163px" 
                ImageUrl="~/images/raksha.JPG" Width="180px" />
        </asp:Panel>
        <br />
        <span class="style1">(Click the Text Box or image button to show the color 
        picker)<br />
        </span>
        <br />
        <asp:TextBox ID="TextBox1" runat="server" Height="23px" Width="218px"></asp:TextBox>
        <asp:ImageButton ID="ImageButton1" runat="server" Height="24px" 
        ImageUrl="~/images/color.png" Width="30px" />
        <asp:ColorPickerExtender ID="ColorPickerExtender2" runat="server" TargetControlID="TextBox1" PopupButtonID="ImageButton1" PopupPosition="BottomLeft" SampleControlID="Panel1" SelectedColor="FF00FF">
        </asp:ColorPickerExtender>
    </div>
    </form>
</body>
</html>

Step 6 :- Now Run the application (press F5) --> You will see following output as shown below:-
color_output

Step 7 :- When you run the application,You can change the background color by pressing Image Button and Text Box controls as shown below:-
For More...
  1. Learn C# Language Complete Tutorials with real life examples
  2. Learn Asp.Net  Complete Tutorials with real life examples
  3. Learn Real Time .NET Tutorials  with real life examples
  4. Learn Mvc Tutorials with real life examples
  5. Learn WPF  Tutorials with real life examples
  6. Learn full  .NET Interview questions and answers for Job
  7. Learn Linq Tutorials with real life examples

0 comments:

Post a Comment

Powered by Blogger.