1 / 25

Power ASP.NET AJAX Programming

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 submits HTTP request to server. 1. Browser. Web Server.

tomasso
Download Presentation

Power ASP.NET AJAX Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Power ASP.NET AJAX Programming

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

  3. Partial-Page Rendering Browser submits HTTP request to server 1 Browser Web Server 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

  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

  5. 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) { ... } }

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

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

  8. Partial-Page Rendering

  9. Microsoft AJAX Library Scripts 15K MicrosoftAjax.js Script Core Library (run-time + framework) Internet Explorer 7K MicrosoftAjax- WebForms.js Partial-page rendering Firefox MicrosoftAjaxTimer.js Sys.UI._Timer class PreviewScript.js Base Class Library (controls, XML script, etc.) Safari PreviewGlitz.js UI enhancements (animation and opacity) PreviewDragDrop.js Other Drag-and-drop

  10. 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

  11. PageRequestManager Methods • Provide programmatic control over client-side PageRequestManager

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

  13. Canceling Asynchronous Updates <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>

  14. Update Highlighting

  15. 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

  16. Floating 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>

  17. 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

  18. 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);

  19. 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);

  20. 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

  21. Drag-and-Drop

  22. 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 Interpolated- Animation Discrete- Animation Number- Animation Length- Animation Composite- Animation Fade- Animation

  23. Fading 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>

  24. Animations

  25. Discussion

More Related