Power ASP'NET AJAX Programming

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.WebServ
ice System.Web.Services.WebMethod
public string GetCityAndState (string zip)
...
6
Declaring a Service Reference
ltaspScriptManager ID"ScriptManager1"
Runat"server"gt ltServicesgt
ltaspServiceReference Path"ZipCodeService.asmx"
/gt lt/Servicesgt lt/aspScriptManagergt
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
ltaspButton ID"CancelButton" Runat"server"
Text"Cancel" OnClientClick"cancelUpdate()
return false" /gt . . . ltscript
type"text/javascript"gt function
cancelUpdate() var obj Sys.WebForms.PageRe
questManager.getInstance() if
(obj.get_isInAsyncPostBack())
obj.abortPostBack() lt/scriptgt
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
ltimg id"FloatMe" src"..."gt ... ltscript
type"text/javascript"gt function pageLoad()
var float new Sys.Preview.UI.FloatingBehavior
(get('FloatMe')) float.set_handle(get
('FloatMe')) float.initialize() lt/scriptgt
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.MyDragSourceBeha
vior.initializeBase(this, element)
this._mouseDownHandler Function.createDelegate(t
his, 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.MyDragSo
urceBehavior.registerClass('Custom.UI.MyDragSource
Behavior', Sys.UI.Behavior,
Sys.Preview.UI.IDragSource)
19
Implementing IDropTarget
Custom.UI.MyDropTargetBehavior
function(element) Custom.UI.MyDropTargetBeha
vior.initializeBase(this, element)
... Custom.UI.MyDropTargetBehavior.prototyp
e // 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.MyDropTargetBehavi
or.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
ltimg id"SplashImage" src"..."gt ... ltscript
type"text/javascript"gt 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() lt/scriptgt
24
Animations
25
Discussion