Transcript Power ASP.NET AJAX Programming Agenda • Partial-page rendering – With UpdatePanel – Without UpdatePanel • PageRequestManager • Drag-and-drop user interfaces • Client-side animations.

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
1
Browser submits HTTP
request to server
2
Server responds with content;
browser renders that content
3
Browser submits async XMLHTTP request to server; UI
remains responsive; page
doesn't flash
Browser
4
XML-HTTP request completes;
JavaScript refreshes portion of
page affected by response
Web Server
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
<asp:ScriptManager ID="ScriptManager1" Runat="server">
<Services>
<asp:ServiceReference Path="ZipCodeService.asmx" />
</Services>
</asp:ScriptManager>
Calling a Web Service
ZipCodeService.GetCityAndState("98052", onCompleted);
.
.
.
function onCompleted (result)
{
window.alert(result);
}
Partial-Page Rendering
Microsoft AJAX Library Scripts
Internet
Explorer
Firefox
MicrosoftAjax.js
15K
Script Core Library
(run-time + framework)
MicrosoftAjaxWebForms.js
7K
Partial-page rendering
MicrosoftAjaxTimer.js
PreviewScript.js
Safari
PreviewGlitz.js
Other
PreviewDragDrop.js
Sys.UI._Timer class
Base Class Library
(controls, XML script, etc.)
UI enhancements
(animation and opacity)
Drag-and-drop
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
Method
Description
get_isInAsyncPostBack
Indicates whether async callback is in progress
getInstance
Returns reference to current PageRequestManager instance
abortPostBack
Cancels async callback that is currently in progress
add_*
Registers handlers for PageRequestManager events
remove_*
Deregisters handlers for PageRequestManager events
PageRequestManager Events
• PageRequestManager fires client-side events
• Hook events on client for advanced customizations
Event
Description
intializeRequest
Fired before async callback commences
beginRequest
Fired when async callback commences
pageLoading
Fired following an async callback (before content is updated)
pageLoaded
Fired following a postback or callback (after content is updated)
endRequest
Fired when async callback completes
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>
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
<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-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
PropertyAnimation
NumberAnimation
InterpolatedAnimation
LengthAnimation
DiscreteAnimation
CompositeAnimation
FadeAnimation
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>
Animations
Discussion