Power ASP.NET AJAX Programming

Agenda Partial-page rendering –With UpdatePanel –Without UpdatePanel PageRequestManager Drag-and-drop user interfaces Client-side animations

Partial-Page Rendering Browser Web Server Browser submits HTTP request to server 1 Server responds with content; browser renders that content 2 Browser submits async XML- HTTP request to server; UI remains responsive; page doesn't flash 3 XML-HTTP request completes; JavaScript refreshes portion of page affected by response 4

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

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

Partial-Page Rendering

Microsoft AJAX Library Scripts MicrosoftAjaxTimer.js MicrosoftAjax- WebForms.js MicrosoftAjax- WebForms.js PreviewScript.js PreviewGlitz.js PreviewDragDrop.js MicrosoftAjax.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 Internet Explorer Internet Explorer Firefox Safari Other

MicrosoftAjaxWebForms.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 Methods Provide programmatic control over client-side PageRequestManager

PageRequestManager Events PageRequestManager fires client-side events Hook events on client for advanced customizations

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

Update Highlighting

PreviewDragDrop.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 Image... function pageLoad() { var float = new Sys.Preview.UI.FloatingBehavior ($get('FloatMe')); float.set_handle($get('FloatMe')); float.initialize(); }

Drag-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 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 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 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.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 Image... 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(); }

Animations

Discussion