List of Figures

Chapter 1. Introducing ASP.NET AJAX

Figure 1.1. Ajax components. The technologies used in the Ajax pattern complement each to deliver a richer and smarter application that runs on the browser.

Figure 1.2. The Windows Live site is an excellent example of what can be accomplished with the ASP.NET AJAX framework.

Figure 1.3. Traditional web applications behave in a synchronous manner and take away all interaction from the user during HTTP requests.

Figure 1.4. The asynchronous web application model leverages an Ajax engine to make an HTTP request to the server.

Figure 1.5. A simple asynchronous request to another page

Figure 1.6. The ASP.NET AJAX architecture spans both the client and server.

Figure 1.7. The client-centric development model is driven by a smarter and more interactive application that runs on the browser.

Figure 1.8. Pageflakes is a great example of how a mashup application consumes data from multiple resources to enrich the user experience.

Figure 1.9. The Server-Centric Development model passes down to the browser application portions of the page to update instead of a whole new page to refresh.

Figure 1.10. The ASP.NET AJAX-Enabled Web Site template creates a website that references the ASP.NET AJAX assembly and configures the web.config file for Ajax integration.

Figure 1.11. The employee-lookup application before adding any Ajax support

Figure 1.12. Using the Design view in Visual Studio provides a visual alternative to editing the layout and elements on the page.

Figure 1.13. It’s generally a good practice to inform users that work is in progress during an asynchronous update.

Figure 1.14. The framework generates a JavaScript proxy so calls to a web service can be made from the client-side script.

Chapter 2. First steps with the Microsoft Ajax Library

Figure 2.1. On the server side, an ASP.NET page is represented by an instance of the Page class. In a similar manner, on the client side, you have the global Sys.Application object.

Figure 2.2. A component encapsulates some logic and exposes it through properties, methods and events.

Figure 2.3. The client-page lifecycle starts when the browser loads a web page. The Sys.Application object is responsible for hooking up the events raised by the window object and, in turn, firing its own events. Client components are created during the init stage and disposed automatically in the unload stage.

Figure 2.4. The “Hello Microsoft Ajax!” program running in Internet Explorer

Figure 2.5. The Microsoft Ajax Library provides a common interface to different DOM implementations. The library translates the DOM calls made with the Sys.UI.DomElement class into browser-specific functions. Sys.UI.DomEvent offers a cross-browser object for representing event data.

Figure 2.6. Syntax for the $addHandler method, used for attaching a handler to an event raised by a DOM element

Figure 2.7. A Date instance can be formatted using the current culture as set in an ASP.NET page on the server side.

Figure 2.8. You can use the Sys.Browser object to perform browser detection at runtime.

Figure 2.9. Debug messages logged to the Firebug console in Firefox

Figure 2.10. Fiddler is a free tool that lets you debug HTTP traffic.

Figure 2.11. An exception message displayed using typed errors

Chapter 3. JavaScript for Ajax developers

Figure 3.1. Calling a parent function that invokes a child function

Figure 3.2. How the Sys._Application class is registered using the registerClass method. The class-registration process also lets you specify a parent class and the interfaces implemented by the class.

Figure 3.3. Inheritance in JavaScript is prototype-based. An object inherits all the properties defined in the prototype of the parent objects.

Figure 3.4. In the Microsoft Ajax Library, inheritance is resolved by making a child class inherit all the properties defined in the prototype object and in the constructor of the ancestor classes.

Figure 3.5. Syntax of the callBaseMethod method, which is used for invoking the base implementation of a method

Figure 3.6. The Simple Namespace Browser running in Internet Explorer

Figure 3.7. With the Microsoft Ajax Library, objects can expose events. The add_eventName and remove_eventName methods (where eventName is the name of the event) are used to add and remove an event hander, respectively. Internally, a function called _raiseEvent can be used to raise the event.

Chapter 4. Exploring the Ajax server extensions

Figure 4.1. The Ajax server extensions are a new set of server controls that complement the already powerful controls in the ASP.NET toolbox.

Figure 4.2. This application was written for a fictitious record company. Numerous areas on the page encourage user interaction. Each interaction, unfortunately, causes the page to refresh.

Figure 4.3. The System.Web.Extensions library is visible in the .NET tab of the Add Reference dialog. If this isn’t visible but the framework has been installed, then you can select the ‘Browse’ tab to add the dll manually. If you don’t see this, you might want to investigate your installation and confirm that the framework has been installed correctly.

Figure 4.4. This snapshot is from the Design view in Visual Studio; it shows the state of the controls before adding Ajax support.

Figure 4.5. Adding the UpdatePanel around the GridView and DetailsView controls replaces their traditional postbacks with asynchronous postbacks.

Figure 4.6. The UpdateProgress control offers a simple and useful tool for keeping the user informed about asynchronous updates on the page.

Figure 4.7. By default, exceptions that occur during asynchronous postbacks are displayed in alert dialogs.

Figure 4.8. You can change the error message during the AsyncPostBackError event.

Chapter 5. Making asynchronous network calls

Figure 5.1. Use the Add New Item dialog to add a web service to the site.

Figure 5.2. The generated page for an ASP.NET web service gives a summary of its public methods and a link to the service description.

Figure 5.3. Firebug shows a glimpse of the client-side proxy that is included in the page for calling the web methods in the service.

Figure 5.4. A snapshot of what you’ve built so far: calls to two Web Service methods, one that returns a simple type and another that returns a collection of a custom type

Figure 5.5. Using Firebug for Firefox, this snapshot shows the contents of what is being returned by the server.

Figure 5.6. The results of passing in a complex type to the server from JavaScript

Figure 5.7. By default, the XMLHttpRequest object is limited to making asynchronous calls to local servers only.

Figure 5.8. A local server can be used as a proxy to a remote server to get around cross-domain restrictions.

Figure 5.9. A simple geographical mashup

Figure 5.10. Search results from the Flickr REST service are returned in an XML format that you must parse.

Figure 5.11. The results of the Flickr search after transforming the data into a useful object and formatting the interface

Figure 5.12. The login form used to authenticate users on the site

Figure 5.13. The contact information page gives the user a form for reading and updating their profile information.

Figure 5.14. The message board application demonstrates a complex, real-world example of how to use some of the patterns discussed in this chapter.

Chapter 6. Partial-page rendering with UpdatePanels

Figure 6.1. The online poll control in a state before any user interaction

Figure 6.2. Feedback from the online poll after it has been completed

Figure 6.3. Simple ContentTemplate example

Figure 6.4. The results of an asynchronous postback invoked from the first UpdatePanel. The second UpdatePanel isn’t updated because its UpdateMode is set to Conditional and none of its conditions have been met.

Figure 6.5. The results of two UpdatePanel controls with identical content but different RenderMode settings: the first set to Inline, the second to Block.

Figure 6.6. Repeating UpdatePanel controls

Figure 6.7. The GridView in its initial state shows the contents of the Contact table in the AdventureWorks database.

Figure 6.8. After the user enters text and clicks the Filter button, the contents of the selected column are filtered and updated.

Figure 6.9. The results of a filter applied to a GridView as a result of keystrokes entered by the user.

Chapter 7. Under the hood of the UpdatePanel

Figure 7.1. The PageRequestManager fires off a series of events before, during, and after an asynchronous postback. This allows the page and control developer to have more influence over how content is rendered during a postback.

Figure 7.2. A capture of an asynchronous HTTP request confirms that the X-MicrosoftAjax fields is being added to the request.

Figure 7.3. The response from the server during an asynchronous postback includes uniquely formatted text that is parsed by the PageRequestManager in the browser to apply the partial-page updates.

Figure 7.4. A client-side event viewer application will let you observe how the PageRequestManager and partial-page rendering mechanism works.

Figure 7.5. Your progress thus far: capturing each event raised during an asynchronous postback

Figure 7.6. After returning from an asynchronous postback, all the components associated with elements in the UpdatePanel are disposed.

Chapter 8. ASP.NET AJAX client components

Figure 8.1. Every client component derives from the base Sys.Component class, which implements a well-defined set of interfaces.

Figure 8.2. Hierarchy of components in the Microsoft Ajax Library. Nonvisual components provide generic component functionality and derive from Sys.Component. Visual components can be associated with DOM elements and can derive from Sys.UI.Behavior or Sys.UI.Control.

Figure 8.3. Methods defined by the Sys.IContainer interface. The Sys._Application class is an example of a client class that is a container.

Figure 8.4. Client page lifecycle and component’s internal lifecycle: client components are hosted by the Application object during their creation and are automatically disposed when the page is unloaded by the browser.

Figure 8.5. The trivial component greets you.

Figure 8.6. Syntax for the $create method. This method is responsible for creating, configuring, and initializing a client component instance.

Figure 8.7. $find lets you access a component created with the $create method by passing its ID and an instance of a class that implements the Sys.IContainer interface. If the second argument is omitted, the component is searched for in Sys.Application.

Figure 8.8. You can use the $find method to retrieve a reference to an instance of a client behavior by knowing the ID of the associated DOM element and the value of the behavior’s name property.

Figure 8.9. The FormattingBehavior lets you implement the in-place-edit functionality in a web form. By using CSS, you can simulate a visual effect that turns a label into a text field.

Figure 8.10. A simple photo gallery control realized by associating a client control to a portion of structured markup code.

Chapter 9. Building Ajax-enabled controls

Figure 9.1. The hierarchy of script descriptors reflects, on the server side, the hierarchy of client components.

Figure 9.2. Public properties and methods exposed by the ScriptBehaviorDescriptor class

Figure 9.3. How the methods exposed by a script descriptor are used to generate a $create statement

Figure 9.4. Public properties and methods exposed by the ScriptControlDescriptor class

Figure 9.5. An Ajax-enabled control must register itself with the ScriptManager control. The registration procedure starts during the PreRender stage and is completed in the Render stage.

Figure 9.6. In the extender model, a server control receives the client functionality from the Extender control, which provides the script references and script descriptors needed to wire a client component to the extended control.

Figure 9.7. A script control is a server control that can both render markup code and provide the script references and script descriptors needed to instantiate client components.

Figure 9.8. Base interface and classes provided by ASP.NET AJAX to create Ajax-enabled controls

Figure 9.9. Methods defined in the IExtenderControl interface

Figure 9.10. An extender must be registered with the ScriptManager control during the PreRender and Render phases of the server page lifecycle.

Figure 9.11. The extender class and the JavaScript file with the code for the client component can be hosted in an ASP.NET AJAX-enabled website.

Figure 9.12. Methods defined in the IScriptControl interface

Figure 9.13. A script control registers with the ScriptManager control during the PreRender and Render phases of the server page lifecycle.

Figure 9.14. Structure of the ScriptControls project

Figure 9.15. The AjaxLogin control running in the Opera browser

Chapter 10. Developing with the Ajax Control Toolkit

Figure 10.1. Google Suggest (http://labs.google.com/suggest) features an auto-complete text box that presents a list of suggested words with additional information about their numerical occurrences.

Figure 10.2. A web page with an auto-complete text box, built with an ASP.NET TextBox and the auto-complete extender

Figure 10.3. The Firebug console in Firefox shows the asynchronous requests made to the web service to retrieve the list of suggestions for the auto-complete text box.

Figure 10.4. Example of a slider extender running in Safari

Figure 10.5. The Toolkit API provides enhanced base classes for creating extenders and script controls.

Figure 10.6. The Toolkit API also extends the base functionality on the client side, where new base classes for creating behaviors and controls are provided.

Figure 10.7. Some of the attributes of the Toolkit API determine how a script descriptor generates a $create statement.

Figure 10.8. The Live GridView Filter that you built in chapter 6 is an example of a control that processes user input in real time.

Figure 10.9. Structure of the TextChanged project created by the Visual Studio template shipped with the Ajax Control Toolkit

Figure 10.10. The TextChangedExtender example running in Firefox. The current date is updated every time the change event of the text box is fired.

Figure 10.11. The CalendarExtender control provides a calendar rendered using Dynamic HTML on the client side.

Figure 10.12. Example of design-time support offered by Toolkit extenders

Figure 10.13. Base classes for the animations defined in the Toolkit animation framework

Figure 10.14. A sequence animation is used to play all the child animations sequentially.

Figure 10.15. A parallel animation is used to play all the child animations simultaneously.

Figure 10.16. The AnimationExtender example running in Internet Explorer

Figure 10.17. You can use the UpdatePanelAnimation extender to implement the yellow spotlight visual pattern.

Figure 10.18. Example of an animated transition applied to the PhotoGallery control. The animations that make up the transition are defined through JSON objects.

Chapter 11. XML Script

Figure 11.1. The message displayed by a JavaScript function that handles the init event raised by Sys.Application. The init event is hooked up declaratively using XML Script code.

Figure 11.2. The XML Script parser extracts component declarations from XML Script code blocks. Then, it parses the declarative code and creates instances of the corresponding JavaScript objects.

Figure 11.3. A type descriptor can have a methods property that returns an array of method descriptors. Each descriptor provides information about a particular method exposed by a class. The diagram illustrates the method descriptor relative to a method named invoke. The method accepts a single userContext argument, which is described with a parameter descriptor.

Figure 11.4. The SetProperty action lets you set properties of client components without writing a single line of JavaScript code.

Figure 11.5. Result of the example in listing 11.7. The InvokeMethod action invokes a method on a client object that, in turn, calls a method defined in a local Web Service.

Figure 11.6. The ConfirmPostBack action displays a confirmation message onscreen before performing the postback of the page.

Figure 11.7. Bindings can synchronize the values of two properties of the same or different components.

Chapter 12. Dragging and dropping

Figure 12.1. Draggable items and drop targets communicate with the DragDropManager to participate in a drag-and-drop operation.

Figure 12.2. Draggable items and drop targets can receive feedback from the DragDropManager through the IDragSource and IDropTarget interfaces.

Figure 12.3. Diagram of the Microsoft Ajax drag-and-drop engine

Figure 12.4. Example of a drag-and-drop operation that involves adding a book to a shopping cart

Figure 12.5. You can override the onDragStart, onDrag, and onDragEnd methods of the IDragSource interface to take actions during the drag phase.

Figure 12.6. The onDragEnterTarget, onDragInTarget, and onDragLeaveTarget methods of the IDropTarget interface are called by the DragDropManager when a draggable item overlaps with a drop target.

Figure 12.7. The drag-and-drop shopping cart running in Internet Explorer

Figure 12.8. Structure of a typical layered application. Layers form a chain and can communicate with one another.

Figure 12.9. Hierarchy of business objects used in the drag-and-drop shopping cart example

Chapter 13. Implementing common Ajax patterns

Figure 13.1. The Call Stack window of the Visual Studio Debugger

Figure 13.2. Using named functions in the debug version of a script file lets you display a more informative stack trace.

Figure 13.3. The IntelliSense tool in Visual Studio Orcas can show properties of JavaScript objects.

Figure 13.4. XML Comments added to custom JavaScript objects are used by the IntelliSense tool in Visual Studio Orcas.

Figure 13.5. Installing ASP.NET Futures adds a website template for preconfiguring sites.

Figure 13.6. Calling AddHistoryPoint updates the URL with the state of the page and adds an entry to the history log.

Figure 13.7. A ListView bound to a list of products using XML Script. The data, stored in the AdventureWorks database, is accessed through a Web Service.

Figure 13.8. Example of widgets with drag-and-drop support, realized using the DragDropList and DraggableListItem behaviors.

Appendix A. Installing ASP.NET AJAX

Figure A.1. You can download all the ASP.NET AJAX packages from the Downloads page of the official website.

Figure A.2. The ASP.NET AJAX Extensions installer

Figure A.3. Templates installed by the ASP.NET AJAX installers

Figure A.4. The ASP.NET AJAX controls added to the Visual Studio Toolbox

Figure A.5. The ASP.NET AJAX CTP Installer.

Figure A.6. The ASP.NET Futures CTP controls added to the Visual Studio Toolbox

Figure A.7. The Ajax Control Toolkit homepage at CodePlex

Figure A.8. The Ajax Control Toolkit’s sample website

Figure A.9. The Ajax Control Toolkit’s controls added to the Visual Studio Toolbox

Figure A.10. You can download recent builds of the Ajax Control Toolkit from the CodePlex website.

Figure A.11. CodePlex provides an issue tracker to signal and track bugs found in the Ajax Control Toolkit.

Figure A.12. The AdventureWorks database added to an ASP.NET website

Appendix B. Tools for debugging Ajax applications

Figure B.1. The homepage of the Firebug add-on for Firefox

Figure B.2. Firefox prompts you before installing the Firebug add-on.

Figure B.3. The Firebug tool up and running in Firefox

Figure B.4. The Console window displays the messages logged to the browser’s console

Figure B.5. Firebug lets you inspect the entire DOM tree of a web page.

Figure B.6. The CSS tab lets you inspect the CSS files loaded by the browser.

Figure B.7. With Firebug, you can modify the CSS of a web page and see the results in real time.

Figure B.8. The Script window lets you inspect and debug script files.

Figure B.9. The DOM window lets you inspect client objects and modify their properties in real time.

Figure B.10. You can use the Net window to debug HTTP traffic.

Figure B.11. Web Development Helper appears as an explorer bar at the bottom of the browser.

Figure B.12. Captured HTTP requests made from the browser to the server when the page is initially loaded

Figure B.13. The HTTP Log Viewer splits information about an HTTP transaction into two windows: request information and response information.

Figure B.14. Web Development Helper offers UpdatePanel-sensitive data on the Response Content tab.

Figure B.15. The Script Console divides Web Development Helper into three useful windows: output messages (messages log), immediate window, and commands.

Figure B.16. Web Development Helper offers rich error reporting that includes location and callstack information.

Figure B.17. The DOM Inspector lets you navigate the page’s DOM heirarchy.

Figure B.18. The ViewState Viewer grants us a number of different options for viewing the ViewState on the page.

Figure B.19. Logo of the Fiddler tool for HTTP debugging.

Figure B.20. The Performance Statistics window provides statistics about network times of the HTTP request selected in the left window.

Figure B.21. In the Session Inspector window, you can examine the contents of the HTTP messages in various formats.

Figure B.22. The AutoResponder window lets you configure a predefined response for HTTP requests directed to a specific URL.

Figure B.23. With Fiddler, you can build custom HTTP requests and send them to the specified URL. The editor lets you specify the headers as well as the payload of the custom HTTP request.

Figure B.24. To enable debugging with Visual Studio, you have to configure some options in IE.

Figure B.25. In Visual Studio 2005, you can set breakpoints in an ASP.NET page after invoking the debugger.

Figure B.26. The Script Explorer window lets you set breakpoints in script files loaded in the page.

Figure B.27. Entering the Visual Studio debugger using the Sys.Debug.assert method