ASP.

NET AJAX
By

Apex TG India Pvt Ltd
ASP.NET AJAX
Traditional Web Applications

Figure below presents the typical interactions between the

client and the server in a traditional web application.
3

The user first fills in the for!s fields" then subits the for
#Step 1$.

The browser generates a re%uest to the server" which receives

the re%uest and processes it #Step 2$.

The server generates and sends a response containing the

page that the browser renders #Step 3$.

The browser to loads the new page #Step 4$ and teporarily

a&es the browser window blan&.

'hile such a syncrono!s re"!est is being processed on the

server" the user cannot interact with the web page.

(f the user interacts with and subits another for" the process
begins again #Steps 58$.
ASP.NET AJAX
ASP.NET AJAX
A#ax Web Applications

A)a* web applications add a layer between the client and the
server to anage counication between the two.
5

'hen the user interacts with the page" the

client re%uests inforation fro the server #Step
1$.

The re%uest is intercepted by the ASP.NET AJAX

controls and sent to the server as an
asyncrono!s re"!est #Step 2$

The user can continue interacting with the

application in the client browser while the server
processes the re%uest.

+ther user interactions could result in additional

re%uests to the server #Steps 3 and 4$.
ASP.NET AJAX
6

+nce the server responds to the original

re%uest #Step 5$" the ASP.NET AJAX control
calls a client,side function to process the data
returned by the server.

This function-&nown as a callbac$ %!nction

-uses partial&pa'e !pdates #Step 6$ to
display the data without reloading the entire
page.

At the sae tie" the server ay be

responding to the second re%uest #Step 7$ and
the client browser ay be starting another
partial,page update #Step 8$.
ASP.NET AJAX
7

The callbac& function updates only a designated part

of the page.

Such partial,page updates help a&e web

applications ore responsive" a&ing the feel ore
li&e des&top applications.

The web application does not load a new page while

the user interacts with it.
ASP.NET AJAX
8
Exa(inin' an ASP.NET AJAX Application

The AJAX Extensions pac$a'e that ipleents basic A)a*

functionality coes preinstalled in .isual Studio.

There is a tab of basic AJAX Extensions controls in the

Toolbox.

/icrosoft also provides the ASP.NET AJAX )ontrol Tool$it"

which contains rich" A)a*,enabled 01( controls" which you can
download.
ASP.NET AJAX

To add the controls to the Toolbox in .isual

'eb 2eveloper3

4ight clic& the Toolbox and choose Add Tab.

Type AJAX Control Toolkit as the nae of the

new tab.

4ight clic& the tab and select Choose Items.

5lic& Browse... and select

AjaxControlToolkit.dll fro the folder.

Finally" clic& OK" and a list of available A)a*

controls will appear under the AJAX Control
Toolkit tab when you are in Design ode.
ASP.NET AJAX
ASP.NET AJAX

To deonstrate ASP.NET AJAX capabilities we!ll

enhance the .alidation application we did before.

The only significant odifications to this application

appear in its ASPX file.

'e!ll use A)a*,enabled controls to add A)a*

features to this application.
+utline
a) The user enters
his or her frst and
last name and
proceeds to the
Contact tab.
b) The user enters
an e-mail address in
an incorrect format
and presses Tab to
move to the next
input feld. callout
appears informin!
the user to enter an
e-mail address in a
valid format.
*i'. + 6 .alidation application enhanced by
ASP.NET AJAX. #Part 7 of 89.$
Validation.aspx
(9 of 10)
+utline
c) fter the user
flls out the form
properl" and clic#s
the Submit
button$ the
submitted data is
displa"ed at the
bottom of the pa!e
%ith a partial-pa!e
update.
*i'. + 6 .alidation application enhanced by
ASP.NET AJAX. #Part 89 of 89.$
Validation.aspx
(10 of 10)
+utline
Validation.aspx
(1 of 10)
To demonstrate ASP.NET AJAX capabilities e!ll en"ance t"e
Validation application e did before.
T"e onl# si$nificant modifications to t"is application appear in its
ASPX file.
%e!ll &se A'a()enabled controls to add A'a( feat&res to t"is
application.
*i$&re belo is a modified Validation.aspx file t"at
en"ances t"e application b# &sin$ se+eral ASP.NET AJAX
controls.
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part 8 of 89.$
Associate the
AjaxControlToolkit
assebly with a tag prefi*"
allowing us to use AJAX
5ontrol Tool&it eleents.
+utline
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part : of 89.$
Validation.aspx
(, of 10)
;oad the
ToolkitScriptManager on
the page.
+utline
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part < of 89.$
Validation.aspx
(- of 10)
+utline
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part = of 89.$
Validation.aspx
(. of 10)
ValidatorCalloutExtender
controls display error essages in
sall yellow callouts ne*t to the input
fields.
+utline
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part > of 89.$
Validation.aspx
(/ of 10)
+utline
*i'.+ 6 .alidation application enhanced by ASP.NET AJAX. #Part ? of 89.$
Validation.aspx
(0 of 10)
+utline
*i'. + 6 .alidation application enhanced by ASP.NET AJAX. #Part @ of 89.$
Validation.aspx
(1 of 10)
+utline
*i'. + 6 .alidation application enhanced by ASP.NET AJAX. #Part A of 89.$
Validation.aspx
(2 of 10)
ToolkitScriptManager Control

The ToolkitScriptManager control anages the client,side

scripts that enable asynchronous A)a* functionality.

There can be only one ToolkitScriptManager per page.

To incorporate controls fro the AJAX 5ontrol Tool&it"

use the ToolkitScriptManager" which derives fro
ScriptManager" instead.

2rag the ToolkitScriptManager fro the AJAX Control

Toolkit tab in the Toolbox to the top of the page.

A script anager ust appear before any controls that use the
scripts it anages.
ASP.NET AJAX
ASP.NET AJAX
)o((on Pro'ra((in' Error ,,.+
Putting more than one instance of the ScriptManager control on a
Web Form causes the application to throw an
InvalidOperationException when the page is initialized.
Grouping Information in Tabs Using the
TabContainer Control

The TabContainer control enables you to group

inforation into tabs that are displayed only if they are
selected.

To create ultiple tabs" drag the TabContainer control

fro the AJAX Control Toolkit tab in the Toolbox to your
for.

To add a tab" open the TabContainer Tasks sart,tag

enu and select Add Tab anel. This adds a TabPanel
ob#ect to the TabContainer.
ASP.NET AJAX

(n Design view" you can navigate between tabs by

holding Ctrl and clic&ing the tab header" and you can
drag and drop eleents into the tab.

The content of a TabPanel ust be defined inside its

ContentTemplate eleent.
ASP.NET AJAX
Partial-Page Updates Using the UpdatePanel
Control

The UpdatePanel control eliinates full,page refreshes by

isolating a section of a page for a partial,page update.

To ipleent a partial,page update" drag the UpdatePanel

into your for" and place controls to be updated inside it.

To specify when an UpdatePanel should update" you need to

define an UpdatePanel tri''er.
ASP.NET AJAX

5lic& the ellipsis button

ne*t to the control!s
Triggers property in the
Properties window.

(n the
-pdatePanelTri''er
)ollection Editor dialog
that appears"
clic& Add to add an
AsncPost!ackTrigger.
ASP.NET AJAX

&et the Control'( propert" and the )vent*ame propert"

to the desired tri!!er.
Adding Ajax Functionality to AP!"#T
$alidation Controls Using Ajax #xtenders

Several controls in the A)a* 5ontrol Tool&it are extenders

- coponents that enhance regular ASP.NET controls.

ValidatorCalloutExtender controls display error

essages in sall yellow callouts ne*t to the input fields.

To create a ValidatorCalloutExtender" you can drag

and drop it" or you can select the Add Extender option in a
validator!s sart,tag enu.

(n the Extender !i"ard dialog that displays"

choose ValidatorCalloutExtender" specify its !" and clic&
OK.
ASP.NET AJAX
ASP.NET AJAX
*i'. 5reating a control e*tender using the Extender !i"ard.

ValidatorCalloutExtender!s
TargetControl! property indicates the
validator control fro which the e*tender should
obtain the error essage.

This is autoatically deterined if you created

the e*tender through the Extender !i"ard.

The ValidatorCalloutExtenders display

error essages with a nicer loo&,and,feel.
ASP.NET AJAX