Your SlideShare is downloading. ×
  • Like
Learning by sample   ajax control toolkit - rating
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Learning by sample ajax control toolkit - rating


For more tutorial visit

For more tutorial visit

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. AJAX Control Tookit : Rating 2010Learning By Sample Series AJAX Control Tookit : Rating w w w . B u k a n S. e u k b a S e m b a I n n o .©n2 o © 0 0 1 0 www B m anrang.ra fg I f012 Page 0
  • 2. AJAX Control Tookit : Rating 2010 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 www.BukanSembarang.Info©2010 Page 1
  • 3. AJAX Control Tookit : Rating 2010 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, 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 www.BukanSembarang.Info©2010 Page 2
  • 4. AJAX Control Tookit : Rating 2010 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……. www.BukanSembarang.Info©2010 Page 3
  • 5. AJAX Control Tookit : Rating 2010 Preparation 1. If you are really new in AJAX Control Toolkit matter or you have not read previous tutorial, then you should follow these steps. However, if you already sure about AJAX Control Toolkit and just want to increase your skill, or if you already follow previous tutorial, then just skip this chapter. 2. First, ensure that you already open Visual Web Developer 2010 Express Edition 3. Create a newly blank website and give it a name 4. Now, let’s create a new blank web page www.BukanSembarang.Info©2010 Page 4
  • 6. AJAX Control Tookit : Rating 2010 5. Afterward, put the AJAX Control Toolkit in our website. a. First, copy the AJAXControlToolkit.dll from downloaded folder www.BukanSembarang.Info©2010 Page 5
  • 7. AJAX Control Tookit : Rating 2010 b. Create special folder bin in your solution explorer 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 www.BukanSembarang.Info©2010 Page 6
  • 8. AJAX Control Tookit : Rating 2010 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….. www.BukanSembarang.Info©2010 Page 7
  • 9. AJAX Control Tookit : Rating 2010 6. 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). www.BukanSembarang.Info©2010 Page 8
  • 10. AJAX Control Tookit : Rating 2010 www.BukanSembarang.Info©2010 Page 9
  • 11. AJAX Control Tookit : Rating 2010 Let’s Get Started 1. 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 2. Merge the second row of table. a. Do this step by selecting two columns from second row and right click at your mouse, thus it will show up a pop up menu b. Then choose Modify Merge Cells www.BukanSembarang.Info©2010 Page 10
  • 12. AJAX Control Tookit : Rating 2010 3. Next, fill some texts in the table at first row 4. Put a Literal control at second row (remember this row already merged before…) www.BukanSembarang.Info©2010 Page 11
  • 13. AJAX Control Tookit : Rating 2010 5. Since that Rating extender is not a visible control, thus we need a set of images which will be our rating representation. In this sample, I just took star images sample from AJAX Control Toolkit sample itself. You can find this set of images in folder AJAXControlToolkitSample/images or you just can download it from my site. a. There are three star images which are : EmptyStar.png : FilledStar.png : SavedStar.png : b. Copy all of them and paste it in your Solution Explorer : 6. Now, let’s create a style sheet file which will handle our Rating control. a. Add New Item at Solution Explorer by right clicking your mouse at Solution Explorer b. Then choose Style Sheet file www.BukanSembarang.Info©2010 Page 12
  • 14. AJAX Control Tookit : Rating 2010 c. Next, type this source at your new style sheet 7. Then it’s time to put the style sheet in our page. Just go back to your web page and switch it to Source mode www.BukanSembarang.Info©2010 Page 13
  • 15. AJAX Control Tookit : Rating 2010 a. Drag style sheet file from Solution Explorer under <title></title> b. Next, drag Rating extender at second column of first row www.BukanSembarang.Info©2010 Page 14
  • 16. AJAX Control Tookit : Rating 2010 8. Okay, let’s set the property of this little thing by filling something in Property window or for shorter time, we just type it all. 9. Now, you can switch into design mode and see if it already turn out into something like this figure : 10. If you already got the design, just shift into source code mode and let create something in source code a. First, import AJAXControlToolkit namespace at top of your source code www.BukanSembarang.Info©2010 Page 15
  • 17. AJAX Control Tookit : Rating 2010 b. Then, type this procedure 11. So, what happen in that procedure ? a. First, remember that this procedure will be executed whenever user click at our Rating (see the previous setting of Rating control) b. So, you can see that we must put RatingEventArg as parameter in our procedure www.BukanSembarang.Info©2010 Page 16
  • 18. AJAX Control Tookit : Rating 2010 c. The rating result will be put in a text file named as rating.txt. d. And we must ensure whenever the file is exist (then we just read the value from the text file) or not (it means that we just newly create it, so we must set default value as zero). The value (new or not) will be placed in xRating variable e. You also recognize that the value of xRating then split as string array named as xQty, this new array then filled with new value which comes from current rating chosen by user. www.BukanSembarang.Info©2010 Page 17
  • 19. AJAX Control Tookit : Rating 2010 f. Afterward, just put the result in Literal control. g. Last but not least, we must save the new rating value back into the text file after joining all of the array value into one string again. 12. Well, now it’s time to test this page, just press Ctrl+F5 and see the result. www.BukanSembarang.Info©2010 Page 18
  • 20. AJAX Control Tookit : Rating 2010 13. Oh My God, it’s so easy. Well, I must drink my hot black coffe first, so see you next time….. www.BukanSembarang.Info©2010 Page 19