• .Net (10)
• AIR (8)
• as3 (8)
• Flex (21)
• Javascript (5)
• Misc.. (11)
• Ruby on Rails (8)
• Usability (6)

• June 2008 (6)
• May 2008 (1)
• April 2008 (1)
• March 2008 (1)
• January 2008 (3)
• December 2007 (2)
• November 2007 (6)
• October 2007 (9)
• September 2007 (5)
• August 2007 (2)
• July 2007 (1)
• April 2007 (4)

Apr
26

Using ASP.Net / AJAX slide extender to create a color selector

Posted: 26th April 2007
Tags: .Net, AJAX, dotnet, Javascript
Posted in .Net, Javascript
Comments: 2 Comments »

Using the MS AJAX ASP.Net Extensions and the Ajax Control Toolkit (available through codeplex) You can easily make a colour selector using the Ajax Control Toolkits Slider Extender control.

The Slider Extender included in the Ajax control toolkit renders on the screen as a control that allows the user to click and drag to adjust a numerical value. Out of the box the slider extender is given an ASP:TextBox as it’s Target Control ID, the slider extender automatically hides these textboxes. We can use three slider controls to create a Red, Green and Blue sliders to set a colour. When working in RGB we can set a value of 0 to 255 for each of Red, Green or Blue. So the first thing we need is the three sliders on our HTML page.

ASP.Net AJAX Slide Extender Color Selector

We need to register the AjaxControlToolkit, so that we can use the slider control, by adding the following line, just below the <% Page %> directive:

1

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Then we can add our three Textboxes and sliders:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table><tbody>
<tr>
<td>Red:</td>
<td><asp:textbox id="txtR" runat="server" cssclass="hide" text="218" onchange="updateslide();"></asp:textbox> <cc1:sliderextender id="SliderExtender1" length="75" minimum="0" raisechangeonlyonmouseup="false" maximum="255" targetcontrolid="txtR" runat="server"></cc1:sliderextender></td>
</tr>
<tr>
<td>Green:</td>
<td><asp:textbox id="txtG" runat="server" cssclass="hide" text="0" onchange="updateslide();"></asp:textbox> <cc1:sliderextender id="SliderExtender2" length="75" minimum="0" raisechangeonlyonmouseup="false" maximum="255" targetcontrolid="txtG" runat="server"></cc1:sliderextender></td>
</tr>
<tr>
<td>Blue:</td>
<td><asp:textbox id="txtB" runat="server" cssclass="hide" text="29" onchange="updateslide();"></asp:textbox> <cc1:sliderextender id="SliderExtender3" length="75" minimum="0" raisechangeonlyonmouseup="false" maximum="255" targetcontrolid="txtB" runat="server"></cc1:sliderextender></td>
</tr>
</tbody></table>

One way to implement this (if you don’t feel comfortable with Javascript) is to put these control in an update panel and then set the Text Changed event for each of the three text boxes, you could then in .Net change take the values and create a System.Drawing.Color and then use it to set a control’s back colour to give a preview. This is fine but does not get updated until the user drags and releases the mouse, which makes it a little unhelpful. The slider extender control conveniently also has a property called RaiseChangeOnlyOnMouseUp which can be set to false (as in the code above). This will then automatically fire the Text Changed event as the mouse is dragged. However, in testing this proved not to work too well even using a local web server. As each request is sent back with all the viewstate information etc and even though only the update panel is updated we are using a lot of unnecessary bandwidth. So to effectively make this work we need to add a little simple javascript.

If you look at the controls above, I have added an onchange event to the textbox controls. Visual Studio complains about me wanting to add real HTML events, but you can safely ignore the red squigly lines it produces. In the example I have asked each textbox to call a Javascript function called updateslide() whenever the text changes. In combination with the RaiseChangeOnlyOnMouseUp setting, this will fire constantly while the user is dragging, but this time without sending network requests, instead to our Javascript function. Before we look at the Javascript, I will add two a textbox and a div to the page. The TextBox control will hold the hex colour values, such as #ff00ff, which is probably the most useful way of using the selected colour. The Div wil be used to preview the colour.

1

<asp:textbox id="txtHexRGB" width="75px" onkeyup="updatetext(this.value);" runat="server" maxlength="6">da001d</asp:textbox>

In this example, I have set a default colour of #da001d (Red) and in addition I have added another javascript function to the onkeyup event of this Textbox, this allows the user to enter a hex colour code and the preview to be updated. We pass the value of the textbox to the function using the this.value

Below is the Java script which can be pasted inline, into your ASPX page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<script type="text/javascript">
<!—
 
function updatetext(hex)
{
	var regex = /[a-fA-F0-9]{6}/|>;
	if (regex.test(hex) == true){
		document.getElementById("testDiv").style.backgroundColor = ’#’ + hex;
	}
}
 
function updateslide()
{
	// Get R G B values from slider textboxes;
	var decR = document.getElementById(’<=txtR.ClientID>’).value;
	var decG = document.getElementById(’<=txtG.ClientID>’).value;
	var decB = document.getElementById(’<=txtB.ClientID>’).value;
 
	// converted to hex
	var hexR = parseInt(decR).toString(16);
	var hexG = parseInt(decG).toString(16);
	var hexB = parseInt(decB).toString(16);
 
	// pad with 0 if needed
	if (hexR.length < 2) {
		hexR = "0" + hexR;
	}
	if (hexG.length < 2) {
		hexG = "0" + hexG;
	}
	if (hexB.length < 2) {
		hexB = "0" + hexB;
	}
	// Set text box value
	document.getElementById(’<=txtHexRGB.ClientID>’).value = hexR + hexG + hexB;
 
	// Set div preview colour
	document.getElementById("testDiv").style.backgroundColor = ’#’ + hexR + hexG + hexB;
}
—>
</script>

The javascript above includes our two javascript functions. The first updateText(hex) is called when the user types a hexadecimal colour value into the text box we created, the second (updateSlide()) is fired as the user drags any of our three colour sliders. With the updateText(hex) function we pass it the hexadecimal value being entered by the user as they press each key. We first create a regular expression to check we have a valid 6 string hexadecimal value. If the value is valid we apply that hexadecimal value to our preview DIV’s backgroundColor.

With our second javascript function updateSlide() we do not take a parameter as above, but instead access the value directly in the text boxes. As we do not know what these text boxes ID will be (as they are rendered by ASP.Net at runtime we can instruct ASP.Net to inject the names of these ASP.Net textboxes when the page is rendered using the <=txtR.ClientID> inline code. Having got the numerical values (set by the slider extender) we can go about converting these to hexadecimal by first converting the textbox string to an integer using the Javascript parseInt function then using the .toString(16) function which converts an int into hexadecimal. With HTML elements we either need a three character hex string for example fff (which is equivalent to ffffff) or a six character string so the easiest method is to pag and hex values that are only 1 character long with a leading 0. We can then simply update our user textbox with the hex value and set the preview div’s backgroundcolor.

When the page is posted back you can access the RGB values in the textboxes set be the slider or the hexadecimal value in the textHexRGB textbox.

Permalink | dzone | 2 Comments »

Comments

olle
1/11/2007
2:49 pm

Comment:

Thanks for the article it was very fun implementing this. And for other readers, be aware that you have to place the javascript in the body not the head, or else the asp code ( ) won’t work.

 

sharathchandra
26/06/2008
4:54 pm

Comment:

Thanks for your article its working perfectly for me…………….Thank you very much…

 

• Home
• About
• Design & Development
• Extras…
• Contact
• RSS Feed
  

• Categories
• .Net (10)
• AIR (8)
• as3 (8)
• Flex (21)
• Javascript (5)
• Misc.. (11)
• Ruby on Rails (8)
• Usability (6)

• Archives
• June 2008 (6)
• May 2008 (1)
• April 2008 (1)
• March 2008 (1)
• January 2008 (3)
• December 2007 (2)
• November 2007 (6)
• October 2007 (9)
• September 2007 (5)

• Recent Blog Articles
• » Poor Blog Performance
• » Building a medium to large scale Flex App using Cairngorm (Part 4)
• » Building a medium to large scale Flex App using Cairngorm (Part 3)
• » Building a medium to large scale Flex App using Cairngorm (Part 2)
• » Building a medium to large scale Flex App using Cairngorm (Part 1)

powered by
WordPress