Chapter 25


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Chapter 25

  1. 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. 2. Ajax is programming shorthand for a set of techniquesthat create more responsive, dynamic pages that refreshthemselves quickly and flicker-free.One of the hallmarks of Ajax is the ability to refresh partof the page while leaving the rest untouched.Technically, it’s a short form for Asynchronous JavaScriptand XML, although this technique is now considered tobe just one of several possible characteristics of an Ajaxweb application.
  3. 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. 4. In order to use ASP.NET AJAX, you need to place the ScriptManagercontrol on your webpage.It adds the links to the ASP.NET AJAX JavaScript libraries. It does thatby 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 aJavaScript file that’s embedded in one of the compiled .NET 4assemblies.The JavaScript file is only downloaded once, and then cached by thebrowser so it can be used by various pages in the website.
  5. 5. ASP.NET includes a handy control called UpdatePanel that letsyou take an ordinary page with server-side logic and make sureit refreshes itself in flicker-free Ajax style using partial updates.The basic idea is that you divide your web page into one or moredistinct regions, each of which is wrapped inside an invisibleUpdatePanel.When an event occurs in a control that’s located inside anUpdatePanel, and this event would normally trigger a full-pagepostback, the UpdatePanel intercepts the event and performs anasynchronous callback instead.The only difference is the means of communication (the pageuses an asynchronous call to get the new data) and the way thereceived data is dealt with (the UpdatePanel refreshes its innercontent, but the remainder of the page is not changed).
  6. 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 serverinstead of a full-page postback.3. On the server, normal page life cycle executes, with allthe usual events. Finally, the page is rendered to HTMLand returned to the browser.4. ASP.NET AJAX receives HTML content for everyUpdatePanel on the page. The client-side script codethen updates the page, replacing the existing HTML that’sin each panel with the new content. (If a change hasoccurred to content that’s not inside an UpdatePanel, it’signored.)
  7. 7. The key technique in an Ajax web application ispartial refreshes.With partial refreshes, the entire page doesn’tneed to be posted back and refreshed in thebrowser.The request takes place in the background, sothe webpage remains responsive.When the web page receives the response, itupdates just the changed portion of the page,
  8. 8. In complex pages, you might have more than oneUpdatePanel. In this case, when one UpdatePaneltriggers an update, all the UpdatePanel regions will berefreshed.In this situation, you can configure the panels to updatethemselves independently. Simply change theUpdatePanel.UpdateMode property from Always toConditional.The UpdatePanel will refresh itself only if an eventoccurs in one of the controls in that UpdatePanel.
  9. 9. If you move the controls that fire postback out of theUpdatePanel, their events won’t be intercepted anylonger, and they’ll trigger full-page postbacks with thefamiliar flicker.The solution is to explicitly tell the UpdatePanel tomonitor those controls, even though they aren’tinside the UpdatePanel. You can do this by addingtriggers to the UpdatePanel.Just select the UpdatePanel, click the Triggers propertyin the Properties window, and click the ellipsis (...) thatappears in the Triggers box. Visual Studio will open adialog box where you can add as many triggers as youwant, and pick the control for each trigger from a drop-down list.
  10. 10. <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 FullPage" />
  11. 11. ASP.NET includes UpdateProgress control that allowsyou to show a message while a time-consumingasynchronous request is under way.The UpdateProgress control works in conjunction withthe UpdatePanel.When you add the UpdateProgress control to apage, you get the ability to specify some content that willappear as soon as an asynchronous request is startedand disappear as soon as the request is finished.This content can include a fixed message, but manypeople prefer to use an animated GIF
  12. 12. <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>
  13. 13. In some situations, you might want to force a full orpartial page refresh without waiting for a useraction.For example, you might create a page that includesa stock ticker, and you might want to refresh thisticker periodically (say, every five minutes) toensure it doesn’t become drastically outdated.ASP.NET includes a Timer control that allows you toimplement this design easily.
  14. 14. <asp:Timer ID="Timer1" runat="server"Interval="60000" /><asp:UpdatePanel ID="UpdatePanel1"runat="server" UpdateMode="Conditional"><ContentTemplate>...</ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="Timer1" EventName="Tick" /></Triggers></asp:UpdatePanel>
  15. 15. The ASP.NET AJAX Control Toolkit is a joint projectbetween Microsoft and the ASP.NET community. Itconsists of dozens of controls that use the ASP.NETAJAX libraries to create sophisticated effects.To get the ASP.NET AJAX Control Toolkit, surf to 6.4 MB ZIP file which is designed for ASP.NET 4 isnamed the ZIP file, you’ll find a central assembly namedAjaxControlToolkit.dll and a host of smaller satelliteassemblies that support localization for differentcultures.