Power ASP.NET AJAX Programming. Agenda Partial-page rendering –With UpdatePanel –Without...
-
Upload
ilene-nicholson -
Category
Documents
-
view
218 -
download
0
Transcript of Power ASP.NET AJAX Programming. Agenda Partial-page rendering –With UpdatePanel –Without...
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);}
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>
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
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>