Optimizing and Extending ASP'NET AJAX

1
Optimizing and ExtendingASP.NET AJAX

• Jeff Prosise
• Cofounder, Wintellect
• www.wintellect.com

2
Agenda

• Optimizing the ASP.NET AJAX Extensions
• Optimizing UpdatePanel
• Customizing UpdatePanel behavior
• Partial-page rendering without UpdatePanel
• Extending the Microsoft AJAX Library
• Building and deriving JavaScript classes
• Implementing rich drag-drop scenarios
• And more

3
UpdatePanel.UpdateMode

• UpdateMode controls when updates occur
• "Always" (default)
• "Conditional"
• Pages with multiple UpdatePanels should set
  UpdateMode"Conditional"
• Call UpdatePanel.Update to update other UPs
• Eliminates unnecessary rendering
• Less code executes on the server
• Less data comes back in the response

4
(No Transcript)
5
UpdatePanel on the Client

• Sys.WebForms.PageRequestManager
• Client-side counterpart to UpdatePanel
• Manages async callbacks used for partial-page
  rendering and performs content updates
• Client-side OM enables advanced UpdatePanel
  customizations
• Prioritizing overlapping updates
• Canceling updates before they occur
• Highlighting updated UpdatePanels

6
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
Cancel the async callback that is currently in
progress
add_
Registers handlers for PageRequestManager events
remove_
Deregisters handlers for PageRequestManager events
7
PageRequestManager Events

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

Event
Description
initializeRequest
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
8
Canceling 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
9
(No Transcript)
10
Updates without UpdatePanels

• UpdatePanel trades ease-of-use for efficiency
• Request includes view state
• Page undergoes a nearly complete lifecycle
• Response size depends on size of UpdatePanel
• Partial rendering can be done without UpdatePanel
• Call back to Web method or page method
• Use JavaScript to update page
• No view state and no lifecycle

11
(No Transcript)
12
Adding OOP to JavaScript

• JavaScript is object-based but not
  object-oriented
• Microsoft AJAX Library adds OOP to JavaScript
• Namespaces
• Classes and iInheritance
• Interfaces and enumerated types
• prototype property forms basis for "classes"
• Type class provides typing and type reflection

13
JavaScript "Classes"
Person function(name) this._name
name Person.prototype get_name
function() return this._name
// Declare other class methods here
14
Using the Person Class
var p new Person('Jeff') // Displays
"Jeff" window.alert(p.get_name())
15
Type Class

• Adds typing and type reflection to JavaScript
• Adds key instance methods to all types
• registerClass, registerInterface
• initializeBase, getBaseType
• getBaseMethod, callBaseMethod, and others
• Implements key "static" type-related methods
• registerNamespace
• isNamespace, isClass, isInterface, and others
• Implemented in MicrosoftAjax.js

16
Registering Namespaces and Classes
Type.registerNamespace('Wintellect')
Wintellect.Person function(name)
this._name name Wintellect.Person.prototype
get_name function() return
this._name Wintellect.Person.registerCla
ss('Wintellect.Person')
17
Using Wintellect.Person
var p new Wintellect.Person('Jeff') //
Displays "Jeff" window.alert(p.get_name()) //
Displays "Wintellect.Person" window.alert(Object.g
etTypeName(p))
18
Deriving from Wintellect.Person
Wintellect.Programmer function(name, language)
Wintellect.Programmer.initializeBase(this,
name) this._language language
Wintellect.Programmer.prototype
get_name function() var name
Wintellect.Programmer.callBaseMethod
(this, 'get_name') return name '
(Programmer)' , get_language
function() return this._language
Wintellect.Programmer.registerClass
('Wintellect.Programmer', Wintellect.Person)
19
Using Wintellect.Programmer
var p new Wintellect.Programmer('Jeff',
'C') // Displays "Jeff (Programmer)" window.ale
rt(p.get_name()) // Displays "C" window.alert(p
.get_language()) // Displays "Wintellect.Program
mer" window.alert(Object.getTypeName(p))
20
AJAX Drag-and-Drop

• PreviewScript.js includes drag-drop types
• _DragDropManager provides core support
• Global instance named DragDropManager
• IDropSource and IDropTarget interfaces define
  signatures for drop-source and drop-target
  classes
• FloatingBehavior provides generic mechanism for
  floating images, DIVs, and other entities

21
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)
22
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)
23
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 source's mouse-down handler
• Call DragDropManager.unregisterDropTarget to
  unregister drop target
• Typically done in drop target's dispose method

24
(No Transcript)
25
Client-Side Data Binding

• PreviewScript.js contains classes that support
  rich client-side data binding
• ItemView and ListView do client-side rendering
• DataSource links data consumers to data service
  and supports 2-way data binding

Sys.Preview.Data
Sys.Preview.UI.Data
DataControl
DataColumn
DataNavigator
DataRow
ItemView
DataTable
ListView
DataView
XSLTView
DataFilter
Other
DataSource
Other
26
ListView and DataSource
ltdiv id"Books"gtlt/divgt ltdiv style"display
none"gt ltdiv id"LayoutTemplate"gt ltul
id"ItemTemplateParent"gt ltli
id"ItemTemplate"gtltspan id"BookTitle"gtlt/spangtlt/li
gt lt/ulgt lt/divgt lt/divgt ltscript
type"text/xml-script"gt ltpage
xmlnsscript"http//schemas.microsoft.com/xml-scr
ipt/2005"gt ltcomponentsgt ltdataSource
id"BooksDataSource" serviceURL"Books.asmx"
autoLoad"true" /gt ltlistView id"Books"
itemTemplateParentElementId"ItemTemplateParent"gt
ltbindingsgt ltbinding
dataContext"BooksDataSource" dataPath"data"
property"data" /gt lt/bindingsgt
ltlayoutTemplategt lttemplate
layoutElement"LayoutTemplate" /gt
lt/layoutTemplategt ltitemTemplategt ...
lt/itemTemplategt lt/listViewgt
lt/componentsgt lt/pagegt lt/scriptgt
27
Data Service
ScriptService public class Books
DataService WebMethod
DataObjectMethod(DataObjectMethodType.Select)
public Book GetTitles() // TODO
Generate and return Book array public
class Book private string _title
DataObjectField(true) public string Title
get return _title set
_title value
28
Enabling Data Binding

• Register JSON converters in Web.config

ltsystem.web.extensionsgt ltscriptinggt
ltwebServicesgt ltjsonSerializationgt
ltconvertersgt ltadd name"DataSetConverter
" type"Microsoft.Web.Preview.Script.Serialization
.Converters.DataSetConverter, ..." /gt
ltadd name"DataRowConverter" type"Microsoft.Web.P
review.Script.Serialization.Converters.DataRowConv
erter, ..." /gt ltadd name"DataTableConve
rter" type"Microsoft.Web.Preview.Script.Serializa
tion.Converters.DataTableConverter, ..." /gt
lt/convertersgt lt/jsonSerializationgt
lt/webServicesgt lt/scriptinggt lt/system.web.extensi
onsgt
29
(No Transcript)
30
VirtualEarthMap

• Custom control that uses mapping and location
  services provided by Virtual Earth
• Features
• Rich, interactive graphic display
• Map, satellite, and hybrid display modes
• Locational (push pin) data binding
• Informational popups
• Originally featured in Atlas CTP (but removed)
• Privately updated and enhanced for RTM

31
(No Transcript)
32
(No Transcript)