Ajax in Web Developer 2008

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.

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

Width="260px">







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!