The ASP.NET AJAX Extensions

1
(No Transcript)
2
The ASP.NET AJAX Extensions

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

3
Architecture
ASPX
ASMX
ASP.NET AJAX Extensions
Application Services Bridge
Server Controls
Asynchronous Communications
ASP.NET 2.0
Page Framework Server Controls
Application Services
4
Server Controls
Script Management
Partial-Page Rendering
Futures CTP
UpdatePanel
ScriptManager
DragOverlay- Extender
Update- Progress
ScriptManager- Proxy
ProfileService
Timer
5
ScriptManager

• Starting point for ASP.NET AJAX pages
• What does ScriptManager do?
• Downloads JavaScript files to client
• Enables partial-page rendering using UpdatePanel
• Provides access to Web services via client-side
  proxies
• Manages callback timeouts, provides error
  handling options and infrastructure, and more
• Every page requires one ScriptManager!

6
ScriptManager Schema
ltaspScriptManager ID"ScriptManager1"
Runat"server" EnablePartialRendering"truefals
e" EnablePageMethods"truefalse"
AsyncPostBackTimeout"seconds"
AsyncPostBackErrorMessage"message"
AllowCustomErrorsRedirect"truefalse"
OnAsyncPostBackError"handler"
EnableScriptGlobalization"truefalse"
EnableScriptLocalization"truefalse"
ScriptMode"AutoInheritDebugRelease"
ScriptPath"path"gt ltScriptsgt lt!-- Declare
script references here --gt lt/Scriptsgt
ltServicesgt lt!-- Declare Web service
references here --gt lt/Servicesgt lt/aspScriptMana
gergt
7
Script References
"Name" references load script resources
ltaspScriptManager ID"ScriptManager1"
Runat"server"gt ltScriptsgt
ltaspScriptReference Name"PreviewScript.js"
Assembly"Microsoft.Web.Preview" /gt
ltaspScriptReference Name"PreviewDragDrop.js"
Assembly"Microsoft.Web.Preview" /gt
ltaspScriptReference Path"/Scripts/UIMap.js"
/gt lt/Scriptsgt lt/aspScriptManagergt
"Path" references load script files
8
Service References
ltaspScriptManager ID"ScriptManager1"
Runat"server"gt ltServicesgt
ltaspServiceReference Path"ZipCodeService.asmx"
/gt lt/Servicesgt lt/aspScriptManagergt
9
ScriptManagerProxy

• "Proxy" for ScriptManager controls declared in
  master pages
• Lets content pages declare script and service
  references

ltaspScriptManagerProxy ID"ScriptManagerProxy1"
Runat"server"gt ltScriptsgt lt!-- Declare
additional script references here --gt
lt/Scriptsgt ltServicesgt lt!-- Declare
additional service references here --gt
lt/Servicesgt lt/aspScriptManagerProxygt
10
UpdatePanel

• Partial-page rendering in a box
• Clean round trips to server and updates
• Requires no knowledge of JavaScript or AJAX
• Leverages PageRequestManager class
• EnablePartialRendering"true"
• Supports explicitly defined triggers
• Postbacks from controls in UpdatePanel are
  converted into async callbacks
• Triggers expand (or shrink) postback-gtcallback
  scope

11
UpdatePanel Schema
ltaspScriptManager ID"ScriptManager1"
Runat"server" EnablePartialRendering"true"
/gt . . . ltaspUpdatePanel
ID"UpdatePanel1" Runat"server"
UpdateMode"AlwaysConditional"
ChildrenAsTriggers"truefalse"gt ltTriggersgt
lt!-- Define triggers (if any) here --gt
lt/Triggersgt ltContentTemplategt lt!-- Define
content here --gt lt/ContentTemplategt lt/aspUpdate
Panelgt
12
Triggers

• AsyncPostBackTrigger
• Converts postbacks into async callbacks
• Typically used to trigger updates when controls
  outside an UpdatePanel post back
• If ChildrenAsTriggers"false", can be used to
  specify which controls inside UpdatePanel should
  call back rather than post back
• PostBackTrigger
• Lets controls inside UpdatePanel post back
• Typically used to allow certain controls to post
  back when ChildrenAsTriggers"true"

13
Triggers Example
ltaspUpdatePanel ID"UpdatePanel1"
Runat"server" UpdateMode"Conditional"gt
ltTriggersgt ltaspAsyncPostBackTrigger
ControlID"Button1" /gt ltaspAsyncPostBackTrigg
er ControlID"TreeView1" EventName"TreeNode
Expanded" /gt ltaspAsyncPostBackTrigger
ControlID"TreeView1" EventName"TreeNodeCol
lapsed" /gt ltaspPostBackTrigger
ControlID"Button2" /gt lt/Triggersgt
ltContentTemplategt ... lt/ContentTemplategt lt/a
spUpdatePanelgt
14
Periodic Updates

• Combine UpdatePanel with Timer control to perform
  periodic updates
• Use Timer control Tick events as triggers

ltaspTimer ID"Timer1" Runat"server"
Interval"5000" OnTick"OnTimerTick" /gt
... ltaspUpdatePanel UpdateMode"Conditional"
...gt ltTriggersgt ltaspAsyncPostBackTrigger
ControlID"Timer1" /gt lt/Triggersgt
... lt/aspUpdatePanelgt
15
Demo
16
UpdateProgress

• Companion to UpdatePanel controls
• Displays custom template-driven UI for
• Indicating that an async update is in progress
• Canceling an async update that is in progress
• Automatically displayed when update begins or
  "DisplayAfter" interval elapses

17
UpdateProgress Schema
ltaspUpdateProgress ID"UpdateProgress1"
Runat"server" DisplayAfter"milliseconds"
DynamicLayout"truefalse" AssociatedUpdatePanel
ID"UpdatePanelID"gt ltProgressTemplategt lt!--
Declare UpdateProgress UI here --gt
lt/ProgressTemplategt lt/aspUpdateProgressgt
18
UpdateProgress Example
Display after ½ second
ltaspUpdateProgress DisplayAfter"500" ...gt
ltProgressTemplategt ltaspImage
ID"ProgressImage" Runat"server"
ImageUrl"/Images/SpinningClock.gif" /gt
lt/ProgressTemplategt lt/aspUpdateProgressgt
Animated GIF
19
Canceling an Update
ltaspUpdateProgress DisplayAfter"500" ...gt
ltProgressTemplategt ltbgtWorking...lt/bgt
ltaspButton ID"CancelButton" Runat"server"
Text"Cancel" OnClientClick"cancelUpdate()
return false" /gt lt/ProgressTemplategt lt/aspUpda
teProgressgt ltscript type"text/javascript"gt funct
ion cancelUpdate() var obj
Sys.WebForms.PageRequestManager.getInstance()
if (obj.get_isInAsyncPostBack())
obj.abortPostBack() lt/scriptgt
20
Demo
21
ASP.NET AJAX Web Services

• ASP.NET AJAX supports ASMX Web methods as
  endpoints for asynchronous AJAX callbacks
• Efficient on the wire (no SOAP or XML)
• Efficient on the server (no page lifecycle)
• ScriptService attribute on server indicates Web
  service is callable from script
• JavaScript proxy on client enables JavaScript
  clients to call Web methods

22
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)
...
23
Declaring a Service Reference
ltaspScriptManager ID"ScriptManager1"
Runat"server"gt ltServicesgt
ltaspServiceReference Path"ZipCodeService.asmx"
/gt lt/Servicesgt lt/aspScriptManagergt
24
Consuming a Web Service
ZipCodeService.GetCityAndState("98052",
onCompleted) . . . function onCompleted
(result) window.alert(result)
25
Handling Errors
ZipCodeService.GetCityAndState("98052",
onCompleted, onFailed) . . . function
onCompleted (result, context, methodName)
window.alert(result) function onFailed (err,
context, methodName) window.alert(err.get_me
ssage())
26
Demo
27
ASMX Wire Format
Request
POST /AtlasRC/ZipCodeService.asmx/GetCityAndState
HTTP/1.1 Accept / Accept-Language
en-us Referer http//localhost1997/AtlasRC/ZipCo
dePage.aspx UA-CPU x86 Accept-Encoding gzip,
deflate User-Agent Mozilla/4.0 (compatible MSIE
7.0 ...) Host localhost1997 Content-Length
15 Connection Keep-Alive Cache-Control
no-cache "zip""98052"
Response
HTTP/1.1 200 OK Server ASP.NET Development
Server/8.0.0.0 Date Fri, 29 Dec 2006 210617
GMT X-AspNet-Version 2.0.50727 Cache-Control
private, max-age0 Content-Type
application/json charsetutf-8 Content-Length
16 Connection Close "REDMOND","WA"
JSON-encoded input
JSON-encoded output
28
ScriptHandlerFactory

• Wraps default ASP.NET ASMX handler
• Extends ASMX model with "special" URLs
• JavaScript proxy generation (.asmx/js)
• Calls to Web methods (.asmx/methodname)

lthttpHandlersgt ltremove verb"" path".asmx"
/gt ltadd verb"" path".asmx"
validate"false" type"System.Web.Script.Servi
ces.ScriptHandlerFactory, System.Web.Extension
s, ..." /gt lt/httpHandlersgt
29
ASMX Request Handling
ASMX Extensions
ScriptHandler- Factory
RestClient- ProxyHandler
Helper Classes
.asmx
.asmx/js
RestHandler
.asmx/methodname
"Normal" ASMX calls
WebService- HandlerFactory
Default ASMX handler
30
JSON

• JavaScript Object Notation
• Lightweight data interchange format
• Easier to read and write than XML
• Based on subset of JavaScript
• Default interchange format in ASP.NET AJAX
• Microsoft.Web.Script.-Serialization.JavaScriptSeri
  alizer (server)
• Sys.Serialization.JavaScriptSerializer (client)
• JSON home page www.json.org

31
JSON vs. XML
Point p new Point(100, 200)
32
The ScriptMethod Attribute

• Optional attribute for script-callable Web
  methods
• Offers added control over wire format of calls

Property
Description
UseHttpGet
True Use HTTP GET, False Use HTTP POST
(default)
ResponseFormat
ResponseFormat.Xml or ResponseFormat.Json
(default)
XmlSerializeString
True Serialize everything (including strings)
as XML, False Serialize response strings as
JSON (default) (Only valid if ResponseFormat
ResponseFormat.Xml)
33
Using ScriptMethod
System.Web.Script.Services.ScriptService public
class ZipCodeService System.Web.Services.WebServ
ice System.Web.Services.WebMethod
System.Web.Script.Services.ScriptMethod
(ResponseFormatResponseFormat.Xml) public
XmlDocument GetCityAndState (string zip)
...
Method returns XML document, so serialize as XML
rather than JSON
34
Page Methods

• Script-callable Web methods in pages
• Simpler than full-blown Web services
• Do not require service references
• Do not require dedicated ASMX files
• Must be public static methods
• Must be enabled via ScriptManager.-EnablePageMetho
  ds (disabled by default)
• Called through PageMethods proxy on client

35
Enabling Page Methods
ltaspScriptManager ID"ScriptManager1"
EnablePageMethods"true" Runat"server" /gt
36
Defining a Page Method
public partial class MyPage System.Web.UI.Page
System.Web.Services.WebMethod public
static string GetCityAndState (string zip)
... ...
37
Calling a Page Method
PageMethods.GetCityAndState("98052",
onComplete) . . . function
onComplete(result) window.alert(result)
38
Demo
39
Built-In Web Services

• AuthenticationService
• Front end to membership service
• Sys.Services.AuthenticationService proxy
• Global instance of Sys.Services._AuthenticationSer
  vice
• ProfileService
• Front-end to profile service
• Sys.Services.Profile proxy
• Global instance of Sys.Services._ProfileService
• Accessed through ScriptHandlerFactory

40
Using AuthenticationService
Sys.Services.AuthenticationService.login
(username, password, false, null, null,
onLoginCompleted, onLoginFailed)
... function onLoginCompleted(result, context,
methodName) window.alert(result ? 'Login
succeeded' 'Login failed') function
onLoginFailed(err, context, methodName)
window.alert(err.get_message())
41
Loading Profile Properties
Pass null to load all profile properties
Sys.Services.ProfileService.load('ScreenName',
onLoadCompleted, onLoadFailed)
... function onLoadCompleted(result, context,
methodName) window.alert(Sys.Services.ProfileS
ervice.properties.ScreenName) function
onLoadFailed(err, context, methodName)
window.alert(err.get_message())
42
Saving Profile Properties
Pass null to save all profile properties
Sys.Services.ProfileService.properties.ScreenName
'Bob' Sys.Services.ProfileService.save('Screen
Name', onSaveCompleted, onSaveFailed)
... function onSaveCompleted(result, context,
methodName) window.alert('Save
succeeded') function onSaveFailed(err,
context, methodName) window.alert(err.get_me
ssage())
43
(No Transcript)