ptg 1724 CHAPTER 38 Using Server-Side ASP.NET AJAX NOTE To learn more about caching , see Chapter 29, “Caching Application Pages and Data.” When working with the UpdatePanel, you should never forget that the server-side page undergoes its normal page execution life cycle whenever an asynchronous postback occurs. If you perform an expensive database lookup in your Page_Load() method, that lookup occurs with each asynchronous call to your server. You can avoid performing unnecessary server-side work during an asynchronous postback by taking advantage of the ScriptManager control’s IsInAsyncPostBack property. You can use this property to detect whether the page is executing in the context of a normal postback or an asynchronous postback. Using the Timer Control The ASP.NET AJAX Timer control enables you to refresh an UpdatePanel (or the entire page) on a timed basis. The Timer control has one important property: . Interval—The amount of time, in milliseconds, between Tick events. The default value is 60,000 (1 minute). The Timer control raises a Tick event every so many milliseconds, depending on the value of its Interval property. If you don’t associate the Timer control with an UpdatePanel, the Timer posts the entire page back to the server performing a normal postback. For example, the page in Listing 38.22 posts the entire page back to the server every 2 seconds. LISTING 38.22 TimerPage.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Timer Page</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Timer ID=”Timer1” Interval=”2000” runat=”server” /> From the Library of Wow! eBook ptg 1725 Using the Timer Control 38 The time is <%= DateTime.Now.ToString(“T”) %> </div> </form> </body> </html> A more typical use of the Timer control is to refresh an UpdatePanel control’s content on a timed basis. For example, the page in Listing 38.23 displays a random quotation every 2 seconds (see Figure 38.14). FIGURE 38.14 Refreshing the control content using Timer control. LISTING 38.23 TimerQuote.aspx <%@ Page Language=”C#” %> <%@ Import Namespace=”System.Collections.Generic” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void Page_Load(object sender, EventArgs e) { List<string> quotes = new List<string>(); quotes.Add(“A fool and his money are soon parted”); quotes.Add(“A penny saved is a penny earned”); quotes.Add(“An apple a day keeps the doctor away”); Random rnd = new Random(); lblQuote.Text = quotes[rnd.Next(quotes.Count)]; } </script> From the Library of Wow! eBook ptg 1726 CHAPTER 38 Using Server-Side ASP.NET AJAX <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <title>Timer Quote</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:Timer ID=”Timer1” Interval=”2000” runat=”server” /> Page Time: <%= DateTime.Now.ToString(“T”) %> <fieldset> <legend>Quote</legend> <asp:UpdatePanel ID=”up1” runat=”server”> <Triggers> <asp:AsyncPostBackTrigger ControlID=”Timer1” EventName=”Tick” /> </Triggers> <ContentTemplate> <asp:Label ID=”lblQuote” runat=”server” /> </ContentTemplate> </asp:UpdatePanel> </fieldset> </div> </form> </body> </html> The Timer control in Listing 38.23 is configured as a trigger for the UpdatePanel control. When the Timer raises its Tick event, the UpdatePanel control refreshes its content by performing an asynchronous postback and grabbing a new quotation to display. The final example of the Timer control is contained in Listing 38.24. In this example, a Timer control refreshes a discussion forum’s messages every 5 seconds. If you leave your browser window open, you see new messages as they are posted by other members of the forum (see Figure 38.15). From the Library of Wow! eBook ptg 1727 Using the Timer Control 38 LISTING 38.24 TimerMessages.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Timer Messages</title> <style type=”text/css”> .message { margin-left: 20px; font-style:italic; } </style> </head> <body> <form id=”form1” runat=”server”> <asp:ScriptManager ID=”sm1” runat=”server” /> <asp:Timer ID=”Timer1” Interval=”5000” runat=”server” /> <asp:UpdatePanel ID=”up1” runat=”server”> <Triggers> <asp:AsyncPostBackTrigger ControlID=”Timer1” EventName=”Tick” /> FIGURE 38.15 Database messages being updated asynchronously. From the Library of Wow! eBook ptg 1728 CHAPTER 38 Using Server-Side ASP.NET AJAX </Triggers> <ContentTemplate> Last Refresh <%= DateTime.Now.ToString(“T”) %> <hr /> <asp:ListView id=”lstMessages” DataSourceID=”srcMessages” Runat=”server”> <LayoutTemplate> <div id=”itemContainer” runat=”server”> </div> </LayoutTemplate> <ItemTemplate> <div> Posted by <%# Eval(“PostedBy”) %> <div class=”message”> <%# Eval(“Post”) %> </div> </div> </ItemTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel> <asp:ObjectDataSource id=”srcMessages” TypeName=”Message” SelectMethod=”Select” Runat=”server” /> </form> </body> </html> The page in Listing 38.24 contains a ListView that gets refreshed every 5 seconds. Be aware that every person who has this page open in a browser will cause a database call to be made every 5 seconds. This data is an excellent candidate for caching. Using the UpdateProgress Control The last control that we need to examine in this chapter is the UpdateProgress control. This control enables you to display a progress indicator while an UpdatePanel is updating its content. From the Library of Wow! eBook ptg 1729 Using the UpdateProgress Control 38 During a normal postback, the browser displays its progress in downloading new content by spinning an icon or displaying a progress bar. During an asynchronous postback, on the other hand, there is no visual indication of progress. You can use the UpdateProgress control to give the users some sense that something is happening during an asynchro- nous postback. NOTE In the next chapter, we examine an alternative method of displaying UpdatePanel progress. You learn how to use the UpdatePanelAnimation control to display an ani- mation while an UpdatePanel’s content is refreshed. The page in Listing 38.25 illustrates how to use the UpdateProgress control. If you click the button, an animation spins while the asynchronous postback is performed (see Figure 38.16). FIGURE 38.16 Viewing a spinning asynchronous progress indicator. LISTING 38.25 ShowUpdateProgress.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void btnSubmit_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Show UpdateProgress</title> <style type=”text/css”> .progress From the Library of Wow! eBook ptg 1730 CHAPTER 38 Using Server-Side ASP.NET AJAX { font-family:Arial; position: absolute; background-color:lightyellow; border:solid 2px red; padding:5px; } </style> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <asp:UpdatePanel ID=”up1” runat=”server”> <ContentTemplate> <%= DateTime.Now.ToString(“T”) %> <asp:Button id=”btnSubmit” Text=”Submit” Runat=”server” OnClick=”btnSubmit_Click” /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID=”progress1” AssociatedUpdatePanelID=”up1” runat=”server”> <ProgressTemplate> <div class=”progress”> <asp:Image id=”imgProgress” ImageUrl=”~/Images/Progress.gif” Runat=”server” /> Retrieving content </div> </ProgressTemplate> </asp:UpdateProgress> </div> </form> </body> </html> From the Library of Wow! eBook ptg 1731 Summary 38 When you click the button in Listing 38.25, the response is delayed for 5 seconds so you have a chance to see the progress indicator. The delay simulates a network delay. NOTE Several websites enable you to generate fancy animator progress indicator icons. Here is the address to one of my favorites: http://www.ajaxload.info The UpdateProgress control supports the following three properties: . AssociatedUpdatePanelID—The UpdateProgress control displays progress for this UpdatePanel control. . DisplayAfter—The amount of time, in milliseconds, before the UpdateProgress control displays content. The default is 500 milliseconds (half a second). . DynamicLayout—When this property is set to true (the default), the UpdateProgress control is initially hidden with the Cascading Style Sheet (CSS) attribute display:none. When this property is set to false, the UpdateProgress control is hidden with the CSS attribute visibility:hidden. Summary In this chapter, you learned how to use the primary server-side ASP.NET AJAX control: UpdatePanel. The bulk of this chapter was devoted to discussing the different features of this control. You learned how to specify triggers for an UpdatePanel. You also learned about how the UpdatePanel control participates in a page’s server-side and client-side page execution life cycle. We also examined how you can handle errors gracefully when using the UpdatePanel control. In the final parts of this chapter, you learned how to use two controls that support the UpdatePanel control. First, you learned how to use the Timer control to refresh an UpdatePanel on a timed basis. Second, you learned how to use the UpdateProgress control to give the user something to watch during an UpdatePanel control’s asynchro- nous postback. From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook ptg CHAPTER 39 Using the ASP.NET AJAX Control Toolkit IN THIS CHAPTER . Using the ASP.NET AJAX Control Toolkit . Overview of the Toolkit Controls . Using the AutoComplete Control . Using the DragPanel Control . Using the FilteredTextBox Control . Using the MaskedEdit Control . Using the Animation Control . Using the UpdatePanelAnimation Control . Summary The ASP.NET AJAX Control Toolkit consists of more than 40 server-side Ajax controls that you can use in your ASP.NET applications. You can take advantage of the controls to create website special effects such as animations, rounded corners, and modal pop-ups. You can also use the controls for more serious applications such as implement- ing auto-complete and masked edit text fields. The controls in the ASP.NET AJAX Control Toolkit are Ajax controls in the broad sense of the word Ajax. All the Toolkit controls use client-side JavaScript. However, most of the controls do not perform asynchronous postbacks. So, they are Ajax controls in the sense that they take advantage of a lot of JavaScript. Almost all the controls in the Toolkit are extender controls. The controls extend the functionality of existing ASP.NET controls, such as the standard TextBox and Panel controls, with new functionality. Almost all the Toolkit controls have a TargetControlID property that you use to point to a control to extend. In the first part of this chapter, you learn how to install and use the Toolkit controls in an ASP.NET application. Next, you are provided with a brief overview of each of the controls. Finally, we examine six of the controls in more detail: AutoComplete, DragPanel, FilteredTextBox, MaskedEdit, Animation, and UpdatePanelAnimation. From the Library of Wow! eBook . /> </ContentTemplate> < /asp: UpdatePanel> < ;asp: UpdateProgress ID=”progress1” AssociatedUpdatePanelID=”up1” runat=”server”> <ProgressTemplate> <div class=”progress”> < ;asp: Image id=”imgProgress” ImageUrl=”~/Images/Progress.gif”. ptg 17 24 CHAPTER 38 Using Server-Side ASP. NET AJAX NOTE To learn more about caching , see Chapter 29, “Caching Application Pages and Data.” When working with the UpdatePanel, you. Library of Wow! eBook ptg 1730 CHAPTER 38 Using Server-Side ASP. NET AJAX { font-family:Arial; position: absolute; background-color:lightyellow; border:solid 2px red; padding:5px; } </style> </head>