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:-
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:-
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:-
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.
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:-
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:-
Step 4 :- Now Go each Properties of Image and Image Button controls and Set appropriate Image URLs as shown below:-
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>
<span class="style2"><strong><span class="style3"> 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 7 :- When you run the application,You can change the background color by pressing Image Button and Text Box controls as shown below:-
- Learn C# Language Complete Tutorials with real life examples
- Learn Asp.Net Complete Tutorials with real life examples
- Learn Real Time .NET Tutorials with real life examples
- Learn Mvc Tutorials with real life examples
- Learn WPF Tutorials with real life examples
- Learn full .NET Interview questions and answers for Job
- Learn Linq Tutorials with real life examples
0 comments:
Post a Comment