ASP.NET Color Picker - "One touch"

Click to the box:
Color Picker


 

This example demonstrates how to post back selected color to server (AJAX Page) in "one touch".

Example code

<script runat=server language="c#">
  void Page_load(objectsender, EventArgs e){
       if(!IsPostBack && !IsCallback)
            color.Style["background-color"]= picker.InitialColor = "#FFFFFF"
  }
  public void OnColorSelect(string mColor){
       Message.Text= "Server get color: " + mColor + " (previous value: " +picker.InitialColor + ")";
       picker.InitialColor= color.Style["background-color"]= mColor;
       UpdatePanel("cpColor");
  } 
</script>
<script type="text/JavaScript">
function OnColorPicked(sender){
   if(typeof ob_post == "object"){
       ob_post.AddParam("mColor", sender.getColor()); 
       ob_post.post(null, "OnColorSelect",function(){});
   }
}
</script>
...
<oajax:CallbackPanel id="cpColor" runat="server" >
    <content>
        Click to the box:
        <obout:ColorPicker runat="server" OnClientPicked="OnColorPicked" Id="picker" PickButton="false"
                                     TargetId="color" TargetProperty="style.backgroundColor" >
              <asp:TextBox readOnly="true" id="color" style="cursor: pointer;" runat="server"/>
        </obout:ColorPicker> <br/><br/>
        <asp:label id="Message" runat="server" Text="&nbsp;" />
    </content>
</oajax:CallbackPanel>

See the full source code in /ColorPicker/aspnet_ajax_noPickButton.aspx file of downloaded Suite.

"YOU ARE THE BEST! The first time in my life I've met with such excellent team. Almost instant reply! That's amazing! Thank You Very Much!"

Arsen Memetov
San Computer Antalya, Turkey

Random testimonial   All testimonials