ASP.NET AJAX

Georgi PetrovTelerik, 3/5/2008

Outline

Installing ASP.NET AJAX ASP.NET AJAX Architecture Controls in focus:

ScriptManager UpdatePanel UpdateProgress Timer

ASP.NET AJAX Client Life-Cycle events Client Scripting: JavaScript with ASP.NET

AJAX Debugging Web Services

Installing ASP.NET AJAX

Remove any previously installed versions from Control Panel / Add or Remove Programs

Download the installation package from http://www.asp.net/ajax/

Be sure to have: Any Windows operating system version

(including Windows 2000) that supports the Microsoft .NET Framework version 2.0

The .NET Framework 2.0 or version 3.0 Internet Explorer 5.01 or later

ASP.NET AJAX Architecture

Client Script Library

Controls, Components

Component Model and UI Framework

Base Class Library

Script Core

Browser Compatibility

Client Application ServicesBrowser Integration

ASP.NET AJAX Server Extensions

ASP.NET AJAX Server Controls

App Services Bridge

Web Services Bridge

ASP.NET 2.0

Page, Framework, Server controls

Application Services

Client Framework & Services Server Framework

ScriptManager

A server control that manages partial-page rendering. TheScriptManager control registers script components to send

tothe browser. It also overrides page rendering so that onlyspecified regions of the page are rendered.

Enabling Partial-Page Rendering Using Type System Extensions Registering Custom Script Registering Web Services Using Authentication and Profile Services

from Client Script The ScriptManagerProxy Class

UpdatePanel

Specifies the parts of a Web page that can

participate in partial-page updates. TheUpdatePanel in different scenarios:

Simple Use Nested UpdatePanel Controls

DEMO

DEMO

Some controls are incompatible with UpdatePanel: TreeView, Menu, FileUpload, WebParts, Substitution

UpdatePanel (contd.)

UpdateProgress

Provides visual feedback in the browserwhen the content of UpdatePanelcontrols is updated.

<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> Please wait… </ProgressTemplate> </asp:UpdateProgress>

UpdateProgress (contd.)

Showcase:• Showing the update status

• Showing the update status with STOP button

DEMO

DEMO

Timer

The Timer control performs postbacks at defined

intervals.• Timer control inside UpdatePanel

• Timer control outside UpdatePanel

DEMO

DEMO

<asp:Timer ID="Timer1" runat="server"> </asp:Timer>

Recap

Installing ASP.NET AJAX ASP.NET AJAX Architecture Controls in focus:

ScriptManager UpdatePanel UpdateProgress Timer

ASP.NET AJAX Client Life-Cycle events Client Scripting: JavaScript with ASP.NET

AJAX Debugging Web Services

Client Life-Cycle events The two main Microsoft AJAX Library

classes that raise events during the client lifecycle of a page are the Application and PageRequestManager classes.

The key event for initial requests (GET requests) and synchronous postbacks is the load event of the Application instance. When script in a load event handler runs, all scripts and components have been loaded and are available.

When partial-page rendering with UpdatePanel controls is enabled, the key client events are the events of the PageRequestManager class. These events enable you to handle many common scenarios. These include the ability to cancel postbacks, to give precedence to one postback over another, and to animate UpdatePanel controls when their content is refreshed.

Client Life-Cycle events

Telerik:

Extending JavaScript with ASP.NET AJAX Classes Namespaces Inheritance Enumerations Reflections

Extending JavaScript with ASP.NET AJAX (contd.)

Namespaces, Classes, Inheritance

Extending JavaScript with ASP.NET AJAX (contd.)

Enumeration

Extending JavaScript with ASP.NET AJAX (contd.)

Reflections

Reflection is the ability to examine the structure and components of a program at run time. The APIs that implement reflection are extensions of the Type class. Type.isInterface(type); Type.isNamespace(object);Type.isClass(type);class.inheritsFrom(class);

Debugging

Configuring the Application for Debugging in Web.config

Sys.Debug - Debug Helper Class

Configuring Internet Explorer for Debugging

<configuration> <system.web> <compilation debug="true"> <!-- etc. --> </compilation> </system.web> <configuration>

DEMO

DEMO

Web Services

Simple Web Service

DEMO

Web Service is standardized way of integrating Web-based applications using the XML, SOAP, WSDL and UDDI open standards over an Internet protocol backbone.

Web Services (contd.)

References

http://www.asp.net/AJAX http://forums.asp.net/default.aspx?Gro

upID=34 http://asp.net/AJAX/Documentation/Li

ve/ClientReference/

Q & A session

Thank you!