ColorPickerExtender Control in AJAX


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 :

  • TargetControlID.
  • PopupButtonID.
  • PopupPositionID.

Step 1 : Open Visual Studio 2010.

  • Go to File-> New>WebSite.
  • Select ASP.NET WebSite.
COB1.gif

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

  • Go to Add->New Item.
  • Select Web From.
  • Default.aspx page open.
COB2.gif

Step 3 : Drag and drop AJAX Control from Toolbox.

  • Select ColorPicker Control, Label,TextBox.

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" />
        &nbsp;<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