1. • Understanding Ajax
• Advantages & Disadvantages of Ajax
• The Script Manager
• Update Panel
• Partial Updates
• Conditional Updates
• Triggers
• Progress Notification
• Timed Refreshes
• ASP.NET AJAX Control Toolkit

2. Ajax is programming shorthand for a set of techniques
that create more responsive, dynamic pages that refresh
themselves quickly and flicker-free.
One of the hallmarks of Ajax is the ability to refresh part
of the page while leaving the rest untouched.
Technically, it’s a short form for Asynchronous JavaScript
and XML, although this technique is now considered to
be just one of several possible characteristics of an Ajax
web application.

3. • The key benefit of Ajax is responsiveness because it
can react immediately updating the page
partially, leaving the unchanged portion untouched
• An Ajax application, when done properly, provides a
better flicker free experience for the user.
• Complexity
• Browser Support

4. In order to use ASP.NET AJAX, you need to place the ScriptManager
control on your webpage.
It adds the links to the ASP.NET AJAX JavaScript libraries. It does that
by inserting a script block
<script src="/YourWebSite/ScriptResource.axd?d=RUSU1mI ..."
type="text/javascript">
</script>
ScriptResource.axd is a resource that tells ASP.NET to find a
JavaScript file that’s embedded in one of the compiled .NET 4
assemblies.
The JavaScript file is only downloaded once, and then cached by the
browser so it can be used by various pages in the website.

5. ASP.NET includes a handy control called UpdatePanel that lets
you take an ordinary page with server-side logic and make sure
it refreshes itself in flicker-free Ajax style using partial updates.
The basic idea is that you divide your web page into one or more
distinct regions, each of which is wrapped inside an invisible
UpdatePanel.
When an event occurs in a control that’s located inside an
UpdatePanel, and this event would normally trigger a full-page
postback, the UpdatePanel intercepts the event and performs an
asynchronous callback instead.
The only difference is the means of communication (the page
uses an asynchronous call to get the new data) and the way the
received data is dealt with (the UpdatePanel refreshes its inner
content, but the remainder of the page is not changed).

6. 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, 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 HTML content for every
UpdatePanel on the page. The client-side script code
then updates the page, replacing the existing HTML that’s
in each panel with the new content. (If a change has
occurred to content that’s not inside an UpdatePanel, it’s
ignored.)

7. The key technique in an Ajax web application is
partial refreshes.
With partial refreshes, the entire page doesn’t
need to be posted back and refreshed in the
browser.
The request takes place in the background, so
the webpage remains responsive.
When the web page receives the response, it
updates just the changed portion of the page,

9. In complex pages, you might have more than one
UpdatePanel. In this case, when one UpdatePanel
triggers an update, all the UpdatePanel regions will be
refreshed.
In this situation, you can configure the panels to update
themselves independently. Simply change the
UpdatePanel.UpdateMode property from Always to
Conditional.
The UpdatePanel will refresh itself only if an event
occurs in one of the controls in that UpdatePanel.

10. If you move the controls that fire postback out of the
UpdatePanel, their events won’t be intercepted any
longer, and they’ll trigger full-page postbacks with the
familiar flicker.
The solution is to explicitly tell the UpdatePanel to
monitor those controls, even though they aren’t
inside the UpdatePanel. You can do this by adding
triggers to the UpdatePanel.
Just select the UpdatePanel, click the Triggers property
in the Properties window, and click the ellipsis (...) that
appears in the Triggers box. Visual Studio will open a
dialog box where you can add as many triggers as you
want, and pick the control for each trigger from a drop-
down list.

11. <asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Font-
Bold="True"></asp:Label>
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=“cmdPostBack" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="cmdPostback" runat="server" Text="Refresh Full
Page" />

12. ASP.NET includes UpdateProgress control that allows
you to show a message while a time-consuming
asynchronous request is under way.
The UpdateProgress control works in conjunction with
the UpdatePanel.
When you add the UpdateProgress control to a
page, you get the ability to specify some content that will
appear as soon as an asynchronous request is started
and disappear as soon as the request is finished.
This content can include a fixed message, but many
people prefer to use an animated GIF

13. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="background-color:#FFFFE0;padding: 20px">
<asp:Label ID="lblTime" runat="server" Font-
Bold="True"></asp:Label>
<br /><br />
<asp:Button ID="cmdRefreshTime" runat="server"
OnClick="cmdRefreshTime_Click"
Text="Start the Refresh Process" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdateProgress ID="updateProgress1" runat="server">
<ProgressTemplate>
<div style="font-size: xx-small">
Contacting Server ... <img src="wait.gif" alt="Waiting..." />
</div>
</ProgressTemplate>
</asp:UpdateProgress>

14. In some situations, you might want to force a full or
partial page refresh without waiting for a user
action.
For example, you might create a page that includes
a stock ticker, and you might want to refresh this
ticker periodically (say, every five minutes) to
ensure it doesn’t become drastically outdated.
ASP.NET includes a Timer control that allows you to
implement this design easily.

15. <asp:Timer ID="Timer1" runat="server"
Interval="60000" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" UpdateMode="Conditional">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>

16. The ASP.NET AJAX Control Toolkit is a joint project
between Microsoft and the ASP.NET community. It
consists of dozens of controls that use the ASP.NET
AJAX libraries to create sophisticated effects.
To get the ASP.NET AJAX Control Toolkit, surf to
http://www.asp.net/ajaxlibrary/act.ashx.
A 6.4 MB ZIP file which is designed for ASP.NET 4 is
named AjaxControlToolkit.Binary.NET4.zip.
Inside the ZIP file, you’ll find a central assembly named
AjaxControlToolkit.dll and a host of smaller satellite
assemblies that support localization for different
cultures.