SynapseIndia ASP.NET2.0 AJAX
Tableofof Contents Table Contents •
What is AJAX?
•
What is ASP.NET2.0 AJAX?
•
Why use ASP.NET2.0 AJAX?
•
The Client and Server Pieces of ASP.NETAJAX
•
Installing ASP.NET AJAX
•
AJAX Libraries for ASP.NET
•
ScriptManager
•
Partial Page Updates UpdatePanel Control UpdateProgress Control Timer Control
Tableofof Contents Table Contents •
ASP.NET AJAX Client Library AJAX JavaScript Extensions AJAX Base Class Library
•
ASP.NET AJAX Networking XMLHttpRequest Object Data Communication JSON
•
Calling Web Services from Client Script
•
Rich AJAX Toolkit Controls & ASP.NET Futures CTP
•
Server and Client Reference
Whatis is AJAX? What AJAX? Ajax (asynchronous JavaScript 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.
Historyofof AJAX? History 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.
AJAXTechnology? Technology? AJAX 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 XMLHttpRequest object for asynchronous communication
•
JavaScript to bring these technologies together
Whatis is ASP.NET AJAX? What 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
Whyuse use ASP.NET AJAX? Why 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 for 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.
TheClient Client and Server pieces of ASP.NET The and Server pieces of ASP.NET AJAX 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.
TheClient Client and Server pieces of ASP.NET The and Server pieces of ASP.NET AJAX AJAX Microsoft AJAX Library
It is a JavaScript library that works on a variety of browsers and serves to simplify JavaScript development. It is a type system and set of class libraries that simplify writing JavaScript 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
Installing ASP.NET AJAX Installing ASP.NET AJAX 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 ASPAJAXExtSetup.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 (AJAXExtensionToolbox.dll) that extends the Visual Studio toolbox
AJAXLibraries Libraries ASP.NET AJAX forfor 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 JavaScript routine to communicate with a server program.
Anthem.NET: Anthem.NET is a SourceForge 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 JavaScript library to communicate with the server
DoJo: It is a client-side library for AJAX development without ties to any server technology. DoJo has a type system for JavaScript and a function for binding script to events from JavaScript objects or DHTML elements. One of its strengths is rich support for dynamic script loading.
AJAXLibraries Libraries ASP.NET AJAX forfor 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 JavaScript 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.
ScriptManager Script Mangager Any AJAX library needs a component or a tool that makes some JavaScript 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.
PartialPage Page UpdatesUpdate Progress Control Partial Updates –Update Progress Control Microsoft created the UpdateProgress 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 UpdateProgress : System.Web.UI.Page { protected override void OnLoad(EventArgs e) { System.Threading.Thread.Sleep(4000); base.OnLoad(e); string theTime = DateTime.Now.ToLongTimeString(); for(int i = 0; i < 3; i++) {
theTime += "<br />" + theTime;
time1.Text = theTime; } }
}
ASP.NETAJAX AJAXClient Client LibraryType System: Class-Inheritance ASP.NET Library â&#x20AC;&#x201C; Type System : Class - Inheritance The constructor must explicitly call initializeBase 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 initializeBase 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.TributeAlbum.isInstanceOfType(anotherAlbum) == true) {
alert("anotherAlbum is a TributeAlbum");}
if (Wrox.ASPAJAX.Samples.TributeAlbum.inheritsFrom(Wrox.ASPAJAX.Samples.Album) ==true ) {
alert("TributeAlbum inherits from Album");}
Questions / Feedback
Thank You!