Ajax.Net Training.ppt

8/14/2019 Ajax.Net Training.ppt

1/34

Training Programme( Zed-Axis Technologies Pvt. Ltd. )

Introducing the

Advanced Ajax And Ajax.Net

Control Toolkit for Asp.NET

By: Praveen Kumar


2/34

Introduction

Client Server Architecture

AJAX(Asynchronous JavaScript and XML)

AJAX = JAVASCRIPT+HTML+DHTML+DOM+CSS+XML

What is AJAX, and why do we care?

The XmlHttpRequest revolution

Look up at ASP.NET AJAX and Control

Toolkit


3/34

Agenda

Understanding AJAX & XmlHttpRequest

Understanding ASP.NET AJAX

ASP.NET AJAX Architecture

ASP.NET AJAX Client Life-Cycle events

ASP.NET 2.0 AJAX Extensions

ASP.NET AJAX Control Toolkit

Anatomy of Toolkit Component


4/34

Client Server Architecture

Asynchronous JavaScript And

XML = is a web developmenttechnique for creating responsiveweb applications by exchangingsmall amounts of data with theserver behind the scenes


5/34

Overview of AJAX


6/34

Browser Web Server

Browser submits HTTP

request to server1

Server responds with content;

browser renders that content2

Browser submits async XML-

HTTP request to server; UIremains responsive; page

doesn't flash

3

XML-HTTP request completes;

JavaScript refreshes portion of

page affected by response

4


7/34

Time Taken During The DataTransmissionClient Sitting ideal.

Client making request ToJAVASCRIPT Not Server.User may continue to work.

Server Responding toJAVASCRIPT Asynchronous.

JAVASCRIPT updating client.


8/34

XmlHttpRequest

Introduced in 1999 with Internet Explorer 5

ActiveX object supporting callbacks to Web server

Created for benefit of Outlook Web Access (OWA)

Later adopted by Firefox, Safari, and others Implemented as native object rather than ActiveX

Currently being standardized by W3C

http://www.w3.org/TR/XMLHttpRequest/

Supported by approx. 99% of browsers usedtoday

Approx. 85%-95% have JavaScript enabled


9/34

Object Instantiation.

function getobject(){var reqst = false;

try{reqst = new XMLHttpRequest();

}

catch(msnew){try{reqst = new ActiveXObject(Msxml2.XMLHTTP);

}catch(msother){

try {request = new ActiveXObject("Microsoft.XMLHTTP");}

catch (failed) {request = false;}

}}}


10/34

Methods :open(); Sets up a new request to a server.

send(); Send a request on server.readystate; provides current request State.responseText; The text server send back by server.responseXML; The Server generated XML response.

ReadyState : 0:The request is uninitialized (before call open()). 1:The request is set up, but not sent (before call send()). 2:The request was sent and is in process. 3:The request is in process; 4:The response is complete; you can get the server's response and use it. Call Back method is passed to request object by

assigning the onreadystatechange=function()


11/34

Open Method :The request open method takes following Args.

request-type: The type of request to send (Get,Post).

url: The URL to connect to. asynch:Pass here true/false (true if asynch else false).

username:User name, if authentication required;

password:Password, if authentication required.

For Example : -

open(GET,/myserver/abc.aspx?p1= + p1,true);

open(POST,/myserver/abc.aspx,true);

Send Method :

The parameter for send method is the data in case of datasent true post method

send(vname);

Else Pass null

send(null);


12/34

Demo

Create Request

var request = false;try {

request = new XMLHttpRequest();} catch (trymicrosoft) {

try {request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (othermicrosoft) {try { request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {request = false;

} } }

if (!request)alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {var phone = document.getElementById("phone").value;var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);}


13/34

Open Request

function getCustomerInfo(){

var phone = document.getElementById("phone").value;

var url = "/local/lookupCustomer.aspx?phone=" + escape(phone);

request.open("GET", url, true);

}

Set Callback and Send

function getCustomerInfo(){

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

request.open("GET", url, true);

request.onreadystatechange = updatePage;

request.send(null);

}


14/34

When to process Request

function updatePage(){if (request.readyState == 4) {

if (request.status == 200)// Do Request Processing

var xmlDoc = request.responseXML;// if response in XML

var txtDoc = request.responseText;

// if response in Text}else if (request.status == 404)

alert("Request URL does not exist");else

alert("Error: status code is " +request.status);

}

Do processing of call back method when: -Readystate =4;

Status = 200;

Example: --------------------------------------------------------------------------------------------------

function updatePage() {

if (request.readyState == 4) {

if (request.status == 200) {

var xmlDoc = request.responseXML;var showElements = xmlDoc.

getElementsByTagName("show");// The very first element in XML Document

for (var x=0; x


15/34

Important HTTP Status Codes

200 (OK, Request Processed Successfully and Responded.)

301 (Moved Permanently)

302 (Found and Redirected to some other URL)

305 (the request must use a proxy to access the resource requested)

400 (Bad Request) 401 (Unauthorized)

403 (Forbidden)

404 (Not Found)

408 (Request Time Out)

500 (Internal server Errors)

Demo Code

Asynchronous Binding of dropdown control
http://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/Demo.dochttp://localhost/var/www/apps/conversion/tmp/scratch_2/Demo.doc


16/34

ASP.NET AJAX

Framework for building AJAX-enabled Web apps Cross-platform, browser-agnostic Increased productivity, less time to market Highly extensible

Two major components Microsoft AJAX Library (client-side framework) ASP.NET 2.0 AJAX Extensions (server-side framework)

Tightly integrated with ASP.NET 2.0 on server

Familiar UI elements such as progress indicators,tool tips, and pop-up windows.

A framework that simplifies customization ofserver controls to include client capabilities.


17/34

ASP.NET AJAX Architecture

Client Script

Library

Controls,

Components

Component Model

and UI Framework

Base Class Library

Script Core

Browser

Compatibility

ClientApplication

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


18/34

Microsoft AJAX Library

Browsers (IE, Firefox, Safari, others)

Browser Compatibility

Asynchronous Communications

Script Core Library

Base Class Library

XHTML/CSS Server Scripts

Client Server

ASP.NET 2.0

Page

Framework andServer Controls

Application

Services

ASP.NET AJAX Extensions

AJAX

Server ControlsAsynchronous

Communications

Application

Services Bridge

ASPX ASMX

The ASP.NET AJAX Library

JavaScript Framework

Object oriented framework build on JavaScript Provides automatic cross-browser compatibility layer

Built-in classes for WebService calls, Type system, basicDOM operations

Allows structured programming and encapsulation

No more sprinkling JavaScript around your site!


19/34

ASP.NET 2.0 AJAX Extensions Server half of ASP.NET AJAX

Browser-agnostic but not platform-agnostic

Server controls abstract Microsoft AJAX Library ScriptManager, UpdatePanel, and others Emit content that leverages the client-side framework Familiar drag-and-drop design paradigm

Built-in Web services provide bridge to app services ASMX extensions and JSON serializer enable Web services to be called

through JavaScript proxies

UpdatePanel

UpdateProgress

Timer

AutoComplete-

Extender

DragOverlay-

Extender

ScriptManager

ScriptManager-

Proxy

ProfileScript

Script

Management

Partial

Rendering ExtendersService

Wrappers


20/34

ScriptManager- One per page to support AJAX features ScriptManagerProxy - Use when a .master contains a ScriptManager

already UpdatePanel - Allows partial-page updates Timer - Raises event at regular interval UpdateProgress - Send progress messages back to page

ScriptManager is mandatory to available on page

Ajax features Which includes: Include Asp.Net Ajax Client Script Library.

Allow partial page rendering/updating.

Include Java script proxy classes for web services.

Include Java script classes to access ASP.NET authentication and profileapplication services.

To enable partial page update set EnablePartialRendering=true ofScriptManager control.

Only one instance of the ScriptManagercontrol can be added to the page.

Syntax:
http://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_ScriptManager.aspx


21/34

The "crown jewel" of ASP.NET AJAX Adds partial rendering to pages and controls

Automatically converts postbacks into async callbacks Automatically updates content using callback results Requires no knowledge of JavaScript or XmlHttpRequest

High-level abstraction of XmlHttpRequest and AJAX Upside: Extremely easy to use, widely applicable Downside: Not as efficient as hand-coded AJAX

Exemplifies value added by AJAX frameworks A control that causes an asynchronous postback is referred

to as a trigger

.

.


22/34

You write this:

ScriptManager emits this:Oblique reference to script file

Controlling what gets downloaded.


23/34

UpdateProgress Provides visual feedback in the browser

when the content of UpdatePanel controls is updated.

Associate an UpdateProgresscontrol with an UpdatePanelcontrol by setting theAssociatedUpdatePanelIDproperty of

the UpdateProgresscontrol.

Please wait

Timer

The Timer control performs postbacks at defined

intervals.

The Timercontrol performs automated postbacks at defined intervals.

The JavaScript component initiates the postback from the browser when the interval that isdefined in the Intervalproperty has elapsed.

The Intervalproperty is defined in milliseconds and has a default value of 60,000milliseconds, or 60 seconds.

When a postback was initiated by the Timercontrol, the Timercontrol raises the Tickeventon the server.

Used with updatepanel control.
http://localhost/AjaxDoc/mref/T_System_Web_UI_UpdateProgress.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_UpdatePanel.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_UpdateProgress_AssociatedUpdatePanelID.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_UpdateProgress.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_Timer_Interval.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_Timer_Interval.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/E_System_Web_UI_Timer_Tick.aspxhttp://localhost/AjaxDoc/mref/E_System_Web_UI_Timer_Tick.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_Timer_Interval.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_Timer_Interval.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_Timer.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_UpdateProgress.aspxhttp://localhost/AjaxDoc/mref/P_System_Web_UI_UpdateProgress_AssociatedUpdatePanelID.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_UpdatePanel.aspxhttp://localhost/AjaxDoc/mref/T_System_Web_UI_UpdateProgress.aspx


24/34

Client Life-Cycle events The two main Microsoft AJAX Library

classes that raise events during the

client lifecycle of a page are theApplication and PageRequestManagerclasses.

The key event for initial requests(GET requests) and synchronouspostbacks is the load event of theApplication instance. When script in a

load event handler runs, all scriptsand components have been loadedand are available.

When partial-page rendering withUpdatePanel controls is enabled, thekey client events are the events ofthe PageRequestManager class.These events enable you to handlemany common scenarios. Theseinclude the ability to cancelpostbacks, to give precedence to onepostback over another, and toanimate UpdatePanel controls whentheir content is refreshed.


25/34

PageRequestManager Class

The Microsoft AJAX Librarymanages partial-pageupdates in the Browser.

Exposes properties, methods, and events that enablescustomize partial-page updates with client script. Use When Required to control: -

How multiple asynchronous postbacks are processed. Display status messages during asynchronous postbacks and

opportunity to cancel the processing.

Provide custom error-message handling for partial-pageupdates. Access the underlying request and response objects that are

used for the asynchronous postbacks.

initializeRequest Raised before the request is initialized for an asynchronouspostback

beginRequest Raised just before the asynchronous postback is sentto the server

pageLoading Raised after the response to the most recent

asynchronous postback has been received but before

any updates to the page have been made.

pageLoaded Raised after page regions are updated after the most recent postback

endRequest Raised when request processing is finished
http://localhost/AjaxDoc/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerInitializeRequestEvent.aspxhttp://localhost/AjaxDoc/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerInitializeRequestEvent.aspx


26/34

ASP.NET AJAX Control Toolkit

More ASP.NET AJAX server controls, plus SDK for control development

Community-owned, community-driven, shared source

Most of toolkit controls are extender

controls

An extender is a control which extends

the functionality of another control


27/34

Toolkit Controls Overview

AJAX Control Toolkit in the Toolbox How to add it to the Toolbox

Right-click, Add Tab, AJAX Control Toolkit

Right-click, Choose Items,

AjaxControlToolkit.dll First time a control is added, DLL is copied

into Bin folder

Optional: rename TagPrefix to "ajax"

Most of the new controls are Extenders

Set the TargetControlID on the extendercontrol

Set the Extender properties on the targetcontrol

Demo: ConfirmButtonExtender
http://localhost/var/www/apps/conversion/tmp/scratch_2/Links/ControlToolkit.pdfhttp://localhost/var/www/apps/conversion/tmp/scratch_2/Links/ControlToolkit.pdf


28/34

1. Using Update Panel2. Progress Bar Binding with Update Panel

3. Drag a Panel over the screen4. AutoCompleteExtender5. Using ASP.NET AJAX Tab Control

ASP.NET AJAXTechniques & Practices
http://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/UpdPanel/scriptmanager.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/PBar/Progressbar.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/Dragger/pnlDragg1.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/AutoComplete/autoComplete.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/TabControl/tabpanel.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/TabControl/tabpanel.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/TabControl/tabpanel.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/AutoComplete/autoComplete.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/AutoComplete/autoComplete.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/Dragger/pnlDragg1.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/Dragger/pnlDragg1.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/PBar/Progressbar.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/PBar/Progressbar.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/UpdPanel/scriptmanager.pnghttp://localhost/var/www/apps/conversion/tmp/scratch_2/toolControl/UpdPanel/scriptmanager.png


29/34

More about Behaviors and Extenders in ASP.NET AJAX Behaviors

Add or modify functionality to an element on the page

Written in JavaScript

Modify the HTML DOM

Extenders

ASP.NET components

Associate an ASP.NET Control with a Behavior

Leverage Server-Side and Design Time

Creating A Toolkit Component

Two types of components in the Toolkit

Behavior + Extender

ASP.NET AJAX-aware Control (ScriptControl) Which to choose?

If required HTML shape is very specific, write a control and thenattach behaviors to it

If HTML shape is simple or common, write an extender


30/34

Anatomy of a Toolkit Component

The Extender[ClientScript()]

[TargetControlType(typeof(Control))]

public class MyExtender :

ExtenderControlBase

{[ExtenderProperty]

public string MyStringProp{}

[ExtenderProperty]public int MyIntProp{}

}

The BehaviorMyProject.MyBehavior = function(e) {

MyProject.MyBehavior.initializeBase(this, [e]);

this._myStringPropValue = null;

this._myStringIntValue = 0;}

MyProject.MyBehavior.prototype = {

initialize function() { },

get_MyStringProp : function(){},

set_MyStringProp : function(value){},

get_MyIntProp : function(){},

set_MyIntProp : function(value){}

}

The Markup


31/34

Creating an Extender Project

Toolkit package has Visual Studio templatesfor:

Toolkit-enabled website

Toolkit component project

Toolkit Components

VB & C# for each


32/34

Summary / Call to Action

AJAX = Asynchronous JavaScript and XML Better, richer, and more interactive Web apps

ASP.NET AJAX = Framework for AJAXdevelopment

Microsoft AJAX Library (client-side framework) ASP.NET 2.0 AJAX Extensions (server-side

framework)

ASP.NET AJAX is

Compact and well factored (minimal download size) Compatible with a wide range of browsers

Compatible with PHP, ColdFusion, and otherplatforms

ASP.NET AJAX is the future


33/34

Resources

AJAX Wikipedia entry http://en.wikipedia.org/wiki/AJAX

ASP.NET AJAX Web sites http://ajax.asp.net

http://ajax.asp.net/ajaxtoolkit

www.ajaxwebwidgets.com

http://www.asp.net/AJAX

http://forums.asp.net/default.aspx?GroupID=34

http://asp.net/AJAX/Documentation/Live/ClientReference/

Scott Guthrie's blog http://weblogs.asp.net/scottgu/

Lecture Demos/Workshop http://cds.fhcrc.org/download.aspx
http://en.wikipedia.org/wiki/AJAXhttp://ajax.asp.net/http://ajax.asp.net/ajaxtoolkithttp://www.ajaxwebwidgets.com/http://www.asp.net/AJAXhttp://forums.asp.net/default.aspx?GroupID=34http://asp.net/AJAX/Documentation/Live/ClientReference/http://weblogs.asp.net/scottgu/http://weblogs.asp.net/scottgu/http://asp.net/AJAX/Documentation/Live/ClientReference/http://forums.asp.net/default.aspx?GroupID=34http://www.asp.net/AJAXhttp://www.ajaxwebwidgets.com/http://ajax.asp.net/ajaxtoolkithttp://ajax.asp.net/http://en.wikipedia.org/wiki/AJAX


34/34

Thank you!

Ajax.Net Training.ppt

Documents

Transcript of Ajax.Net Training.ppt