ASP NET 2 0 AJAX For Richer Dynamic

  • Slides: 70
Download presentation
ASP. NET 2. 0 AJAX For Richer, Dynamic and Responsive Web Applications

ASP. NET 2. 0 AJAX For Richer, Dynamic and Responsive Web Applications

Table of Contents • What is AJAX? • What is ASP. NET 2. 0

Table of Contents • What is AJAX? • What is ASP. NET 2. 0 AJAX? • Why use ASP. NET 2. 0 AJAX? • The Client and Server Pieces of ASP. NETAJAX • Installing ASP. NET AJAX • AJAX Libraries for ASP. NET • Script. Manager • Partial Page Updates Ø Update. Panel Control Ø Update. Progress Control Ø Timer Control August 3, 2007

Table of Contents • ASP. NET AJAX Client Library Ø AJAX Java. Script Extensions

Table of Contents • ASP. NET AJAX Client Library Ø AJAX Java. Script Extensions Ø AJAX Base Class Library • ASP. NET AJAX Networking Ø XMLHttp. Request Object Ø Data Communication ü JSON • Calling Web Services from Client Script • Rich AJAX Toolkit Controls & ASP. NET Futures CTP • Server and Client Reference August 3, 2007

What is AJAX? Ajax (asynchronous Java. Script and XML), or AJAX, is a group

What is AJAX? Ajax (asynchronous Java. Script and XML), or AJAX, is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications Google Suggest provides users with a list Google Maps covers the entire planet, of options based on keyed-in characters though with varying degrees of granularity. without refreshing the page. It offers satellite pictures as well as the usual abstract map representations. August 3, 2007

History of AJAX? Jesse James Garrett, co-founder and president of Adaptive Path in 2005,

History of AJAX? Jesse James Garrett, co-founder and president of Adaptive Path in 2005, coined the term Ajax and defined the concepts behind it. Examples • Flickr - A Yahoo! Company Ø Flickr is a photo storage and display program that uses AJAX. • Gmail - Google Ø Gmail is an AJAX powered email system. August 3, 2007

AJAX Technology? It refers specifically to these technologies: • XHTML and CSS for presentation

AJAX Technology? It refers specifically to these technologies: • XHTML and CSS for presentation • The Document Object Model for dynamic display and interaction with data • XML and XSLT for the interchange and manipulation of data, respectively • The XMLHttp. Request object for asynchronous communication • Java. Script to bring these technologies together August 3, 2007

What is ASP. NET AJAX? ASP. NET AJAX is the name of Microsoft’s AJAX

What is ASP. NET AJAX? ASP. NET AJAX is the name of Microsoft’s AJAX solution, and it refers to a set of client and server technologies that focus on improving web development with Visual Studio August 3, 2007

Why use ASP. NET AJAX? ASP. NET AJAX applications offer: • Improved efficiency by

Why use ASP. NET AJAX? ASP. NET AJAX applications offer: • Improved efficiency by performing significant parts of a Web page's processing in the browser. • Familiar UI elements such as progress indicators, tooltips, and pop-up windows. • Partial-page updates that refresh only the parts of the Web page that have changed. • Client integration with ASP. NET application services forms authentication and user profiles. • Integration of data from different sources through calls to Web services. • A framework that simplifies customization of server controls to include client capabilities. • Support for the most popular and generally used browsers, which includes Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari. August 3, 2007

The Client and Server pieces of ASP. NET AJAX ASP. NET is built on

The Client and Server pieces of ASP. NET AJAX ASP. NET is built on top of the Microsoft Internet Information Services (IIS) web server. ASP. NET AJAX builds on top of that and the web services it includes. The Microsoft AJAX Library runs in the browser to manipulate the DOM, communicate asynchronously with the web server, and take advantage of ASP. NET services. August 3, 2007

The Client and Server pieces of ASP. NET AJAX Microsoft AJAX Library It is

The Client and Server pieces of ASP. NET AJAX Microsoft AJAX Library It is a Java. Script library that works on a variety of browsers and serves to simplify Java. Script development. It is a type system and set of class libraries that simplify writing Java. Script to enhance the user experience, manipulate the DOM, and communicate with the web server ASP. NET 2. 0 AJAX Extensions These extensions build on top of the ASP. NET classes and controls and leverage the Microsoft AJAX Library sent to the browser. • They make it easy to quickly take advantage of AJAX technologies by providing a set of server controls. • Through a set of standard web services, ASP. NET AJAX is also able to leverage serverbased application services such as authentication and user profile storage August 3, 2007

Installing ASP. NET AJAX includes • Microsoft ASP. NET 2. 0 AJAX Extensions, which

Installing ASP. NET AJAX includes • Microsoft ASP. NET 2. 0 AJAX Extensions, which is a server framework • The Microsoft AJAX Library, which consists of client script that runs on the browser. To install Microsoft ASP. NET AJAX • Download the ASPAJAXExt. Setup. msi installation package from the ASP. NET AJAX Downloads Web site. • To add the ASP. NET AJAX Control Toolkit, download and install it from ASP. NET AJAX Control Toolkit Web site. If you have Microsoft Visual Studio 2005 installed on your computer, the installation process installs templates for AJAX-enabled Web site projects. It also installs an assembly (AJAXExtension. Toolbox. dll) that extends the Visual Studio toolbox August 3, 2007

AJAX Libraries for ASP. NET Ajax. NET Professional: Michael Schwartz developed Ajax. NET Professional

AJAX Libraries for ASP. NET Ajax. NET Professional: Michael Schwartz developed Ajax. NET Professional as a tool primarily used to simplify the data transport mechanism that enables a client Java. Script routine to communicate with a server program. Anthem. NET: Anthem. NET is a Source. Forge project where users are able to download the sources to the project. It targets ASP. NET 1. 1 and ASP. NET 2. 0. It has a set of server controls that use their underlying Java. Script library to communicate with the server Do. Jo: It is a client-side library for AJAX development without ties to any server technology. Do. Jo has a type system for Java. Script and a function for binding script to events from Java. Script objects or DHTML elements. One of its strengths is rich support for dynamic script loading. August 3, 2007

AJAX Libraries for ASP. NET Prototype: It has a type system for scripting in

AJAX Libraries for ASP. NET Prototype: It has a type system for scripting in a more object-oriented way. Prototype provides networking functionality and a method for automatically updating an HTML element with the results of an HTTP request when given a URL. Script. aculo. us: Script. aculo. us is built on top of the Prototype library. It includes functionality for adding drag-and-drop support to an application. It has a lot of effects code for fading, shrinking, moving, and otherwise animating DOM elements. Script. aculo. us also has a slider control and a library for manipulating lists of elements. Rico: The Rico library also builds on top of the Prototype system. It has support for adding drag-and-drop behavior to browser DOM elements. It also has some controls to bind Java. Script objects to DOM elements for manipulating data. Rico has constructs for revealing and hiding portions of a page using an accordion style. It also has animation, sizing, and fading effects prebuilt for easier use. August 3, 2007

Script. Manager Script Mangager Any AJAX library needs a component or a tool that

Script. Manager Script Mangager Any AJAX library needs a component or a tool that makes some Java. Script code available on the client. This script code represents the client infrastructure necessary for the library to work. AJAX libraries tend to offer a server-side, often parameterless, component that when dropped on the page automatically outputs any required scripts. This component is generally known as the AJAX manager or script manager In addition to ensuring that the proper script is linked to the page, the script manager typically • Enables and supports partial page rendering, • Generates proxy code to call remotely into server-side methods and objects, • Sets up auxiliary services. August 3, 2007

Partial Page Updates Partial rendering divides the page into independent regions, each of which

Partial Page Updates Partial rendering divides the page into independent regions, each of which controls its own postbacks and refreshes without causing or requiring a full page update. This is desirable when only a portion of the page needs to change during a postback. • Partial updates reduce screen flickering and allows to create more interactive Web applications • Partial rendering requires a Script. Manager control in the page. It is essential that the Enable. Partial. Rendering property on the manager be set to true—which is the default case. August 3, 2007

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control The

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control The Update. Panel is a container control without any UI of its own. • Defined in the System. Web. Extensions assembly, it belongs specifically to the System. Web. UI namespace. The control class is declared as follows: public class Update. Panel : Control{ . . . } • The control has a number of properties to control page updates and also exposes a clientside object model. • When a control within the Update. Panel triggers a postback, the Update. Panel intervenes to initiate the postback asynchronously and update just that portion of the page. • At the time the call to the server is made, the name of a Java. Script callback function that will be called is provided, when the response has been received. That callback function will receive the results and update various page controls accordingly. August 3, 2007

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control Partial

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control Partial Page Update is coordinated by the Script. Manager server control and the client Page. Request. Manager class. When partial-page updates are enabled, controls can asynchronously posted to the server. • With an asynchronous postback, page updates are limited to regions of the page that are enclosed in Update. Panel controls and that are marked to be updated. • The server sends HTML markup for only the affected elements to the browser. In the browser, the client Page. Request. Manager class performs Document Object Model (DOM) manipulation to replace existing HTML with updated markup. • The Update. Panel control sends an out-of-band request for fresh markup and then updates the Document Object Model (DOM) tree when the response is ready. August 3, 2007

Partial Page Updates. Update Panel Control -Example Partial Page Updates – Update Panel Control

Partial Page Updates. Update Panel Control -Example Partial Page Updates – Update Panel Control - Example The Example page has two labels and two buttons that can each cause a postback. It simply updates the two labels with the current server time. Button 1 and its label are placed inside an Update. Panel. Actually, they are put in the Content. Template of the Update. Panel. . The other label and button are left outside the Update. Panel <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <script runat="server" language="C#" > protected override void On. Load(Event. Args e) { base. On. Load(e); string the. Time = Date. Time. Now. To. Long. Time. String(); for (int i = 0; i < 3; i++) { the. Time += "<br />" + the. Time; } time 1. Text = the. Time; time 2. Text = the. Time; } </script> August 3, 2007

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control <html

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control <html xmlns="http: //www. w 3. org/1999/xhtml" > <head id="Head 1" runat="server"> <title>Basic Update Panel</title> </head> <body> <form id="form 1" runat="server"> <div> <asp: Script. Manager ID="Script. Manager 1" runat="server"></asp: Script. Manager> <asp: Label runat="server" ID="time 1"></asp: Label><br /> <asp: Update. Panel ID="Update. Panel 1" runat="server"> <Content. Template> <div style="border-style: solid; background-color: gray; "> <asp: Label runat="server" ID="time 2"></asp: Label><br /> <asp: Button ID="Button 1" runat="server" Text="Inside Button" /> </div><br /> </Content. Template> </asp: Update. Panel> <asp: Button ID="Button 2" runat="server" Text="Outside Button" /> </div> </form> </body> </html> August 3, 2007

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control In

Partial Page Updates. Update Panel Control Partial Page Updates – Update Panel Control In the code-behind, both labels are assigned the same time string in the same way. When the page is first requested, the two labels show the same time When the Outside Button is clicked, a postback occurs and the time is updated for both of the labels. When the button inside the Update. Panel is clicked, an asynchronous postback occurs and only the label inside the Update. Panel is updated August 3, 2007

Partial Page Updates. How Update Panel Control is refreshed? Partial Page Updates – How

Partial Page Updates. How Update Panel Control is refreshed? Partial Page Updates – How Update Panel Control is refreshed? The property settings of the Update. Panel control determine when a panel's content is updated during partial-page rendering. If the Update. Mode property is set to Always, the Update. Panel control’s content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside other Update. Panel controls, and postbacks from controls that are not inside Update. Panel controls. August 3, 2007

Partial Page Updates. How Update Panel Control is refreshed? Partial Page Updates – How

Partial Page Updates. How Update Panel Control is refreshed? Partial Page Updates – How Update Panel Control is refreshed? If the Update. Mode property is set to Conditional, the Update. Panel control’s content is updated when one of the following is true: • When the postback is caused by a trigger for that Update. Panel control. • When the Update. Panel control's Update() method is called explicitly. • When the Update. Panel control is nested inside another Update. Panel control and the parent panel is updated. • When the Children. As. Triggers property is set to true and any child control of the Update. Panel control causes a postback. Child controls of nested Update. Panel controls do not cause an update to the outer Update. Panel control unless they are explicitly defined as triggers for the parent panel. If the Children. As. Triggers property is set to false and the Update. Mode property is set to Always, an exception is thrown. The Children. As. Triggers property is intended to be used only when the Update. Mode property is set to Conditional. August 3, 2007

Partial Page Updates –Update Panel Control –Triggering Updates Panel Control – Triggering Updates By

Partial Page Updates –Update Panel Control –Triggering Updates Panel Control – Triggering Updates By default, any postback control inside an Update. Panel control causes an asynchronous postback and refreshes the panel's content. A trigger is a binding that specifies which postback control and event cause a panel to update. When the specified event of the trigger control is raised (for example, a button's Click event), the update panel is refreshed. A trigger's control event is optional. If an event is not specified, the trigger event is the default event of the control. For example, for the Button control, the default event is the Click event. The trigger is defined by using the <asp: Async. Post. Back. Trigger> element inside the <Triggers> element of the Update. Panel control. August 3, 2007

Partial Page Updates –Update Panel Control –Triggering Updates Panel Control – Triggering Updates Update.

Partial Page Updates –Update Panel Control –Triggering Updates Panel Control – Triggering Updates Update. Panels can be nested inside one another. When the outer Update. Panel is refreshed, the inner Update. Panel will also be refreshed. when the inner Update. Panel is updated, the outer Update. Panel is not affected. Even when the outer Update. Panel has Children. As. Triggers set to true, an asynchronous update of the inner Update. Panel will not cause the outer Update. Panel to be refreshed. To have controls in a contained Update. Panel cause a refresh, they have to be set explicitly as triggers on the outer Update. Panel. August 3, 2007

Partial Page Updates –Update Panel Control –Triggering Updates Example Panel Control – Triggering Updates

Partial Page Updates –Update Panel Control –Triggering Updates Example Panel Control – Triggering Updates - Example <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>Refreshing Update Panel through triggers</title> </head> <body> <form id="form 1" runat="server"> <div> <asp: Button ID="Button 1" Text="Refresh Panel" runat="server" /> <asp: Script. Manager ID="Script. Manager 1" runat="server" /> <asp: Update. Panel ID="Update. Panel 1" Update. Mode="Conditional" runat="server"> <Triggers> <asp: Async. Post. Back. Trigger Control. ID="Button 1" /> </Triggers> <Content. Template> <fieldset> <legend>Update. Panel content</legend> <%=Date. Time. Now. To. String() %> </fieldset> </Content. Template> </asp: Update. Panel> </div> </form> </body> </html> August 3, 2007

Partial Page Updates –Update Panel Control with User Controls The Script. Manager control will

Partial Page Updates –Update Panel Control with User Controls The Script. Manager control will manage partial-page updates for Update. Panel controls that are directly on the ASP. NET Web page or inside a user control on the page. The user controls inside an update panel will be refreshed when the contents of the update panel are updated. It is valid to put an Update. Panel control inside a user control so that the user control supports partial-page updates. However, in that case, page developers who add the user control to a page must explicitly add a Script. Manager control in the host Web page. August 3, 2007

Partial Page Updates –Update Panel Control with User Controls protected void Convert. Button_Click(object sender,

Partial Page Updates –Update Panel Control with User Controls protected void Convert. Button_Click(object sender, Event. Args e) Web. User. Control. ascx which performs { double a = 1. 8 * temperature conversion from Celsuis to double. Parse(Cel. Text) + 32; Fahrenheit. Fah. Text = a. To. String(); • Drag and drop a Update. Panel Control } and place the textbox and button Create a User. Control named controls inside it • Add a button event handler to perform the temperature conversion Create a Web Page ‘Update. User. Control. aspx’ • Place a Script. Manager Control in the page. • Drap and drop the user control into it. • Run the Page. August 3, 2007

Partial Page Updates. The Partial Page Update Life Cycle Partial Page Updates –The Partial

Partial Page Updates. The Partial Page Update Life Cycle Partial Page Updates –The Partial Page Update Life Cycle The page execution Lifecycle is not altered by the partial rendering feature. The Script. Manager participates in the lifecycle to facilitate the partial page updates. It coordinates gathering the renderings from the Update. Panels that need to be refreshed during an asynchronous post and carrying the hidden fields necessary to make the following post function correctly. Controls that modify the View. State, even if they are not in the Update. Panel being affected, do not have to take any special action to ensure the change is available in subsequent requests. Event validation, cross page posting, and ASP. NET’s ability to maintain the scroll position all continue to work when using the Update. Panel. August 3, 2007

Partial Page Updates. The Update Panel Caution and Complexities Partial Page Updates –The Update

Partial Page Updates. The Update Panel Caution and Complexities Partial Page Updates –The Update Panel Cautions and Complexities Complex controls that make heavy use of dynamically registered script won’t work correctly until they are updated to switch from using the Client. Script. Manager of ASP. NET 2. 0 to using the Script. Manager included with ASP. NET AJAX. The ASP. NET Menu and Tree. View controls are not fully compatible with the Update. Panel in the 1. 0 release. The validation controls also register script in a way that is incompatible with the Update. Panel. (Disable the client script for the validator controls and then use them in an Update. Panel) Web Parts August 3, 2007

Partial Page Updates. The Update Panel Caution and Complexities Partial Page Updates –The Update

Partial Page Updates. The Update Panel Caution and Complexities Partial Page Updates –The Update Panel Cautions and Complexities The Grid. View and Details. View controls already have a feature for using client callbacks to paging and sorting. It is not enabled by default, but if the feature is enabled, these controls cannot be used inside an Update. Panel. The File. Upload control also can’t submit files as part of an asynchronous postback The asp: substitution control The way the Script. Manager extracts the contents needed for the partial page updates in the 1. 0 release, calling Response. Write during the execution of an asynchronous postback will result in an error Login, Password. Recovery, Change. Password, and Create. User. Wizard controls whose contents have not been converted to editable templates. August 3, 2007

Partial Page Updates –Update Progress Control Microsoft created the Update. Progress control to make

Partial Page Updates –Update Progress Control Microsoft created the Update. Progress control to make it easy to provide visual feedback to the user to indicate that the update is being processed. This is something like a “busy” hourglass cursor in Windows applications. using System; using System. Web. UI; public partial class Update. Progress : System. Web. UI. Page { protected override void On. Load(Event. Args e) { System. Threading. Thread. Sleep(4000); base. On. Load(e); string the. Time = Date. Time. Now. To. Long. Time. String(); for(int i = 0; i < 3; i++) { the. Time += "<br />" + the. Time; } time 1. Text = the. Time; } } August 3, 2007

Partial Page Updates –Update Progress Control <html xmlns="http: //www. w 3. org/1999/xhtml" > <head

Partial Page Updates –Update Progress Control <html xmlns="http: //www. w 3. org/1999/xhtml" > <head id="Head 1" runat="server"> <title>Update Progress</title> </head> <body> <form id="form 1" runat="server"> <div> <asp: Script. Manager ID="Script. Manager 1" runat="server"></asp: Script. Manager> Some page content<br /> <asp: Update. Progress ID="Update. Progress 1" runat="server" Dynamic. Layout="true" Associated. Update. Panel. ID="Update. Panel 1" > <Progress. Template> Processing… </Progress. Template> </asp: Update. Progress> More page content <asp: Update. Panel ID="Update. Panel 1" runat="server" Update. Mode="Conditional"> <Content. Template> <div style="border-style: solid; background-color: gray; "> <asp: Button ID="Button 1" runat="server" Text="Update" /> <asp: Label runat="server" ID="time 1"></asp: Label> </div> </Content. Template> </asp: Update. Panel><br /> </div> </form> </body> </html> August 3, 2007

Partial Page Updates –Update Progress Control August 3, 2007

Partial Page Updates –Update Progress Control August 3, 2007

Partial Page Updates. Timer Control Partial Page Updates –Timer Control ASP. NET Ajax introduces

Partial Page Updates. Timer Control Partial Page Updates –Timer Control ASP. NET Ajax introduces the Timer. Control which performs postbacks at defined intervals. Use the Timer control when the following is required: • Periodically update the contents of one or more Update. Panel controls without refreshing the whole Web page. • Run code on the server every time that a Timer control causes a postback. • Synchronously post the whole Web page to the Web server at defined intervals. The Timer control is a server control that embeds a Java. Script component into the Web page. The Java. Script component initiates the postback from the browser when the interval that is defined in the Interval property has elapsed. When a postback was initiated by the Timer control, the Timer control raises the Tick event on the server. An event handler for the Tick event can be created to perform actions when the page is posted to the server. August 3, 2007

Partial Page Updates. Timer Control Partial Page Updates –Timer Control Using Timer. Control with

Partial Page Updates. Timer Control Partial Page Updates –Timer Control Using Timer. Control with Update. Panel to update the time on a page every five seconds <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>Clock</title> </head> <body> <form id="form 1" runat="server"> <asp: Script. Manager runat="server" ID="SM 1" /> <div> <asp: Timer. Control runat="server" ID="Time" Interval="5000" Enabled="true" /> <asp: Update. Panel runat="server" ID="Time. Panel"> <Triggers> <asp: Async. Post. Back. Trigger Control. ID="Time" Event. Name="Tick" /> </Triggers> <Content. Template> <%= Date. Time. Now. To. Long. Time. String() %> </Content. Template> </asp: Update. Panel> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library The AJAX Library brings concepts from the. NET Framework

ASP. NET AJAX Client Library The AJAX Library brings concepts from the. NET Framework to Java. Script running in the browser, making the server and client coding models a bit more consistent The AJAX Library has also added a client-side page lifecycle, similar in concept to the ASP. NET server-side page lifecycle. This addition makes it easy to participate in the processing of the page, work with partial page rendering, and provide event handlers for user actions. ASP. NET AJAX Library establishes a page lifecycle for Java. Script code running in the browser • The Browser Page Lifecycle Ø The page. Load and page. Unload functions are the primary points to interact with the browser page lifecycle. ü The page. Load function is automatically called after the page is initially retrieved from the web server and some script processing has occurred. ü The page. Unload function is then called whenever a subsequent request is initiated (for postback, partial page rendering, or even when navigating to a different application). ü When the page is loaded again, even during partial rendering, the page. Load function will again be triggered. August 3, 2007

ASP. NET AJAX Client Library <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server">

ASP. NET AJAX Client Library <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>Browser Life Cycle</title> <script type="text/javascript"> function page. Load(sender, args) { alert("hello"); } function page. Unload(sender, args) { alert("goodbye"); } </script> </head> <body> <form id="form 1" runat="server"> <asp: Script. Manager runat="server" ID="sm" /> <div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library – Type System The Microsoft AJAX Library adds a

ASP. NET AJAX Client Library – Type System The Microsoft AJAX Library adds a type system and extensions to Java. Script objects in order to provide • Namespaces • Inheritance • Interfaces • Enumerations • Reflection • Helpers for strings and arrays. They enable to write ASP. NET AJAX applications in a structured way that improves maintainability, makes it easier to add features, and makes it easier to layer functionality. The AJAX Library brings classic OOP concepts to Java. Script. It adds namespace support for grouping functionality. It also provides helpful debugging facilities, a schema for providing type information, and a means for localizing string and image resources. August 3, 2007

ASP. NET AJAX Client Library – Type System: Namespaces System : Namespaces The AJAX

ASP. NET AJAX Client Library – Type System: Namespaces System : Namespaces The AJAX Library synthesizes namespaces by creating objects with those names. Class definitions can be organized logically in just the same way that is organized using C# or VB. NET. If separate files are created for different namespaces, it is possible load them conditionally the same way the Common Language Runtime loads just the assemblies it needs for an application and does so on demand August 3, 2007

ASP. NET AJAX Client Library – Type System: Namespaces System : Namespaces <html xmlns="http:

ASP. NET AJAX Client Library – Type System: Namespaces System : Namespaces <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>ASP. NET AJAX Namespaces</title> <script type="text/javascript"> function page. Load(sender, args) { Type. register. Namespace('Wrox. ASPAJAX'); alert(Type. is. Namespace(Wrox. ASPAJAX)); //displays var namespaces = Type. get. Root. Namespaces(); var mystr=""; for(var i = 0, length = namespaces. length; i < length; i++) { mystr=mystr+"n"+namespaces[i]. get. Name(); } alert(mystr); //displays } </script> </head> <body> <form id="form 1" runat="server"> <asp: Script. Manager runat="server" ID="script. Manager 1" /> <div> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library – Type System: Class System : Classes are reference

ASP. NET AJAX Client Library – Type System: Class System : Classes are reference types. All classes in Java. Script derive from object. Classes in ASP. NET AJAX helps to create objects and components that derive from base classes in the Microsoft AJAX Library by using an object-oriented programming model. Classes can have four kinds of members: fields, properties, methods, and events. • Fields and properties are name/value pairs that describe characteristics of an instance of a class. Fields are composed of primitive types and are accessed directly • With properties, the value can be any primitive or reference type and is accessed by get and set accessor methods. In ASP. NET AJAX, the get and set accessors are separate functions, which by convention use the prefix "get_" or "set_" in the function name August 3, 2007

ASP. NET AJAX Client Library – Type System: Class System : Class The AJAX

ASP. NET AJAX Client Library – Type System: Class System : Class The AJAX Library follows the pattern of declaring a function as the class constructor. Java. Script allows you to modify the prototype of the function directly, which is how the AJAX Library creates class members. The class must then be registered so that it can participate in the semantics of the type system • Local members are accessed with a prefix of “this”. • The call to register. Class is on the type being registered. The prototype of the base type in Java. Script has been modified to add type-system support. Once the type is registered, an instance of it can be created and its members called. • The register. Class function actually has three possible parameters: The first one is for the name of the type, the second is for the base type being extended, and the last is to specify any interfaces that the class implements. August 3, 2007

ASP. NET AJAX Client Library -Type System: Class ASP. NET AJAX Client Library –

ASP. NET AJAX Client Library -Type System: Class ASP. NET AJAX Client Library – Type System : Class <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>ASP. NET AJAX Class</title> <script type="text/javascript"> function page. Load(sender, args) { Type. register. Namespace('Wrox. ASPAJAX. Samples'); Wrox. ASPAJAX. Samples. Album = function(title, artist) { this. _title = title; this. _artist = artist; } Wrox. ASPAJAX. Samples. Album. prototype = { get_title: function () { return this. _title; }, get_artist: function() { return this. _artist; } } Wrox. ASPAJAX. Samples. Album. register. Class('Wrox. ASPAJAX. Samples'); var an. Album = new Wrox. ASPAJAX. Samples. Album("Round Room", "Phish "); alert(an. Album. get_title()); } </script> </head> <body> <form id="form 1" runat="server"> <div> <asp: Script. Manager runat="server" ID="sm" /> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library -System Type System: Class-Inheritance ASP. NET AJAX Client Library

ASP. NET AJAX Client Library -System Type System: Class-Inheritance ASP. NET AJAX Client Library – Type : Class - Inheritance: Instead of modifying a type directly, inherit from it and extend it in new members by overriding existing ones In the prototype model, a derived class has full access to the private members of the parent class. To be precise, in Java. Script the notion of private members is not the same as in classic OOP. August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>ASP. NET AJAX Class Inheritance</title> <script type="text/javascript"> function page. Load(sender, args) { Type. register. Namespace('Wrox. ASPAJAX. Samples'); Wrox. ASPAJAX. Samples. Album = function(title, artist) { this. _title = title; this. _artist = artist; } Wrox. ASPAJAX. Samples. Album. prototype = { get_title: function () { return this. _title; }, get_artist: function() { return this. _artist; } } Wrox. ASPAJAX. Samples. Album. register. Class('Wrox. ASPAJAX. Samples'); Wrox. ASPAJAX. Samples. Tribute. Album = function(title, artist, tribute. Artist) { Wrox. ASPAJAX. Samples. Tribute. Album. initialize. Base(this, [title, artist]); this. _tribute. Artist = tribute. Artist; } August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance Wrox. ASPAJAX. Samples. Tribute. Album. prototype = { get_tribute. Artist: function() { return this. _tribute. Artist; }, set_tribute. Artist: function(tribute. Artist) { this. _tribute. Artist = tribute. Artist; } } Wrox. ASPAJAX. Samples. Tribute. Album. register. Class('Wrox. ASPAJAX. Samples. Tribute. Album', Wrox. ASPAJAX. Samples. Album); var another. Album = new Wrox. ASPAJAX. Samples. Tribute. Album("Groove", "Various Artists", "Phish"); var title=another. Album. get_title (); var tributeartist=another. Album. get_tribute. Artist(); alert("Title: "+title+", Tribute. Artist: "+tributeartist); } </script> </head> <body> <form id="form 1" runat="server"> <div> <asp: Script. Manager runat="server" ID="sm" /> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance

ASP. NET AJAX Client Library – Type System: Class-Inheritance System : Class - Inheritance The constructor must explicitly call initialize. Base and pass itself, using the this keyword, along with an array of the arguments to pass to the constructor of the base type. The call to initialize. Base takes care of producing the final type with inheritance semantics in place. The base class constructor is called with the arguments provided. The type system of the AJAX Library also provides some reflection functions to explore the relationship between objects. if (Wrox. ASPAJAX. Samples. Tribute. Album. is. Instance. Of. Type(another. Album) == true) { alert("another. Album is a Tribute. Album"); } if (Wrox. ASPAJAX. Samples. Tribute. Album. inherits. From(Wrox. ASPAJAX. Samples. Album) ==true ) { alert("Tribute. Album inherits from Album"); } August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Interface System : Class - Interfaces

ASP. NET AJAX Client Library – Type System: Class-Interface System : Class - Interfaces are a convenient way to define standard behaviors that other types can implement. An interface is a contract that states that the implementer of the interface must provide all of the functionality specified in the interface. The interface itself is only a specification and has no functionality of its own Interface definitions follow the same pattern as creating classes The function name is the name of the interface. The prototype of the function is modified to add the interface members. The convention in defining interface members is to throw Error. not. Implemented for each member, so any class that implements the interface then needs to override the interface members to provide real implementations or the exception will be thrown. August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Interface System : Class - Interface

ASP. NET AJAX Client Library – Type System: Class-Interface System : Class - Interface <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>ASP. NET AJAX Interface</title> <script type="text/javascript"> function page. Load(sender, args) { Type. register. Namespace('Wrox. ASPAJAX. Samples'); Wrox. ASPAJAX. Samples. IProvide. Track. Info = function() { throw Error. not. Implemented(); } Wrox. ASPAJAX. Samples. IProvide. Track. Info. prototype = { get_track. Count: function() { throw Error. not. Implemented(); } } Wrox. ASPAJAX. Samples. IProvide. Track. Info. register. Interface ('Wrox. ASPAJAX. Samples. IProvide. Track. Info'); } </script> </head> <body> <form id="form 1" runat="server"> <div> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Client Library – Type System: Class-Enumeration System : Class – Enumeration

ASP. NET AJAX Client Library – Type System: Class-Enumeration System : Class – Enumeration The ASP. NET AJAX type system provides for defining enumerations and a specialized version of them used as combinable flags. Enums let you establish a set of possible values function page. Load(sender, args) { Type. register. Namespace('Wrox. ASPAJAX. Samples'); Wrox. ASPAJAX. Samples. Music. Genre = function() { throw Error. invalid. Operation(); } Wrox. ASPAJAX. Samples. Music. Genre. prototype = { Blues: 1, Classical: 2, Electronic: 3, Folk: 4, Industrial: 5, Jazz: 6, New. Age: 7, Hip. Hop: 8, Rock: 9, World. Fusion: 10 } Wrox. ASPAJAX. Samples. Music. Genre. register. Enum ('Wrox. ASPAJAX. Samples. Music. Genre'); var genre = Wrox. ASPAJAX. Samples. Music. Genre. Industrial; alert(Wrox. ASPAJAX. Samples. Music. Genre. to. String( genre)); alert(genre == Wrox. ASPAJAX. Samples. Music. Genre. Industrial); } August 3, 2007

ASP. NET AJAX Client Library. AJAX Base Class Library ASP. NET AJAX Client Library

ASP. NET AJAX Client Library. AJAX Base Class Library ASP. NET AJAX Client Library – AJAX Base Class Library Microsoft ASP. NET AJAX provides features that helps in creating client script and integrate it into ASP. NET applications. This includes extensions to existing ECMAScript (Java. Script) objects to give them the richness of. NET Framework classes The AJAX Library takes a familiar set of features from the Base Class Library of the . NET Framework and brings it to Java. Script in the browser Extensions to Java. Script base types provide additional functionality for these types. • Array Type Extensions • Boolean Type Extensions • Date Type Extensions • Error Type Extensions • Number Type Extensions • Object Type Extensions • String Type Extensions August 3, 2007

ASP. NET AJAX Networking The core of AJAX development is the ability to make

ASP. NET AJAX Networking The core of AJAX development is the ability to make asynchronous web service calls from Java. Script code. Major web browsers have included an XMLHttp. Request object for making HTTP requests. The XMLHttp. Request object is used to perform out-of-band communications with the server for invoking web services, executing callbacks, and performing partial page updates. ASP. NET AJAX provides classes for managing web requests, processing responses, and detecting errors. It also provides support for serializing objects formatted as JSON (Java. Script Object Notation), which makes them readily usable in Java. Script in the browser. • JSON is a standard serial format that is more lightweight than XML. August 3, 2007

ASP. NET AJAX Networking- XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking- XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request Object Remote Scripting: • To minimize the impact of page redraws, primitive forms of scripted remote procedure calls (RPC) appeared around 1997. Microsoft, in particular, pioneered this field with a technology called Remote Scripting (RS). • RS employed a Java applet to pull in data from a remote Active Server Pages (ASP)based URL. The URL exposed a contracted programming interface through a target ASP page and serialized data back and forth through plain strings. On the client, a little Java. Script framework received data and invoked a user-defined callback to update the user interface via Dynamic HTML or similar techniques. RS worked on both Internet Explorer 4. 0 and Netscape Navigator 4. 0 and older versions. Microsoft replaced the Java applet with a Component Object Model (COM) object named XMLHttp. Request and released most of the constraints on the programming interface exposed by the remote URL. August 3, 2007

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request Object Browsers generally place a new request when an HTML form is submitted either via clientside script or through a user action such as a button click. When the response is ready, the browser replaces the old page with the new one The out-of-band call is triggered via script by an HTML page event and is served by a proxy component based on the XMLHttp. Request object The proxy component sends a regular HTTP request and waits, either synchronously or asynchronously, for it to be fully served. When the response data is ready, the proxy invokes a user-defined Java. Script callback to refresh any portion of the page that needs updating. August 3, 2007

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request Object In Mozilla browsers XMLHttp. Request looks like a native Java. Script object and can be instantiated through the classic new operator: var proxy = new XMLHttp. Request(); When the browser is Internet Explorer, the XMLHttp. Request object is instantiated using the Active. XObject wrapper var proxy = new Active. XObject("Microsoft. Xml. Http"); XMLHttp. Request in Internet Explorer 7 var proxy = new XMLHttp. Request(); ASP. NET AJAX Extensions completely encapsulates this object and shields page authors and application designers from it August 3, 2007

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking. XMLHttp. Request Object ASP. NET AJAX Networking – XMLHttp. Request Object The XMLHttp. Request object is designed to perform one key operation: sending an HTTP request. The request can be sent either synchronously or asynchronously. interface XMLHttp. Request { function onreadystatechange; readonly unsigned short ready. State; void open(string method, string url); void open(string method, string url, bool async, string user); void open(string method, string url, bool async, string user, string pswd); void set. Request. Header(string header, string value); void send(string data); void send(Document data); void abort(); string get. All. Response. Headers(); string get. Response. Header(string header); string response. Text; Document response. XML; unsigned short status; string status. Text; }; August 3, 2007

ASP. NET AJAX Networking. XMLHttp. Request Object-Example ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking. XMLHttp. Request Object-Example ASP. NET AJAX Networking – XMLHttp. Request Object - Example (Time. aspx) is a web page that returns the server time to its caller. It takes no parameters and returns a string. <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>Time Page</title> <script runat="server"> protected override void On. Load(Event. Args e) { base. On. Load(e); Response. Write("Server Time: "+Date. Time. Now. To. Universal. Time()); } </script> </head> <body> <form id="form 1" runat="server"> <div> </div> </form> </body> </html> August 3, 2007

ASP. NET AJAX Networking. XMLHttp. Request Object-Example ASP. NET AJAX Networking – XMLHttp. Request

ASP. NET AJAX Networking. XMLHttp. Request Object-Example ASP. NET AJAX Networking – XMLHttp. Request Object - Example <html xmlns="http: //www. w 3. org/1999/xhtml" > <head runat="server"> <title>Networking using XMLHttp. Request. Object</title> <script type="text/javascript"> var xmlhttp; function page. Load() { if(window. Active. XObject) { xmlhttp = new Active. XObject("Msxml 2. XMLHTTP"); } else { xmlhttp = new XMLHttp. Request(); } xmlhttp. open("GET", "Time. aspx", true); xmlhttp. onreadystatechange = ready. State. Changed. Handler; xmlhttp. send(); } function ready. State. Changed. Handler() { if(xmlhttp. ready. State == 4) { alert(xmlhttp. response. Text); } } </script> </head> <body> <form id="form 1" runat="server"> <asp: Script. Manager runat="server“ ID="Script. Manager 1"> </asp: Script. Manager> </form> </body> </html> (Call. Time. aspx) shows basic usage of the XMLHttp. Request object to call the time web page August 3, 2007

ASP. NET AJAX Networking – Data Communications An important part of any type of

ASP. NET AJAX Networking – Data Communications An important part of any type of distributed application is how data is pushed around between tiers or layers of the application With AJAX, the following concepts are important • XML—XML is Extensible Markup Language. It is primarily used for data interchange. • XSLT—XSLT is Extensible Stylesheet Language Transformations. XSLT is designed to take XML data from one format and put it into another format. • JSON—JSON is the Java. Script Object Notation. JSON is a lightweight data interchange format. When tied together with web services, XML and JSON allow for data interchange between different operating systems and also across the Internet. August 3, 2007

ASP. NET AJAX Networking – Data Communication-JSON Communications - JSON is the Java. Script

ASP. NET AJAX Networking – Data Communication-JSON Communications - JSON is the Java. Script Object Notation, and it is a lightweight data interchange format. JSON's chief advantage over XML is that the data may be parsed fairly easily using Java. Script's built-in eval() method. JSON is conceptually similar to arrays and collections in procedural programming languages. JSON is built on the following data structures: • Name/value pairs—This may be called an object, record, structure (struct), Hash. Table, keyed list, or associated array. • List of values—This list of values is referred to an array in most programming languages. August 3, 2007

Web Services & Java. Script Web Services and Java. Script ASP. NET 2. 0

Web Services & Java. Script Web Services and Java. Script ASP. NET 2. 0 AJAX Extensions enables the call to ASP. NET Web services from the browser by using client script. The page can call server-based methods without a postback and without refreshing the whole page, because only data is transferred between the browser and the Web server. Calling a Web service method from script is asynchronous. To get a return value or to determine when the request has returned, provide a succeeded callback function. The callback function is invoked when the request has finished successfully, and it contains the return value (if any) from the Web method call. Provide a failed callback function to handle errors. August 3, 2007

Web Services & Java. Script-Example Web Services and Java. Script - Example using System;

Web Services & Java. Script-Example Web Services and Java. Script - Example using System; using System. Web; using System. Collections; using System. Web. Services; using System. Xml; using System. Web. Services. Protocols; using System. Web. Script. Services; [Web. Service(Namespace = "http: //tempuri. org/")] [Web. Service. Binding(Conforms. To = Wsi. Profiles. Basic. Profile 1_1)] [Script. Service] public class Server. Time : System. Web. Services. Web. Service { [Web. Method] public string Get. Server. Time() { return String. Format("The server time is {0}. ", Date. Time. Now); } } August 3, 2007

Web Services & Java. Script-Example Web Services and Java. Script - Example <html xmlns="http:

Web Services & Java. Script-Example Web Services and Java. Script - Example <html xmlns="http: //www. w 3. org/1999/xhtml"> <head id="Head 1" runat="server"> <style type="text/css"> body { font: 11 pt Trebuchet MS; font-color: #000000; padding-top: 72 px; text-align: center } . text { font: 8 pt Trebuchet MS } </style> <title>Simple Web Service</title> <script type="text/javascript"> // This function calls the Web Service method. function Get. Server. Time() { Server. Time. Get. Server. Time(On. Succeeded); } // This is the callback function that // processes the Web Service return value. function On. Succeeded(result) { var Rslt. Elem = document. get. Element. By. Id("Results"); Rslt. Elem. inner. HTML = result; } </script> </head> <body> <form id="Form 1" runat="server"> <asp: Script. Manager runat="server" ID="script. Manager"> <Services> <asp: Service. Reference path="Server. Time. asmx" /> </Services> </asp: Script. Manager> <div> <h 2>Server Time</h 2> <p>Calling a service that returns the current server time. </p> <input id="Echo. Button" type="button" value="Get. Time" onclick="Get. Server. Time()" /> </div> </form> <hr/> <div> <span id="Results"></span> </div> </body> </html> August 3, 2007

Rich AJAX Tool. Kit Controls Rich AJAX Toolkit Controls The Toolkit is a shared

Rich AJAX Tool. Kit Controls Rich AJAX Toolkit Controls The Toolkit is a shared source project with code contributions from developers from Microsoft and elsewhere. The Toolkit contains some new controls that have AJAX functionality and a lot of control extenders. The control extenders attach to another control to enhance or “extend” the control’s functionality. An extender is basically a server control that emits proper script code—the client behavior—to enhance how a given ASP. NET control behaves on the client August 3, 2007

Server Reference System. Web. Configuration. The System. Web. Configuration namespace contains classes that enable

Server Reference System. Web. Configuration. The System. Web. Configuration namespace contains classes that enable in programmatically accessing configuration elements of Microsoft ASP. NET 2. 0 AJAX Extensions. System. Web. Handlers. The System. Web. Handlers namespace contains HTTP handler classes that process HTTP requests to a Web server. System. Web. Script. Serialization. The System. Web. Script. Serialization namespace contains classes that provide Java. Script Object Notation (JSON) serialization and deserialization for managed types. It also provides extensibility features to customize serialization behavior. August 3, 2007

Server Reference System. Web. Script. Services. The System. Web. Script. Services namespace provides attributes

Server Reference System. Web. Script. Services. The System. Web. Script. Services namespace provides attributes to customize Web service support for using Microsoft ASP. NET 2. 0 AJAX Extensions. System. Web. UIThe System. Web. UI namespace provides classes and interfaces that enable client-server communication and rich UI through the use of the Microsoft ASP. NET 2. 0 AJAX Extensions. System. Web. UI. Design. The System. Web. UI. Design namespace contains classes that can be used to extend design-time support for Microsoft ASP. NET 2. 0 AJAX Extensions. August 3, 2007

Client Reference Global Namespace • Contains members and types that extend base ECMAScript (Java.

Client Reference Global Namespace • Contains members and types that extend base ECMAScript (Java. Script) objects and that provide members that are more familiar to. NET developers. Includes extensions for the Java. Script Array, Boolean, Error, Number, Object, and String types. Sys • Represents the root namespace for the Microsoft AJAX Library, which contains all fundamental classes and base classes. Sys. Net • Contains types related to communication between ASP. NET AJAX client applications and Web services on the server. August 3, 2007

Client Reference Sys. Serialization • Contains types related to data serialization for ASP. NET

Client Reference Sys. Serialization • Contains types related to data serialization for ASP. NET AJAX client applications Sys. Services • Contains types that provide client script access in ASP. NET AJAX to ASP. NET authentication service, profile service, and other application services. Sys. UI • Contains types related to user interface (UI), such as controls, events, and UI properties in the Microsoft AJAX Library. Sys. Web. Forms • Contains types related to partial-page rendering in the Microsoft AJAX Library. August 3, 2007

Course Reference Professional ASP. NET 2. 0 AJAX by Matt Gibbs and Dan Wahlin

Course Reference Professional ASP. NET 2. 0 AJAX by Matt Gibbs and Dan Wahlin Wrox Press © 2007 Introducing Microsoft ASP. NET AJAX by Dino Esposito Microsoft Press © 2007 ASP. NET AJAX Update. Panel Control by Matt Gibbs and Bertrand Le Roy O'Reilly 2006 Beginning Ajax with ASP. NET by Wallace B. Mc. Clure, Scott Cate, Paul Glavich and Craig Shoemaker Wrox Press © 2006 www. asp. net/ajax August 3, 2007

Questions / Feedback Thank You! August 3, 2007

Questions / Feedback Thank You! August 3, 2007