ASP.NET Color Picker Web Server Control

• Download source code - 17.1 KB

Introduction

It is difficult to find a decent color picker control for ASP.NET. However, there are plenty of pure JavaScript color picker controls. I decided to take one of them and convert it into an ASP.NET web server control. As a base, I took the dhtmlgoodies advanced color picker.

Project Setup

First, let’s do New Project ->ASP.NET Server Control. By default, the name of the project would be the same as the name of the default namespace. I called my project CutomControls, and renamed ServerControl1.cs to ColorPicker.cs. Then, I added to the project the images, JavaScript, and styles supplied by dhtmlgoodies.

Then, I clicked on each file's properties and changed the Build Action from Content to Embedded Resource.

AssemblyInfo.cs

I registered all the resources like this:

[assembly: System.Web.UI.WebResource("CustomControls.Images.slider_handle.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_center_active.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_active.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_inactive.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_active.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_inactive.gif", 
                                     "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.color_picker_icon.jpg", 
                                     "img/jpeg")]
 
 
[assembly: System.Web.UI.WebResource("CustomControls.Styles.js_color_picker_v2.css", 
                                     "text/css")]
 
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.color_functions.js", 
                                     "text/js")]
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.js_color_picker_v2.js", 
                                     "text/js")]

As you might have noticed, System.Web.UI.WebResource, the first parameter has the following signature:

[Assembly Name].[Folder].[File Name]

This is very important, since it is not documented even in MSDN.

ColorPicker.cs

I modified ToolboxData to look like this:

[ToolboxData("<{0}:ColorPicker runat="server">")]

Next, I wanted a custom icon in the Visual Studio Toolbox. After ToolboxData, I added the following line:

[System.Drawing.ToolboxBitmap(typeof(ColorPicker), 
                    "Images.color_picker_icon.jpg")]

where the first parameter is the type of the control and the second parameter is the icon file name used in AssemblyInfo.cs.

Then, I needed to load the stored resources from the DLL. The best event for this is OnInit:

// Javascript
string colorFunctions = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
 "CustomControls.Javascript.color_functions.js");
Page.ClientScript.RegisterClientScriptInclude("color_functions.js", colorFunctions);
string colorPicker = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
 "CustomControls.Javascript.js_color_picker_v2.js");
Page.ClientScript.RegisterClientScriptInclude("js_color_picker_v2.js", colorPicker);
 
//Images we need to set javascript variables, 
//so javascript will know where to find images
string script = string.Format(@"
var form_widget_amount_slider_handle = '{0}';
var tab_right_active = '{1}';
var tab_right_inactive = '{2}';
var tab_left_active = '{3}';
var tab_left_inactive = '{4}';
", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
   "CustomControls.Images.slider_handle.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
   "CustomControls.Images.tab_right_active.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
   "CustomControls.Images.tab_right_inactive.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
   "CustomControls.Images.tab_left_active.gif")
 , Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
   "CustomControls.Images.tab_left_inactive.gif")
);
 
Page.ClientScript.RegisterStartupScript(Page.GetType(), 
        "initColorPicker", script, true);
 
// CSS
HtmlGenericControl csslink = newHtmlGenericControl("link");
csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), 
 "CustomControls.Styles.js_color_picker_v2.css"));
csslink.Attributes.Add("type", "text/css");
csslink.Attributes.Add("rel", "stylesheet");            
Page.Header.Controls.Add(csslink);

The rest is simple. I used the RenderContents event to render the control HTML and the control is ready.

• The ColorPicker control demo page