There are lots of “ColorPickers” out there.

I liked the way mColorPicker worked, though did make some minor modifications to the source for this demo.

Just picking a color is a bit boring so I’m adding a bit of spice.

  1. After selecting a new color client side I use that color to change the background color of the current page (no postback)
  2. Upon Server PostBack we echo the hex value of the selected color.

Here is the experience.


Note the TextBox which is an ASP.NET TextBox Server Control and the multi-color icon nect to the text box.

Clicking on the color icon displays the ColorPicker.

As you hover over the different colors the hex value of the current color is displayed in the TextBox and the TextBox background color is set to that color as well.

The “Set Color” Button is an HTML input element (Client Side) and when you click it, the background color of the page is set to the newly selected color (as you can see in the image above.)

The “Submit Form” Button is an ASP.NET Server Side Button Control and when you click it the form is posted back to the server.

The new color value is retrieved from the Color Text Box and is inserted into the Label control at the bottom of the page.

Note that after the page is submitted (and therefore redrawn) the page’s background revert to its default color. If you wanted to make the selected color permanent we would need to dynamically load the background color from somewhere and save the updated color whenever the user selected a new one.
Feel free to give that a try on your own if you need such a feature.

To implement this, begin by loading the jQuery and jQueryUI libraries.

I’ll do this in my MasterPage and load them from the Microsoft CDN (which means you’ll have to modify the following code if want to run this on a machine that is not connected to the internet.)


<script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js">

The actual page markup look like this.


<script type="text/javascript" src="Scripts/mColorPicker_min.js"></script>
<script type="text/javascript">// <![CDATA[
         function SetColorButton_onclick() 
		 {      
		 var hexcolor = $('#TextBoxColorPick').val()            
		 $('body').animate({ backgroundColor: hexcolor }, 1000);         
		 }
</script>
<h2>Welcome to ASP.NET!</h2>
        To learn more about ASP.NET visit
        <a title="ASP.NET Website" href="http://www.asp.net">www.asp.net</a>.

        You can also find
         <a title="MSDN ASP.NET Docs" 
		 href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409">
		 documentation on ASP.NET at MSDN</a>.<script type="text/javascript" 
		 src="Scripts/mColorPicker_tumblr.js">// <![CDATA[

    </script>

    <input id="SetColorButton" onclick="return SetColorButton_onclick()"
           type="button" value="Set Color" /></pre>

<hr />

Note that I changed the mColorPicker_tumblr.js file so that we could attach the ColorPicker to qan ASP.NET TextBox.


$(document).ready(function ()
{
    $('pickcolor').filter(function(index) {
       return this.getAttribute("type") == 'color';
    }).mColorPicker();
});

Then we have a trivial bit of C# in our Code-Behind file.



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void ButtonSubForm_Click(object sender, EventArgs e)
    {
    LabelResult.Text = 'You Selected : <strong>' + TextBoxColorPick.Text + '</strong>';
    }
}

You can download the working sample [ HERE ].