Introduction : ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control.We can interact with the ColorPicker by clicking on a colored area to set a color. It requires a binary reference to the ASP.NET AJAX Control Toolkit. ColorPicker extender is multi-browser compatible: it works with IE 6/7/8, Firefox, Safari and Goggle Chrome. ColorPicker is built on top of ASP.NET AJAX Control Toolkit and internally utilizes a Popup extender. ColorPicker is compatible with the UpdatePanel: can be placed inside the UpdatePanel.

ColorPicker Property :

Step 1 : Open Visual Studio 2010.

COB1.gif

Step 2 : Go to Solution Explorer and right-click.

COB2.gif

Step 3 : Drag and drop AJAX Control from Toolbox.

Step 4 : Now go to the Default.aspx page write a simple code for application.

Code :

<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 </head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div>
 <h1>Create a Business Card</h1>
 <asp:Label
ID="lblCardText"
Text="Card Text"
 AssociatedControlID="txtCardText"
 runat="server" />
 <br />
 <asp:TextBox
 ID="txtCardText"
 Runat="server" />
 <br /><br />
<asp:Label
ID="lblCardColor"
Text="Card Color"
 AssociatedControlID="txtCardColor"
 runat="server" />
 <br />
 Fore ground color
<asp:TextBox
 ID="txtCardColor"
 AutoCompleteType="None"
 Runat="server" />
 <asp:Button
 ID="btnPickColor"
 Text="Pick Color"
 Runat="server" />
 <asp:Label
 ID="lblSample"
 Runat="Server"> Sample </asp:Label>
<asp:ColorPickerExtender
ID="txtCardColor_ColorPickerExtender"
TargetControlID="txtCardColor"
 PopupButtonID="btnPickColor"
 PopupPosition="TopRight"
 SampleControlID="lblSample"
Enabled="True"
runat="server">
 </asp:ColorPickerExtender>
 <br />
 <br />
 Back ground color
<asp:TextBox
 ID="txtCardColor0"
 AutoCompleteType="None"
 Runat="server" />
 <asp:Button
 ID="btnPickColor0"
 Text="Pick Color"
 Runat="server" onclick="btnPickColor0_Click" />
 <asp:Label
 ID="lblSample0"
 Runat="Server"> Sample1</asp:Label>
 <asp:ColorPickerExtender ID="ColorPickerExtender1" TargetControlID = "txtCardcolor0" PopupButtonID="btnPickColor"
 PopupPosition="TopRight"
 SampleControlID="lblSample0"
Enabled="True" runat="server">
 </asp:ColorPickerExtender
<br />
 <br />
<asp:Button
 ID="btnSubmit"
 Text="Submit"
 Runat="server" OnClick="btnSubmit_Click" />
<br />
 <br />
 <br />
 <asp:Label ID="Label1" runat="server" Text="Label"
style="z-index: 1; left: 10px; top: 361px; position: absolute; height: 133px; width: 275px; text-align: center; font-family: 'Times New
Roman', Times, serif; font-size: xx-large"></asp:Label>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <asp:Panel ID="pnlResults" Visible="false" runat="server">
 <h2>Your Selection</h2>
 Selected Card Text:
<asp:Label
 ID="lblSelectedText"
 Runat="server" />
 <br />
Selected Card Color:
<asp:Label
 ID="lblSelectedColor"
 Runat="server" />
 </asp:Panel>
 </div>
 </form>
 </body>
</html>

Step 5 : Now go to Design option on Default.aspx page and double-click in submit Button and write a code.

Code :

protected void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
 pnlResults.Visible = true;
// Show the selected values
 lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor0.Text;
Label1.Text = txtCardText.Text;
//Int32 x = Convert.ToInt32();
 Label1.ForeColor = System.Drawing.ColorTranslator.FromHtml("#"+ txtCardColor.Text);
Label1.BackColor = System.Drawing.ColorTranslator.FromHtml("#" + txtCardColor0.Text);
}

Step 6 : Now add the ScriptManager for the run in AJAX application.

Step 7 : Now go Default.aspx.cs option and see the simple page_load event option and define the namespace.

Step 8 : Now Press F5 and run the applicaiton.

COB8.gif

Step 9 : Define the value of card text and click in picker color and select the color.

COB9.gif

Step 10 : Now we click in Submit Button and find the output.

COM10.gif