Matt Paulson

Entrepreneur, Author, Private Equity Investor
  • Facebook
  • Linkedin
  • Twitter
  • Rss
  • Blog
    • Book Recommendations
    • Church Life & Ministry
    • Community Projects
    • Entrepreneurship
    • Quaterly Updates
    • Startup Community
    • Startup Q&A Show
    • Web Development
  • About
    • Resume
  • My Companies
    • Angel Investments
  • My Books
    • Online Business from Scratch
    • Automatic Income
    • The Ten-Year Turnaround
    • Email Marketing Demystified
    • 40 Rules for Internet Business Success
    • Business Growth Day by Day
    • Simple Savings
  • Media Appearances
  • Contact
Home» Web Development » How to Implement an ASP.NET Color Picker

How to Implement an ASP.NET Color Picker

Posted on June 12, 2009 by matt in Web Development 2 Comments
Tweet

One of the components of the 360 Web Content Management System (website in progress) that I wanted to develop was an events calendar that allowed you to post events into color-coded categories. You can see a demo of it here. At first, I had it so that users would manually enter in a 6-character HTML color code, but it was very non-intuitive for anyone who’s never worked with HTML before. Eventually I stumbled upon the ASP.NET Color Picker control. It’s a custom ASP.NET control that you can add to a page much in the way that you can add a text box, radio buttons, or a drop down list.

Here’s how to implement the ASP.NET Color Picker Control

(1) Download the library and add it to your project

First, download the library from the ASP.NET Color Picker Control website. Make sure to download the latest binary release from the website. Currently that version is ASP.NET Color Picker v.1.4.10423.1 Binary. Once you get the zip file, it will contain a library that you should extract to the /bin/ folder of your website.

(2) Register the library on your page

ASP.NET provides a set of standard controls that you can add to a page that start with the “ASP” prefix, such as “<ASP:TextBox runat=”server” id=”txtBox” />. Any custom controls will have their own prefix that you specify by registering the library on the page. It’s another line of code that you add to the top of the page next to your page definition. It should look something like this:

<%@ Register Assembly=”Karpach.WebControls” Namespace=”Karpach.WebControls” TagPrefix=”cc1″ %>

(3) Add the control to your page

Now that you have the library referenced, you can add the control to your page and make use of it.  For the purpose of this demo, I’m going to set the AutoPostBack property to true and run a function whenever the color is changed. This will show us the color that we picked inside of a label (also shown below) after we select a new color.

<cc1:ColorPicker ID=”colorBackgroundColor” runat=”server” AutoPostBack=”true” OnColorChanged=”chngColor” />
<br /><br />
<asp:Label ID=”lblResults” runat=”server” Text=””></asp:Label>

(4) Create Your C# Function

After we choose a color, we have to do something with it. With the ColorPicker control above, I’m using the OnColorChanged property to call the “chngColor” function, which in C# will look something like this. This will also demonstrate how to programmatically read the color chosen with the .Color property of the ASP.NET Color Picker Control

protected void chngColor(object sender, EventArgs e)
{
lblResults.Text = “<div style=’background-color:#” + colorBackgroundColor.Color.Replace(“#”, “”) + “;height:50px;width:80px;text-align:center;padding-top:35px;’>Sample Text</div>”;
}

(5) Success

So far, we’ve added the library to our project, registered the library on the page, added the control to the page, and done something with the color chosen by the user. Your page should look something like this:

color-picker

You can download my sample program here.

Tweet

Comments

2 comments on “How to Implement an ASP.NET Color Picker”

  1. Viktar says:
    June 14, 2009 at 9:51 pm

    Thank you for writing tutorial for my Color Picker. Ping back from Color Picker Demo page.

    Reply
  2. pradeepa says:
    September 22, 2009 at 5:57 am

    Hi,
    I have to change the font color of text available in textbox using colorpicker in asp.net.,Already i done to change the background text color…
    Plse smebdy help me…send me sme sample code or syntax….

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Enter your email address below to receive a steady stream of tricks, tips and ideas to help you build a better and more profitable business.

Email Marketing Demystified

The second edition of Email Marketing Demystified is now available. This book teaches you how to build a massive email list, write marketing copy that converts and generate more sales in your business.

Click Here to Get Your Copy of Email Marketing Demystified

Recent Posts

  • Leadership Sioux Falls is Fundraising for New Playground Equipment at Hayward Park. Here’s How You Can Help.

    March 2, 2021
  • Sioux Falls to Celebrate Entrepreneurship Day on March 3, 2021

    February 18, 2021
  • MarketBeat is Hiring for Three Positions (Support, Data Analyst and Web Developer)

    February 17, 2021
  • The Biggest Mistake You Can Make with Your Email Sign-Up Forms

    February 16, 2021
  • Five Lessons Learned from the MarketBeat Burger Project

    February 2, 2021

    Follow me on Facebook & YouTube

    Contact

    • [email protected]
    • Contact Us
    • matthew-paulson
      • Facebook
      • Twitter
      • Linkedin
      • Instagram
      • Rss

    © Matthew Paulson 2003-2021. All Rights Reserved.

    Privacy Policy