AJAX

AJAX : The Good

` Responsiveness a whole new user experience!
` Ajax uses JavaScript code that reacts to client-side
client side
events instantly!

2
Ajax : The Bad
` Complex!
` Browser Support /

` Lesser problem: Web pages that use Ajax often do a lot

of work on a single page (If the user bookmarks the
page, the current state of the page is not saved!)

3
The ASP.NET AJAX Toolkit
` ASP.NET AJAX offers a set of server-side components and controls that
can be used when designing a web page.

` These components automatically render all the JavaScript needed to get

the desired effect. The result is that a web p
page
g with Ajax
j effects is created
by programming with a familiar (and much more productive) model of
server-side objects.

4
ScriptManager
` Brains of ASP.NET AJAX!
<asp:ScriptManager
asp:ScriptManager ID
ID="ScriptManager1"
ScriptManager1 runat
runat="server"
server >
</asp:ScriptManager>

` ScriptManager doesn
doesntt generate any HTML tags
tags. It adds the links to the ASP.NET
ASPNET
AJAX JavaScript libraries.
<script src="/YourWebSite/ScriptResource.axd?d=RUSU1mI ... type="text/javascript"></script>
` This script
p block doesnt contain anyy code. Instead,, it uses the src attribute to ppull
the JavaScript code out of a separate file.
` The src attribute uses a long, strange-looking URL that points to
ScriptResource.axd.
` ScriptResource.axd isnt an actual fileinstead, its a resource that tells ASP.NET to
find a JavaScript file thats embedded in one of the compiled .NET 3.5 assemblies.
The long query string argument at the end of the URL tells the ScriptResource.axd
extension which file to send to the browser.
browser

5
ScriptManager Contd.,
` Each page that uses ASP.NET AJAX features requires an
instance of the ScriptManager.
p g However, yyou can onlyy use
one ScriptManager on a page.
` ASP.NET AJAX-enabled controls can interact with the
ScriptManager asking it to render links to additional
ScriptManager,
JavaScript resources.
` Using ScriptManager in Master/View Pages
` You can use ScriptManager in the master page. However, this
can occasionally cause problems, because different content
pages
p g mayy want to configure
g the properties
p p of the
ScriptManager differently. In this scenario, the solution is to use
the ScriptManager in the master page and the
ScriptManagerProxy in your content page.

6
Ordinary Page Updates

7
Ajax Enabled Page Updates

8
Page Refreshes
` Question: How can you take an ordinary page with
server-side
server side logic and make sure it refreshes itself in
flicker-free Ajax style using partial updates?
` UpdatePanel!
` When an event occurs in a control thats located inside
an UpdatePanel, and this event would normally trigger a
f ll
full-page postback,
b k the
h UpdatePanel
U d P l intercepts
i the
h event
and performs an asynchronous callback instead.

9
UpdatePanel Example
1. The user clicks a button inside an UpdatePanel.
2. The UpdatePanel intercepts the client-side click. Now, ASP.NET AJAX performs a callback
to the server instead of a full-page postback.
3. On the server, your normal page life cycle executes, with all the usual events. Finally, the
page is rendered to HTML and returned to the browser.
4. ASP.NET AJAX receives the full HTML and updates every UpdatePanel on the page by
replacing its current HTML with the new content. (If a change has occurred to content
thats not inside an UpdatePanel, its ignored.)
` If you access a page
p that
th t uses the
th UpdatePanel
Upd t P l with
ith a browser
b that
th t doesnt
d t support
pp t Aj
Ajax or doesnt
d t
have JavaScript switched on, it uses normal postbacks instead of partial updates. However, everything
else still works correctly.

10
What just happened?
1. When rendering the HTML, the UpdatePanel looks at its
contents. It notices that it contains one control thats able
to trigger a postbackthe button. It adds some JavaScript
code that will intercept the buttons click event on the
client and use a JavaScript routine to handle it.
it
2. When you click the Refresh Time button, you trigger the
JJavaScript
p routine.
3. The JavaScript routine doesnt perform a full-page postback.
Instead, it sends a background request to the web server.
This request is asynchronous, which means your page
remains responsive while the request is under way.

11
What just happened? Contd.,
4. The background request is processed in exactly the same way as a normal postback.

All the
th ddata
t from
f allll the
th webb controls
t l isi sentt back
b k to
t th
the webb server, along
l with
ith the
th

view state information and any cookies. On the web server, the page life cycle is the

same first the Page.Load

same Page Load event fires
fires, followed by the event that triggered the

postback (in this case, Button.Click). If youre using data source controls like

SqlDataSource all the normal querying and data binding takes place
SqlDataSource, place. The final page is

then rendered to HTML and sent back to the page.

5. Wh the
When h bbrowser receives
i the
h rendered
d d HTML ffor the
h page, it
i updates
d the
h

current view state and grabs any cookies that were returned.

12
What just happened? Contd.,
6. The JavaScript routine then replaces a portion of the HTML
on the ppagejust
g j the pportion that yyou wrappedpp in the
UpdatePanel. The rest of the HTML for the page is simply
discarded. In the current example, that means the HTML
with the animated GIF is tossed out.
out (This really has no
effect, because this part of the HTML is exactly the same in
the new response as it was originally. However, its
important to understand
d d that
h iff you modify
d f this
h part off your
page on the web server, you wont see the results of your
changeg in the web browser, because that area of the page
p g
isnt being updated.)

13
 The End.

14