ASP.NET AJAX Basics

ASP.NET AJAX Georgi Petrov Telerik, 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

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 Services Browser 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. The

ScriptManager control registers script components to send to

the browser. It also overrides page rendering so that only

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

UpdatePanel 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 browser

when the content of UpdatePanel

controls 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

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

Enumeration

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">  </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