In the last issue we discussed some new features of Web Developer 2008, and
also showed how to implement some of these, like the multi-targeting and the
list view control. In this article we will discuss the Ajax extension feature in
WebDev 2008.
As Ajax is used to create rich Web-based applications, making it a part of
the new WebDev 2008, developers are now relieved from the extra steps they used
to do earlier, like adding Ajax extensions manually. Ajax is also considered in
web services and SOAs as the front end. An instance of Ajax-enabled website is
the popular Gmail, where on deleting a message, the result is displayed
instantly on the user end, without the whole page getting refreshed.
In this article we will also show you how to add new Ajax controls by which
you can create full featured Ajax-enabled website within minutes.
Direct Hit! |
Applies To: Ajax developers USP: Build Ajax-enabled websites in minutes Primary Link: www.asp.net Keywords: Ajax Extension |
Creating Ajax-enabled website
Let's start by creating a simple Ajax-enabled website through which we will
send some search condition to an MS Access database, and then the result which
comes from the database is displayed on the website. For this open the Web
Developer 2008 and start up by creating a new website from File > New Web Site.
Give the project name as 'Ajax implementation' and click on 'OK' .
Now draw a text box where we will specify the condition for the query to be
executed. For this first switch to the design view, open up the toolbox, and
navigate to the 'Standard' section. Then drag the text box control to the web
page and change the ID of this text box as 'querybox' from the textbox
properties option. Beside this textbox draw a label, drag the label control, and
drop beside the 'querybox'. Then change the text of the label which you have
just created as 'Enter Your Query:', this is to inform the users that they have
to enter the query in the textbox provided. Draw a button which when clicked
will execute the query with the condition provided in the 'querybox'. For this
drag the button control for the standard section of the toolbox and drop into
your website.
Create a database in MS Access named as 'Database1' and then create a table
named 'table1'. Create two different columns into the table for example ID and
name. Enter data into these fields and save it.
Now double click on the button in WebDev 2k8 to open up the coding section
for the button, and paste the following code into it. This code will be
triggered when the button will be clicked.
Dim constr As String = _
"Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=C:\Database1.mdb;"
Dim con As OleDbConnection = New OleDbConnection(constr)
Dim command As OleDbCommand = New OleDbCommand("Select * from table1 where ID="
+ querybox.text, con)
Dim dr As OleDbDataReader
con.Open()
dr = command.ExecuteReader
While dr.Read()
Label2.Text = dr(1)
End While
dr.Close()
con.Close()
Now for running an Ajax application in WebDev 2k8 you need a script manager
on you web page. For this drag and drop the script manager from the Ajax
extension section found under the toolbox. Change the data source in the
connection string to the path where your MS Access database is located. Next
debug the 'Ajax implementation' project from debug > start debugging. This will
open up a browser in your default Internet Explorer. Enter a single digit value,
say 3, and this will return name associated with the entered ID.
You will notice that each time you enter the search criterion the result is
displayed without the whole page getting refreshed.
Adding new controls
Another most interesting thing is the Ajax toolkit; it is not installed by
default with the WebDev 2k8. This is a community-driven project and can be
downloaded from the URL http://ajax.asp.net. The Ajax is available in two
different versions: one, the.Net 3.5 framework and the other is for the earlier
frameworks. You can also find the source code for the toolkit using which you
can modify or add new controls to the toolkit of your own. In our case we will
be downloading the 'no source' .Net 3.5 version of Ajax toolkit.
Create a directory named 'Ajax toolkit' in the program file directory and
then extract the downloaded Ajax toolkit into the newly created directory. Once
the extraction is finished open the WebDev 2k8. Inside the toolbox right click
and then click on the 'Add tab' option and provide the name as 'Ajax Toolkit'
for the newly created section. This is to incorporate the 'Ajax toolkit' into
the WebDev 2k8 and this is the new extender support that Visual Web Dev 2k8
provides you. Now right click on the newly created toolkit section and click on
the 'Choose Item' option. A 'Choose Item Toolbox' window will pop up, click on
the browse button and navigate to the 'Ajax toolkit' extracted folder, ie,
inside program files folder. Go to 'SampleWebSite' > 'bin' directory, select
AjaxControlToolkit.dll file and click on open. Next click on OK button and you
will notice that new controls are added into the Ajax Toolkit section and now
you can add these controls on your website.
Using controls
Owing to the addition of controls in the Ajax toolkit, on selecting the
button control on the web page in design view you can now see the extender
option, which was not available earlier.
Further let's see what you can do with the new controls added.Click on the
expansion button for getting the extender option found on the button control,
and then click on the 'Add extender' option. Next choose the options available,
in our case we chose the 'ConfirmButtonExtender.' Give an ID to this extender
and click on the OK button. Next go to the source code view and search for the
following string:
With the new controls added to the Ajax-enabled website in WebDev 2008, you can create interactive Web applications graphically |
ConfirmText="This is a test confirm message!!!" Enabled="True" TargetControlID="Button1">
Put your message in quotes against the ConfirmText. Now for testing how the
control functions save and debug the project by clicking on debug > start
debugging option. Now when you click on the button on your default Internet
browser it should pop up a confirmation window on which the message gets
displayed. Further you can also add animation extender, Drag panel extender,
drop shadow extender, etc, to your webpage.
Hence, using Ajax extensions and controls in WebDev 2008, interactive Web
applications can be created graphically rather than writing codes manully, which
was not the case earlier.
A true boon for developers indeed!