ajax & asp.net 2

Talal A. AlsubaieSaudi Food and Drugs Authority

IT SectorProgrammer

What is AJAX?

Talal Alsubaie, AJAX & ASP.net 2.0 3

What does AJAX stands for?AsynchronousJavaScriptAndXML


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 ConcernsSecurityBrowser CompatibilityAccessibilityThe Back ButtonWhat if JavaScript is Turned Off?

AJAX and the Back ButtonHuge 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 AjaxMicrosoft 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 AjaxNavigate to http://www.asp.netClick on AJAX tab.


Installing AjaxClick on Downloads


Installing AjaxClick Download ASP.NET AJAX v1.0


Installing AjaxNow save the file to you local disk, run the

file, click next until you finish installation.Click Finish Button at the end.


Installing AjaxNow 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 ToolkitThe 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.

The Control Toolkit provides both ready-to-run samples and a powerful SDK to simplify creating custom ASP.NET AJAX controls and extenders.

Make sure you install ASP.NET AJAX 1.0 first!


Installing AJAX ASP.net Control Toolkit


Navigate to http://www.asp.netClick on AJAX tab.


Installing AJAX ASP.net Control ToolkitClick on Downloads


Installing AJAX ASP.net Control ToolkitClick “Download the Control Toolkit.”


Installing AJAX ASP.net Control Toolkit It will take you to the CodePlex site, that is Microsoft open

source tools.Click on download with no source code.

Click on the I Agree Button.


Installing AJAX ASP.net Control ToolkitDownload the “AjaxControlToolkit-NoSource.zip” file.Unzip the file to this location:

“C:\Program Files\Microsoft ASP.NET\”

Open Visual Studio.net 2005, Create a new AJAX-Enabled Website.

Under the “AJAX Extensions” tab right click and select Add tab, and enter it name as “AJAX Toolkit”.

Right click the “AJAX Toolkit” tab and select “Choose Items…”

Under the “.NET Framework Component” click “Brows…”.Select the file “AjaxControlToolkit.dll” located in: “C:\Program Files\Microsoft ASP.NET\AjaxControlToolkit-NoSource\SampleWebSite\Bin”

Click OK.


Installing AJAX ASP.net Control ToolkitYou can see that there are new controls in the “AJAX

Toolkit” tab.You can find more information about AJAX Toolkit at: http://ajax.asp.net/downloads/


ajax & asp.net 2

Technology