learning by sample - ajax control toolkit -numcolor

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 0

AJAX Control Tookit : Numeric UpDown and ColorPicker 2010


AJAX Control Tookit :

Numeric UpDown and

ColorPicker

Learning By Sample Series


Page 1


Foreword

Learning By Sample ?

So, why should I made this tutorial freely accessed by everyone ? Well, surely I am just nobody, I

also just another ordinary person with ordinary knowledge. However, I always feel that some persons in

the internet giving away their tutorial for free and I feel being helped by them. Then, I remember one of

my senior wisdom words : “If you want to be given more, then start to give more”. And of course, I really

believe those words, since that I already proof it to be right all the time.

Also, I’m not an English native speaker, however, I just try to improve my English in any other

way, especially in written format. Thus, I think writing is the best practice to improve my English freely.

However, you will find many grammatical errors in my tutorial, so please send me comments and also

suggestion to improve it.

Then, why the format using Learning By Sample series ? Is it really different with other tutorials

out there ? Ehm, I already wrote three books (in Indonesian) using this kind of format, and many readers

already contact me about how this format really help them to learn from the scratch. So, why in the

world I’m not re-create it in English format, right ? Eventhough actually, it is similar with Hands On Lab

series which already famous in Microsoft site previously.

All of my lesson also being designed as short samples and short time exercise. Thus, I hope that

each of tutorial series would take only at least 10-15 minutes maximum to learn. Why keep it short ?

Because many beginner (and even expert) will find boring whenever they must keep studying more than

15 minutes (but you will never get bored when you online in such time right ?).

Another reason is just because many of samples in this series come up from my lecturing task

exercise. So, I just try to compile all my lab exercises in order to keep it tidy and also reusable for my

students. That’s why you will find many unsorted course material inside these series, however, just take

a seat and enjoy the ride !

Requirements

In this series, I try to give simple example about AJAX Control Toolkit. Thus, as you may know

that this toolkit is an open source code and (of course) free to use. Eventhough many programmers

never care about its source code, however, this toolkit really do a lot of fun things in web programming.

All of my samples in this series use Visual Web Developer 2010 Express edition with its SQL

Server Express edition along together. But if you want to try the sampe using Visual Studio in


Page 2


commercial license (and please don’t use the illegal version), it still can do. And also, you must download

the newest version of AJAX Control Toolkit from www.codeplex.com, just type the name in search

textbox, and you will get it. After extracting all of the package of toolkit, look for AjaxControlToolkit.dll

file inside folder AjaxControlToolkitSample/bin. This file will be the main actor of all the example in this

series.

Prior Knowledge needed

If you really want to follow this series, then you should aware that basic programming

knowledge is needed. You should also familiar with ASP .NET especially for version 3.5 above. And of

course you already know what is the difference between website which use AJAX technique and “old

common website”.

FYI, I’m a VB guy, so please don’t complaint if I use VB entirely in this series. But nowadays,

there’s no such useful things if we argue about language differences, because I just try to share


Page 3


something that I know. So, if you don’t like VB and want to have another tutorial with your own favourit

language, then I’d be happy to read it. Now, let’s get started…….


Page 4


Let’s get started

1. First, ensure that you already open Visual Web Developer 2010 Express Edition

2. Create a newly blank website and give it a name

3. Now, let’s create a new blank web page


Page 5


4. Afterward, put the AJAX Control Toolkit in our website.

a. First, copy the AJAXControlToolkit.dll from downloaded folder

b. Create special folder bin in your solution explorer


Page 6


c. Then paste the dll file into your bin folder

d. Next, go to your Toolbox and right click inside it and click Choose Item sub menu

e. In the dialog box, click button Browse


Page 7


f. Then choose the .dll file which reside in your bin folder

g. And after you click OK button, you will see bunch of new control in your Toolbox. So, it

means that we are ready to continue this sample…..


Page 8


5. Now, the first step in implementing AJAX Control Toolkit is dragging component

ToolkitScriptManager on top of your web page (or just simply double click it).


Page 9


6. Let’s try to put something in the webpage. I start with a table which will handle our dummy input

simulation.

a. Click menu Table� Insert Table

b. In dialog box, we create table with three rows and two columns

7. Ok, come on type something in the table


Page 10


8. Next, put two textbox in each rows.

9. And a button in last row to execute it.

10. Change property text of button into Execute


Page 11


11. Now, click Smart Tag in first Textbox

a. Choose Add Extender, then pick NumericUpDown Extender


Page 12


b. Set the property minimum and maximum of Extender

c. Set property width of extender

12. For the second Textbox

a. Click at Smart Tag and choose Add Extender like previous action


Page 13


b. Choose Color Picker Extender

13. Now, put an Update Panel last row in second column

a. Search the property of Triggers in Update Panel


Page 14


b. Then click the small button to see the dialog box, later click add button to create a new

AsyncPostBack Trigger

c. Point it to the only available Button in our webpage


Page 15


d. Finally, set property Update Mode of Update Panel into Conditional

14. In the Update Panel, put Timer and a Label inside it.


Page 16


a. Set property Timer

b. Set property Label


Page 17


15. Then double click at Timer in order to type this code :

16. Now, double click at Button to demonstrate our AJAX Control Toolkit effort

Pay attention to the way how to change size of font and also the color

with hexadecimal value. And to force the Label using the new style, we

can simply use dataBind method.

17. Well, you want to see how it’s work ? Just press Ctrl + F5 to test it in your favourite browser….

18. Here is my sample capture result :


Page 18


19. Wow, very fast and easy right ?

20. Okay then, it’s nearly midnight and my song playlist nearly ended , so see you in next series….

learning by sample - ajax control toolkit -numcolor

Documents