Post on 08-Dec-2014
description
transcript
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 : HTML Editor & Accordion 2010
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
AJAX Control Tookit :
HTML Editor &
Accordion
Learning By Sample Series
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 1
AJAX Control Tookit : HTML Editor & Accordion 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
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 2
AJAX Control Tookit : HTML Editor & Accordion 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 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
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 3
AJAX Control Tookit : HTML Editor & Accordion 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…….
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 4
AJAX Control Tookit : HTML Editor & Accordion 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
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 5
AJAX Control Tookit : HTML Editor & Accordion 2010
5. Afterward, put the AJAX Control Toolkit in our website.
a. First, copy the AJAXControlToolkit.dll from downloaded folder
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 6
AJAX Control Tookit : HTML Editor & Accordion 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
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 7
AJAX Control Tookit : HTML Editor & Accordion 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…..
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 8
AJAX Control Tookit : HTML Editor & Accordion 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).
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 9
AJAX Control Tookit : HTML Editor & Accordion 2010
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 10
AJAX Control Tookit : HTML Editor & Accordion 2010
Let’s Get Started
1. In this sample, we need a modest table which will be displayed in Accordion extender. So, just
right click at Solution Explorer and choose Add New Item
a. Choose database type and type a name (just click OK if you got message to create
App_Data folder)
b. Go to Database Explorer to create new table (if you use Visual Studio, then you should
check Server Explorer). Just right click at Table node and choose New Table
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 11
AJAX Control Tookit : HTML Editor & Accordion 2010
c. Then create this table structure
d. Don’t forget that field IDNews must be set as primary key and also as identity number
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 12
AJAX Control Tookit : HTML Editor & Accordion 2010
e. And also field DateNews must be set as automatic date by filling GETDATE() in its default
value
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 13
AJAX Control Tookit : HTML Editor & Accordion 2010
f. If you’ve done, then just save it as new table
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 14
AJAX Control Tookit : HTML Editor & Accordion 2010
2. Now, let’s go back to our webpage. Just drag the new table into our page, and you will get this
layout.
3. Oh yes, just to tell you that we won’t need that Gridview, so just delete the Gridview. And then,
we replace it with Formview, of course we should connect the Formview into the existing
SQLDataSource.
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 15
AJAX Control Tookit : HTML Editor & Accordion 2010
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 16
AJAX Control Tookit : HTML Editor & Accordion 2010
4. Now, let’s modify this Formview
a. First, set the property of DefaultMode into Insert Mode, and see its result in the
webpage
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 17
AJAX Control Tookit : HTML Editor & Accordion 2010
b. And right click at Formview to edit its InsertItemTemplate
c. So, as we done previously, we don’t need Date field since that it already set using
system date (remember GETDATE() setting).
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 18
AJAX Control Tookit : HTML Editor & Accordion 2010
d. Also we must modify and remove ContentNews in order to put HTML Editor which come
from AJAX Control Toolkit
e. We must also customize its property, thus it will be connected to the database
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 19
AJAX Control Tookit : HTML Editor & Accordion 2010
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 20
AJAX Control Tookit : HTML Editor & Accordion 2010
5. Now, it’s time to modify the SQLDataSource
a. Go to smart tag of the control and choose Configure Data Source
b. In available dialog box, just click Next button and then choose Specify custom SQL
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 21
AJAX Control Tookit : HTML Editor & Accordion 2010
c. Focus on Insert statement and replace it with this command
6. Next, put your cursor under SQLDataSource and place an Accordion control.
a. Switch to source mode
b. And modify the Accordion like this listing
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 22
AJAX Control Tookit : HTML Editor & Accordion 2010
7. That’s it, now you can try this simple web page by pressing Ctrl+F5, and see how it’s going….
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 23
AJAX Control Tookit : HTML Editor & Accordion 2010
8. Okay then, see you in next series, and please remember to spread this tutorial widely so more
person can learn this simple thing…...