Power ASP.NET AJAX Programming

AgendaAgenda

• Partial-page rendering– With UpdatePanel– Without UpdatePanel

• PageRequestManager• Drag-and-drop user interfaces• Client-side animations

Partial-Page RenderingPartial-Page Rendering

BrowserBrowser Web ServerWeb Server

Browser submits HTTPrequest to server

1

Server responds with content;browser renders that content

2

Browser submits async XML-HTTP request to server; UIremains responsive; pagedoesn't flash

3

XML-HTTP request completes;JavaScript refreshes portion ofpage affected by response

4

UpdatePanelUpdatePanel

• Partial-page rendering in a box– Automatically converts postbacks into async

callbacks– Automatically updates content using callback

results– Requires no knowledge of JavaScript or

XmlHttpRequest

• High-level abstraction of XmlHttpRequest– Upside: Extremely easy to use, widely applicable– Downside: Less efficient than classic AJAX

• Exemplifies value added by AJAX frameworks

Script-Callable Web ServiceScript-Callable Web Service

[System.Web.Script.Services.ScriptService]public class ZipCodeService : System.Web.Services.WebService{ [System.Web.Services.WebMethod] public string[] GetCityAndState (string zip) { ... }}

Declaring a Service Declaring a Service ReferenceReference<asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services></asp:ScriptManager>

Calling a Web ServiceCalling a Web Service

ZipCodeService.GetCityAndState("98052", onCompleted); . . .function onCompleted (result){ window.alert(result);}

Partial-Page Rendering

Microsoft AJAX Library Microsoft AJAX Library ScriptsScripts

MicrosoftAjaxTimer.jsMicrosoftAjaxTimer.js

MicrosoftAjax-WebForms.js

MicrosoftAjax-WebForms.js

PreviewScript.jsPreviewScript.js

PreviewGlitz.jsPreviewGlitz.js

PreviewDragDrop.jsPreviewDragDrop.js

MicrosoftAjax.jsMicrosoftAjax.js

Partial-page rendering

Base Class Library(controls, XML script, etc.)

UI enhancements(animation and opacity)

Drag-and-drop

Script Core Library(run-time + framework)

15K

7K

Sys.UI._Timer class

InternetExplorer

InternetExplorer

FirefoxFirefox

SafariSafari

OtherOther

MicrosoftAjaxWebForms.jsMicrosoftAjaxWebForms.js

• Partial-page rendering support– Sys.WebForms namespace

• PageRequestManager class– Client-side counterpart to UpdatePanel– Manages async callbacks used for partial-page

rendering and performs content updates using results

– Client-side OM enables advanced UpdatePanel customizations not possible from server side

• _UpdateProgress class

PageRequestManager PageRequestManager MethodsMethods• Provide programmatic control over client-

side PageRequestManager

PageRequestManager PageRequestManager EventsEvents• PageRequestManager fires client-side

events• Hook events on client for advanced

customizations

Canceling Asynchronous Canceling Asynchronous UpdatesUpdates<asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" /> . . .<script type="text/javascript">function cancelUpdate(){ var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack();}</script>

Update Highlighting

PreviewDragDrop.jsPreviewDragDrop.js

• Adds drag-drop support to BCL– Sys.Preview.UI namespace

• _DragDropManager provides core support– Global instance named DragDropManager

• IDropSource and IDropTarget interfaces define signatures for drop-source and drop-target classes

• DragDropList and DraggableListItem provide canned implementation of reorderable lists

• FloatingBehavior provides generic mechanism for floating images, DIVs, and other entities

Floating an ImageFloating an Image

<img id="FloatMe" src="..."> ...<script type="text/javascript">function pageLoad(){ var float = new Sys.Preview.UI.FloatingBehavior ($get('FloatMe')); float.set_handle($get('FloatMe')); float.initialize();}</script>

Drag-and-DropDrag-and-Drop

• PreviewScript.js includes drag-drop types– Sys.Preview.UI namespace

• _DragDropManager provides core support– Global instance named DragDropManager

• IDropSource and IDropTarget interfaces define signatures for drop-source and drop-target classes

• DragDropList and DraggableListItem provide canned implementation of reorderable lists

• FloatingBehavior provides generic mechanism for floating images, DIVs, and other entities

Implementing IDragSourceImplementing IDragSource

Custom.UI.MyDragSourceBehavior = function(element) { Custom.UI.MyDragSourceBehavior.initializeBase(this, [element]); this._mouseDownHandler = Function.createDelegate(this, this.mouseDownHandler); ...}

Custom.UI.MyDragSourceBehavior.prototype = { // IDragSource methods get_dragDataType: function() { ... }, getDragData: function(context) { ... }, get_dragMode: function() { ... }, onDragStart: function() { ... }, onDrag: function() { ... }, onDragEnd: function(canceled) { ... }, // Other methods initialize: function() { ... }, mouseDownHandler: function(ev) { ... }, dispose: function() { ... },}

Custom.UI.MyDragSourceBehavior.registerClass('Custom.UI.MyDragSourceBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDragSource);

Implementing IDropTargetImplementing IDropTarget

Custom.UI.MyDropTargetBehavior = function(element) { Custom.UI.MyDropTargetBehavior.initializeBase(this, [element]); ...} Custom.UI.MyDropTargetBehavior.prototype = { // IDropTarget methods get_dropTargetElement: function() { ... } canDrop: function(dragMode, dataType, data) { ... } drop : function(dragMode, dataType, data) { ... } onDragEnterTarget : function(dragMode, dataType, data) { ... } onDragLeaveTarget : function(dragMode, dataType, data) { ... } onDragInTarget : function(dragMode, dataType, data) { ... }

// Other methods initialize: function() { ... } dispose: function() { ... }}

Custom.UI.MyDropTargetBehavior.registerClass('Custom.UI.MyDropTargetBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);

Using DragDropManagerUsing DragDropManager

• Call DragDropManager.registerDropTarget to register a drop target– Typically done in drop target's initialize method

• Call DragDropManager.startDragDrop to begin a drag-drop operation– Typically done in drag source's mouse-down

handler

• Call DragDropManager.unregisterDropTarget to unregister drop target– Typically done in drop target's dispose method

Drag-and-Drop

PreviewGlitz.jsPreviewGlitz.js

• Adds UI enhancements to BCL– Sys.Preview.UI.Effects namespace

• OpacityBehavior class wraps opacity of elements

• LayoutBehavior class wraps layout (size and pos)

• Animation and derivatives support animations

Property-Animation

Property-Animation

Interpolated-Animation

Interpolated-Animation

Discrete-Animation

Discrete-Animation

Number-Animation

Number-Animation

Length-Animation

Length-Animation

Composite-Animation

Composite-Animation

Fade-Animation

Fade-Animation

Fading In an ImageFading In an Image

<img id="SplashImage" src="..."> ...<script type="text/javascript">function pageLoad(){ var image = new Sys.Preview.UI.Image ($get('SplashImage')); var fade = new Sys.Preview.UI.Effects.FadeAnimation(); fade.set_target(image); fade.set_effect (Sys.Preview.UI.Effects.FadeEffect.FadeIn); fade.set_duration(3); fade.set_fps(20); fade.play();}</script>

Animations

Discussion