ptg 1764 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit . Discrete Animation—Plays an animation by setting a property of the target element to a sequence of values. . Interpolated Animation—Plays an animation by changing a property gradually between a range of values represented by startValue and endValue. . Color Animation—Plays an animation by changing a property gradually between a range of values represented by a start color and an end color. . Length Animation—Plays an animation by changing a property gradually between a range of values representing a start and end unit of length. . Move Animation—Plays an animation by moving an element (either relatively or absolutely) across the page. . Resize Animation—Plays an animation by resizing an element by changing the element’s width and height. . Scale Animation—Plays an animation by resizing an element by using a scale factor. . Enable Action—An action that disables or enables an element on the page (such as a Button control). . Hide Action—An action that hides an element by setting display:none. . Style Action—An action that applies a style attribute to an element. . Opacity Action—An action that modified the transparency of an element. . Script Action—An action that executes a JavaScript script. To learn more about the properties that you can use with each of these different types of animations, refer to the Animation Reference included with the ASP.NET AJAX Control Toolkit SampleWebSite website. Using the UpdatePanelAnimation Control The final Toolkit control that we need to discuss in this chapter is the UpdatePanelAnimation extender control. This control can play an animation both when an UpdatePanel is initiating an asynchronous postback and when postback results are returned from the web server. Performing some type of animation while an UpdatePanel is performing an asynchronous postback provides the user with a way to know that your web application hasn’t frozen. The animation indicates that some work is being done in the background. From the Library of Wow! eBook ptg 1765 Using the UpdatePanelAnimation Control 39 NOTE In the previous chapter, we discussed the UpdateProgress control, which enables you to display a busy wait indicator while an UpdatePanel performs an asynchronous post- back. In my opinion, playing an animation seems like a less intrusive method of indicat- ing UpdatePanel control progress. The page in Listing 39.10 demonstrates how you can use the UpdatePanelAnimation control to create a yellow fade effect while an UpdatePanel is performing an update. LISTING 39.10 ShowUpdatePanelAnimation.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”ajax” Namespace=”AjaxControlToolkit” Assembly=”AjaxControlToolkit” %> <!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(2000); lblSelectedColor.Text = txtFavoriteColor.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Show UpdatePanel Animation</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ScriptManager ID=”ScriptManager1” runat=”server” /> <% First Update Panel %> <asp:UpdatePanel ID=”up1” runat=”server”> <ContentTemplate> <asp:Label id=”lblFavoriteColor” Text=”Enter Your Favorite Color:” Runat=”server” /> <asp:TextBox From the Library of Wow! eBook ptg 1766 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit id=”txtFavoriteColor” Runat=”server” /> <asp:Button id=”btnSubmit” Text=”Submit” Runat=”server” OnClick=”btnSubmit_Click” /> </ContentTemplate> </asp:UpdatePanel> <ajax:UpdatePanelAnimationExtender id=”upae1” TargetControlID=”up1” runat=”server”> <Animations> <OnUpdating> <Color Duration=”0.5” Fps=”20” Property=”style” PropertyKey=”backgroundColor” StartValue=”#FFFFFF” EndValue=”#FFFF90” /> </OnUpdating> <OnUpdated> <Color Duration=”1” Fps=”20” Property=”style” PropertyKey=”backgroundColor” StartValue=”#FFFF90” EndValue=”#FFFFFF” /> </OnUpdated> </Animations> </ajax:UpdatePanelAnimationExtender> <p> </p> <% Second Update Panel %> <asp:UpdatePanel ID=”up2” runat=”server”> <ContentTemplate> You selected: <asp:Label id=”lblSelectedColor” Runat=”server” /> From the Library of Wow! eBook ptg 1767 Using the UpdatePanelAnimation Control 39 </ContentTemplate> </asp:UpdatePanel> <ajax:UpdatePanelAnimationExtender id=”UpdatePanelAnimationExtender1” TargetControlID=”up2” runat=”server”> <Animations> <OnUpdating> <Color Duration=”0.5” Fps=”20” Property=”style” PropertyKey=”backgroundColor” StartValue=”#FFFFFF” EndValue=”#FFFF90” /> </OnUpdating> <OnUpdated> <Color Duration=”3” Fps=”20” Property=”style” PropertyKey=”backgroundColor” StartValue=”#FFFF90” EndValue=”#FFFFFF” /> </OnUpdated> </Animations> </ajax:UpdatePanelAnimationExtender> </div> </form> </body> </html> The page in Listing 39.10 contains two UpdatePanel controls. The first UpdatePanel control contains a form that asks you to enter your favorite color. When you submit the form, the color that you entered appears in a Label control that is contained in the second UpdatePanel control. The yellow fade effect is applied to both UpdatePanel controls. When you submit the form, the background colors of both UpdatePanel controls fade to yellow. Then, gradually, the background colors fade back to white. There are two good reasons to use a yellow fade effect in the page in Listing 39.10. First, this animation effect is used with the first UpdatePanel to show that work is being done. From the Library of Wow! eBook ptg 1768 CHAPTER 39 Using the ASP.NET AJAX Control Toolkit During an asynchronous postback, a user cannot look at the browser progress bar to detect progress. You need to provide the user with some indication of work. The second UpdatePanelAnimation control applies a yellow fade effect to the UpdatePanel that displays the value that the user entered into the form. The other reason to use a yellow fade effect is to highlight the areas of a page that have been updated. Because Ajax enables you to quietly update different regions of a page, you need some way of drawing a user’s attention to the areas that have been updated. The UpdatePanelAnimation control provides you with an easy way to grab the user’s attention and focus it on areas of the page that have been changed. NOTE The yellow fade effect was invented and popularized by Matthew Linderman at 37sig- nals. You can read the original description of this technique at the following address: http://www.37signals.com/svn/archives/000558.php. Summary This chapter provided you with an overview of the ASP.NET AJAX Control Toolkit. In the first part of this chapter, you were provided with a brief overview of each of the controls currently contained in the Toolkit. Next, we focused on six of the controls: AutoComplete, DragPanel, FilteredTextBox, MaskedEdit, Animation, and UpdatePanelAnimation. You learned how to use the AutoComplete control to display auto-complete suggestions while a user is entering text into a TextBox. You learned how to expose the suggestions from a web method contained in a page and a web method contained in a separate web service. You also learned how to associate a primary key value with each suggestion. Next, we examined the DragPanel control. You learned how to use the DragPanel control to create a pop-up, draggable virtual window. We then looked at two controls that can be used to restrict user input into a TextBox. You learned how to use the FilteredTextBox control to allow only certain characters to be entered in a TextBox. You also learned how to use the MaskedEdit control to provide a user interface that indicates the type of content a TextBox accepts. Finally, we explored the topic of animation. You were provided with an overview of the rich, declarative animation framework included with the ASP.NET AJAX Control Toolkit. You also learned how to play an animation while an UpdatePanel control performs an asynchronous postback. From the Library of Wow! eBook ptg CHAPTER 40 Client-Side Ajax with jQuery IN THIS CHAPTER . What Is jQuery? . Calling Web Services from the Client . Summary In this chapter, you learn how to build “pure” Ajax appli- cations that execute on the browser instead of the server. In previous versions of ASP.NET, the primary method of writing client-side code was to use the Microsoft AJAX library. This library provided extensions to JavaScript to make it resemble .NET languages such as C# and VB.NET. The corporate vice president of .NET Platform, Scott Guthrie, announced in March 2010, that it was taking a different approach to client-side development. A JavaScript library called jQuery is now the recommended method to build client-side functionality. In ASP.NET 4, you can still use the Microsoft AJAX library to develop client-side appli- cations, but it is now part of the Ajax Toolkit instead of built into ASP.NET Framework. In the first part of this chapter, you learn about the jQuery library and how it works. You dive into two core features of jQuery: events and selectors. You also build your first appli- cation that executes completely on the client-side. Next, we get to the heart of client-side Ajax. You learn how to perform Ajax calls from the browser to the server. You learn how to call both web methods exposed by an ASP.NET web service and web methods exposed by an ASP.NET page. What Is jQuery? jQuery is an extremely fast, lightweight JavaScript library that simplifies many aspects of client-side web develop- ment. You can use jQuery for almost any client-side functionality that you can think of—event handling, animations, drag-and-drop functionality, asynchronous From the Library of Wow! eBook ptg 1770 CHAPTER 40 Client-Side AJAX with jQuery web service calls, and much more. Furthermore, jQuery supports a robust plug-in model that enables developers to write their own extensions to implement whatever functional- ity they want. There are already hundreds of powerful jQuery plug-ins available. jQuery is CSS3-compliant and works on almost all browsers—Internet Explorer 6.0+, FireFox 2+, Safari 3.0+, Opera 9.0, and Google Chrome. This means that you can write one set of code and not have to worry about handling the specifics of different browser imple- mentations; each line of jQuery works exactly the same on all browsers. The jQuery library is used on an incredible number of popular websites. Google, Dell, Bank of America, Digg.com, Netflix, WordPress, and even the White House are some examples of websites that rely on jQuery for client-side functionality. Using the jQuery Library The supporting code for jQuery, is contained in a single JavaScript file named jquery- <version>.js. At the time this book was written, the latest jQuery version is 1.4.1, so the filename is jquery-1.4.1.js. This file is included automatically in the Scripts folder when you create a website project using the ASP.NET Website template in Visual Studio 2010. You’ll also see two other files in the Scripts director y—jquery-<version>.min.js and jquery-<version>-vsdoc.js (see Figure 40.1). FIGURE 40.1 The jQuery library files within an ASP.NET project. The “min” file is a “minified” version of the jQuery library. It can be compared to the two different versions of .NET builds: Debug and Release. The Debug contains more informa- tion so that you can track down errors but is ultimately slower. Similarly, the minified version of jQuery is a lot faster but is unreadable for debugging purposes. The minified version of jQuery is only 24KB, whereas the development version is 155KB—more than six times the size. For production applications, you should use the minified version of jQuery. For all the following examples, we use the larger, slower developer version of jQuery so that you can debug the applications. NOTE The Microsoft AJAX libraries also have separate development and minified versions. The minified version is 83KB—more than three times the size of the minified version of jQuery! From the Library of Wow! eBook ptg 1771 What Is jQuery? The vsdoc file provides jQuery IntelliSense within Visual Studio. Visual Web Developer attempts to provide all jQuery methods and objects in the pop-up window as you write your JavaScript. This is quite an accomplishment considering that jQuery (and JavaScript, in general) is dynamic, and a variable might change its data type at any time at runtime. It is easy to add jQuery to any web page. You need to add only one line of HTML: <script type=”text/javascript” src=”./Scripts/jquery-1.4n.1.js”></script> Simply add this to your page, and you have the full jQuery library available to you. You don’t need to explicitly add a reference to the vsdoc file—as long as the filename matches the jQuery filename up to the -vsdoc.js, the IntelliSense file will be interpreted automatically (see Figure 40.2). 40 Creating a jQuery File Before we do anything else, we need to discuss how you create an external JavaScript file and reference it in a Web Form page. Although you can add JavaScript directly to a page by wrapping it in <script> tags, it is better to separate your client-side logic into its own file. You create a JavaScript file by selecting Website, Add New Item and selecting the Jscript File option (see Figure 40.3). FIGURE 40.2 Adding jQuery to a page and jQuery IntelliSense. From the Library of Wow! eBook ptg 1772 For example, the file in Listing 40.1 contains a single JavaScript function called sayMessage() that displays a JavaScript alert with a message. LISTING 40.1 myScript.js /// <reference path=”/Scripts/jquery-1.4.1.js”/> function sayMessage() { alert(“Hello World!”); } $(document).ready(function () { sayMessage(); }); By default, Visual Studio will put this file in the root of your website. To keep things orga- nized, you should move this file in the “scripts” folder of your project. You should notice two special things about this file. First, at the bottom of the file is a call to a jQuery method: $(document).ready(). The significance of this method is explained in the next section. Second, you notice a comment at the top of the file that references the jQuery library. This reference gives you full jQuery Intellisense in your JavaScript file, even though the jQuery library isn’t explicitly referenced in your actual JavaScript code. CHAPTER 40 Client-Side AJAX with jQuery FIGURE 40.3 Creating a script file with Visual Web Developer. From the Library of Wow! eBook ptg 1773 What Is jQuery? 40 After you create an external JavaScript file, you can use it in an ASP.NET AJAX-enabled page by creating a script reference. The page in Listing 40.2 illustrates how you add a script reference to the myLibrary.js library. LISTING 40.2 HelloJquery.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 type=”text/javascript” src=”./Scripts/jquery-1.4.1.js”></script> <script type=”text/javascript” src=”./Scripts/myScript.js”></script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title></title> </head> <body> <form id=”form1” runat=”server”> <div> </div> </form> </body> </html> You can see that all we’re doing is adding another script reference to our new myScript.js file. Other than that, we’re not adding any additional code to the page. From this simple six-line script and the reference to it, we’re already adding client-side functionality to our page. The $ Method and $(document).ready() The heart of jQuery lies is a single method called jQuery(). To make things easier for developers, the same method can be called by using the $ character. The dollar-sign is a valid character in JavaScript, so it alone can be used as a method name. The $() method is used to select objects in your web page. In general, it is similar to the JavaScript method getElementById, except it’s much more flexible. We cover selectors in detail in the next section, but for now, understand that the $() method is used in every jQuery method. The $(document).ready() call that we used in the previous example is your first example of a jQuery event. jQuery events are similar to ASP.NET events because they fire at certain From the Library of Wow! eBook . <div> < ;asp: ScriptManager ID=”ScriptManager1” runat=”server” /> <% First Update Panel %> < ;asp: UpdatePanel ID=”up1” runat=”server”> <ContentTemplate> < ;asp: Label id=”lblFavoriteColor”. client-side functionality. In ASP. NET 4, you can still use the Microsoft AJAX library to develop client-side appli- cations, but it is now part of the Ajax Toolkit instead of built into ASP. NET. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script type=”text/javascript” src=”./Scripts/jquery-1 .4. 1.js”></script> <script type=”text/javascript” src=”./Scripts/myScript.js”></script> <html xmlns=”http://www.w3.org/1999/xhtml”>