AJAX

Part II

http://freepdf-books.com
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
that’s not inside an UpdatePanel, it’s 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 doesn’t
d ’t support
pp t Aj
Ajax or doesn’t
d ’t
have JavaScript switched on, it uses normal postbacks instead of partial updates. However, everything
else still works correctly.

2
http://freepdf-books.com
What just happened?
1. When rendering the HTML, the UpdatePanel looks at its
contents. It notices that it contains one control that’s able
to trigger a postback—the button. It adds some JavaScript
code that will intercept the button’s click event on the
client and use a JavaScript routine to handle it.
it
2. When you click the Refresh Time button for example, you
trigger
gg the JavaScript
J p routine.
3. The JavaScript routine doesn’t 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.

3
http://freepdf-books.com
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 you’re 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.

4
http://freepdf-books.com
What just happened? Contd.,
6. The JavaScript routine then replaces a portion of the HTML
on the ppage—just
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, it’s
important to understand
d d that
h iff you modify
d f this
h part off your
page on the web server, you won’t see the results of your
changeg in the web browser, because that area of the page
p g
isn’t being updated.)

5
http://freepdf-books.com
Conditional Updates
` Having more than one UpdatePanels on a page
` When one of the UpdatePanel triggers an update
update, all the
UpdatePanel regions will be refreshed.

` You can configure the panels to update themselves

independently.
` SSimply
l change
h the
h UpdatePanel.UpdateMode
U d P l U d M d property
` UpdatePanel.UpdateMode = Always (this is the default)
` UpdatePanel UpdateMode = Conditional
UpdatePanel.UpdateMode

6
http://freepdf-books.com
Greeting Card Example

7
http://freepdf-books.com
Triggers
` Used to explicitly tell the update panel to monitor
controls outside the update panel
` Two types:
` Async
y Postback Triggers
gg
` <asp:AsyncPostBackTrigger ControlID=“lstBackColor” />
` Postback Triggers
` This
Thi ttechnique
h i iisn’t
’t as common, bbutt it can bbe useful
f l if you hhave
several controls in an UpdatePanel that performlimited updates
(and so use asynchronous request) and one that performs
more significant
i ifi changes
h to the
h whole
h l page (and( d so uses a full-
f ll
page postback).

8
http://freepdf-books.com
 The End.

9
http://freepdf-books.com