Ajax & ASP.NET 2

Talal A. Alsubaie S audi F ood and D rugs A uthority IT Sector Programmer

What is AJAX? Talal Alsubaie, AJAX & ASP.net 2.0

What does AJAX stands for?

A synchronous

J avaScript

A nd

X ML

Talal Alsubaie, AJAX & ASP.net 2.0

What is AJAX ?

AJAX is a development technique for creating interactive web applications.

The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes , so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity , speed , and usability .

What is AJAX ?

It is a technique NOT a technology.

Components:

Cascading Style Sheets (CSS).

Presenting information.

Document Object Model (DOM).

Dynamic display and interaction with information.

XMLHttpRequest.

Retrieving data asynchronously from the web server.

JavaScript.

Binding everything together.

How does it work?

Classic Web Model

Browser interacts directly with Web Server.

Each Request Causes Page Refresh.

Synchronous.

Refresh Looses Place on Page.

How does it work?

Ajax Application Model:

Browser interacts with Ajax Engine.

Ajax Engine communicates with Web Server

Asynchronous

Page manipulated by Ajax Engine (no refresh)

Who Uses AJAX?

Google

Maps, iGoogle & Gmail

Yahoo!

MyYahoo! & Yahoo!Mail (beta)

And Many Others…

AJAX Concerns Talal Alsubaie, AJAX & ASP.net 2.0

Security

Browser Compatibility

Accessibility

The Back Button

What if JavaScript is Turned Off?

AJAX and the Back Button

Huge usability issue.

Returning to the previous state may not be possible when a page is updated dynamically.

Difficult to bookmark on a particular page state.

AJAX Advantages:

Increased Client Interaction

Gives users more of the expected behavior of a client/server application rather than a classic web page

Performance –only a portion of the page is refreshed

Less bandwidth usage.

Platform Independent ( sort of )

Uses the browser, but relies on JavaScript

Installing Ajax

Microsoft first presented AJAX as a project named “ATLAS”( beta ).

The official release has been presented as “ ASP.net AJAX .”

It only supports ASP.net 2.0.

There are some tools used to perform AJAX over ASP.net 1.0 and 1.1.

Installing Ajax

Navigate to http://www.asp.net

Click on AJAX tab .

Installing Ajax

Click on Downloads

Installing Ajax

Click Download ASP.NET AJAX v1.0

Installing Ajax

Now save the file to you local disk, run the file, click next until you finish installation.

Click Finish Button at the end.

Installing Ajax

Now go to visual Studio 2005.

Create a new Web Site.

You can see the ASP.NET AJAX-Enabled Web Site template.

Installing Ajax

You can see in the Web Page the ScriptManager Component.

And there is an AJAX Extensions panel in the toolbox area.

Not that the ScriptManager must be included in every page that is using AJAX.

Developing in AJAX

Open Visual Studio.NET 2005.

Select File -> New -> Website.

Developing in AJAX

Select ASP.net AJAX-Enabled Website.

Click OK after selecting a name for your website and selecting your preferred .NET language.

On the “default.aspx” page, switch to Design mode as shown in figure below:

Developing in AJAX

As we learned before, we must have only one ScriptManager in each page that is using AJAX.

We can put the ScriptManager in a master page and it will apply to all of its child pages.

Updates will occurs in the “ Updatepanel ” component.

A page can have more then one “ Updatepanel ”.

AJAX ASP.net Control Toolkit

The ASP.NET AJAX Control Toolkit is a shared-source community project consisting of samples and components that make it easier to work with AJAX-enabled controls and extenders.