SynapseIndia ASP.NET2.0 SynapseIndia ASP.NET2.0 AJAXAJAX

Table of 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

Table of Contents

Table of 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

Table of Contents

What is 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

of options based on keyed-in characters

without refreshing the page.

Google Maps covers the entire planet,

though with varying degrees of granularity.

It offers satellite pictures as well as the

usual abstract map representations.

What is AJAX?

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.

History of AJAX?

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 XMLHttpRequest

object for asynchronous

communication

• JavaScript to bring these

technologies together

AJAX Technology?

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

What is ASP.NET AJAX?

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 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.

Why use ASP.NET AJAX?

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.

The Client and Server pieces of ASP.NET AJAX

The Client and Server pieces of ASP.NET 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 server-

based application services such as authentication and user profile storage

The Client and Server pieces of 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

Installing ASP.NET AJAX

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 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.

AJAX Libraries for ASP.NET

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

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.

AJAX Libraries for ASP.NET

ScriptManager

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.

Script Mangager

Partial Page 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;

}

}

Partial Page Updates –Update Progress Control

ASP.NET AJAX Client Library-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");}

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

Questions / Feedback

Thank You!Thank You!