ASP.

Net - AJAX

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
What is AJAX and why should i
care?
Asynchronous JavaScript and XML.
User expectations are increasing.
Need both performance and rich look.
Need more responsiveness.
No frequent page refreshes.
Lesser network overhead.
Reduced postbacks.
Partial page updates.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX

It is a technique to create better, faster and interactive web pages using

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX

Traditional Web Applications

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX
The user first fills in the forms fields, then
submits the form (Step 1).
The browser generates a request to the server,
which receives the request 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
temporarily makes the browser window blank.
While such a synchronous request is being
processed on the server, the user cannot interact
with the web page.
If the user interacts with and submits another
form, the process
In Compliance

begins
with ISO 9001 | Cost again (Steps
effective | Quality 58).
| Training | IT Infrastructure Services
5
ASP.NET AJAX
Ajax Web Applications
Ajax web applications add a layer between the
client and the server to manage communication
between the two.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX
When the user interacts with the page, the
client requests information from the server
(Step 1).
The request is intercepted by the ASP.NET AJAX
controls and sent to the server as an
asynchronous request (Step 2)
The user can continue interacting with the
application in the client browser while the server
processes the request.
Other user interactions could result in
additional requests to the server (Steps 3 and
4).

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
7
ASP.NET AJAX
Once the server responds to the original
request (Step 5), the ASP.NET AJAX control
calls a client-side function to process the data
returned by the server.
This functionknown as a callback function
uses partial-page updates (Step 6) to
display the data without reloading the entire
page.
At the same time, the server may be
responding to the second request (Step 7) and
the client browser may be starting another
partial-page update (Step 8).

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
8
ASP.NET AJAX
The callback function updates only a
designated part
of the page.
Such partial-page updates help make web
applications more responsive, making them
feel more like desktop applications.
The web application does not load a new
page while the user interacts with it.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
9
ASP.NET AJAX
Architecture

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX Server
Architecture
Server Components consist of server controls
and components to manage the UI and flow of
an application.
Manage serialization, validation, control
extensibility etc.
ASP.NET web services available that enable
you to access services like forms
authentication and user profiles.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX Server
Architecture
Server Controls:
Server and Client code integrated to produce
AJAX like behavior.
Frequently used Server Controls are
ScriptManager one instance per page.
Update Panel for partial page updates.
Update Progress track progress of Asynchronous req.
Timer Control set interval between requests.
Along with these also available are Pointer
control and Script Manager Proxy.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX
Examining an ASP.NET AJAX Application
The AJAX Extensions package that implements
basic Ajax functionality comes preinstalled in
Visual Studio.
There is a tab of basic AJAX Extensions controls
in the Toolbox.
Microsoft also provides the ASP.NET AJAX
Control Toolkit, which contains rich, Ajax-
enabled GUI controls, which you can download.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
13
ASP.NET AJAX Server
Controls
The ASP.NET AJAXserver controls consist of server and client code
that integrate to produce AJAX-like behavior. The following list
describes the most frequently used ASP.NET AJAXserver controls.
(Default in VS2008)
ScriptManager
Manages script resources for client components, partial-page
rendering, localization, globalization, and custom user scripts.
The ScriptManager control is required in order to use the
UpdatePanel, UpdateProgress, and Timer controls.
UpdatePanel
Enables you to refresh selected parts of the page, instead of
refreshing the whole page by using a synchronous postback.
UpdateProgress
Provides status information about partial-page updates in
UpdatePanel controls.
Timer
Performs postbacks at defined intervals. You can use the Timer
control to post the whole page, or use it together with the
UpdatePanel control
In Compliance

withto perform
ISO 9001 | Costpartial-page
effective | Quality updates
| Training | ITat a defined
Infrastructure Services
interval. (The pull updater)
ASP.NET AJAX
S crip tM an ag er Control
The S crip tM an ag er control manages the client-
side scripts that enable asynchronous Ajax
functionality.
There can be only one ScriptM anager per page.
Drag the ScriptM anager from the AJAX Control
Toolkit tab in the Toolbox to the top of the page.
A script manager must appear before any controls
that use the scripts it manages.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
ASP.NET AJAX
Partial-Page Updates Using the
U p d atePan el Control
The U p d ateP an el control eliminates full-page
refreshes by isolating a section of a page for a
partial-page update.
To implement a partial-page update, drag the
U pdatePanelinto your form, and place controls to
be updated inside it.
To specify when an U pdatePanelshould update,
you need to define an U p d ateP an el trigger.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services
 ASP.NET AJAX
Click the ellipsis
button next to the
controls Triggers
property in the
Properties window.
In the
UpdatePanelTrigg
er Collection
Editor dialog that
appears,
click Add to add an
ASet the
syn cP ControlID
ostB ackTrig g property
e and the EventName
r.property to the desired trigger.

In Compliance with ISO 9001 | Cost effective | Quality | Training | IT Infrastructure Services