Chapter 25
- 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.