The ASP.NET AJAX The ASP.NET AJAX ExtensionsExtensionsJeff ProsiseJeff ProsiseCofounder, WintellectCofounder, Wintellectwww.wintellect.comwww.wintellect.com

Architecture

ASP.NET 2.0

Page Framework & Server Controls

Page Framework & Server Controls

ApplicationServices

ApplicationServices

ASP.NET AJAX Extensions

ServerControls

ServerControls

ASPXASPX ASMXASMX

Application ServicesBridge

Application ServicesBridge

AsynchronousCommunications

AsynchronousCommunications

Server Controls

UpdatePanelUpdatePanel

Update-Progress

Update-Progress

TimerTimer

DragOverlay-Extender

DragOverlay-ExtenderScriptManagerScriptManager

ScriptManager-Proxy

ScriptManager-Proxy ProfileServiceProfileService

ScriptManagement

Partial-Page Rendering Futures CTP

ScriptManager

Starting point for ASP.NET AJAX pages

What does ScriptManager do?Downloads JavaScript files to clientEnables partial-page rendering using UpdatePanelProvides access to Web services via client-side proxiesManages callback timeouts, provides error handling options and infrastructure, and more

Every page requires one ScriptManager!

ScriptManager Schema

<asp:ScriptManager ID="ScriptManager1" Runat="server" EnablePartialRendering="true|false" EnablePageMethods="true|false" AsyncPostBackTimeout="seconds" AsyncPostBackErrorMessage="message" AllowCustomErrorsRedirect="true|false" OnAsyncPostBackError="handler" EnableScriptGlobalization="true|false" EnableScriptLocalization="true|false" ScriptMode="Auto|Inherit|Debug|Release" ScriptPath="path"> <Scripts> <!-- Declare script references here --> </Scripts> <Services> <!-- Declare Web service references here --> </Services></asp:ScriptManager>

Script References

<asp:ScriptManager ID="ScriptManager1" Runat="server"> <Scripts> <asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" /> <asp:ScriptReference Name="PreviewDragDrop.js" Assembly="Microsoft.Web.Preview" /> <asp:ScriptReference Path="~/Scripts/UIMap.js" /> </Scripts></asp:ScriptManager>

"Path" references load script files

"Name" references load script resources

Service References

<asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services></asp:ScriptManager>

ScriptManagerProxy

"Proxy" for ScriptManager controls declared in master pages

Lets content pages declare script and service references

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" Runat="server"> <Scripts> <!-- Declare additional script references here --> </Scripts> <Services> <!-- Declare additional service references here --> </Services></asp:ScriptManagerProxy>

UpdatePanel

Partial-page rendering in a boxClean round trips to server and updatesRequires no knowledge of JavaScript or AJAX

Leverages PageRequestManager class

EnablePartialRendering="true"

Supports explicitly defined triggersPostbacks from controls in UpdatePanel are converted into async callbacksTriggers expand (or shrink) postback->callback scope

UpdatePanel Schema

<asp:ScriptManager ID="ScriptManager1" Runat="server" EnablePartialRendering="true" /> . . .<asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Always|Conditional" ChildrenAsTriggers="true|false"> <Triggers> <!-- Define triggers (if any) here --> </Triggers> <ContentTemplate> <!-- Define content here --> </ContentTemplate></asp:UpdatePanel>

Triggers

AsyncPostBackTriggerConverts postbacks into async callbacksTypically used to trigger updates when controls outside an UpdatePanel post backIf ChildrenAsTriggers="false", can be used to specify which controls inside UpdatePanel should call back rather than post back

PostBackTriggerLets controls inside UpdatePanel post backTypically used to allow certain controls to post back when ChildrenAsTriggers="true"

Triggers Example

<asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="TreeNodeExpanded" /> <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="TreeNodeCollapsed" /> <asp:PostBackTrigger ControlID="Button2" /> </Triggers> <ContentTemplate> ... </ContentTemplate></asp:UpdatePanel>

Periodic Updates

Combine UpdatePanel with Timer control to perform periodic updates

Use Timer control Tick events as triggers

<asp:Timer ID="Timer1" Runat="server" Interval="5000" OnTick="OnTimerTick" /> ...<asp:UpdatePanel UpdateMode="Conditional" ...> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> ...</asp:UpdatePanel>

DemoDemo

UpdateProgress

Companion to UpdatePanel controls

Displays custom template-driven UI for:

Indicating that an async update is in progressCanceling an async update that is in progress

Automatically displayed when update begins or "DisplayAfter" interval elapses

UpdateProgress Schema

<asp:UpdateProgress ID="UpdateProgress1" Runat="server" DisplayAfter="milliseconds" DynamicLayout="true|false" AssociatedUpdatePanelID="UpdatePanelID"> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate></asp:UpdateProgress>

UpdateProgress Example

<asp:UpdateProgress DisplayAfter="500" ...> <ProgressTemplate> <asp:Image ID="ProgressImage" Runat="server" ImageUrl="~/Images/SpinningClock.gif" /> </ProgressTemplate></asp:UpdateProgress>

Animated GIF

Display after ½ second

Canceling an Update

<asp:UpdateProgress DisplayAfter="500" ...> <ProgressTemplate> <b>Working...</b> <asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" /> </ProgressTemplate></asp:UpdateProgress>

<script type="text/javascript">function cancelUpdate(){ var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack();}</script>

DemoDemo

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

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>

<script src="ZipCodeService.asmx/js" type="text/javascript"></script>

<script src="ZipCodeService.asmx/js" type="text/javascript"></script>

Consuming a Web Service

ZipCodeService.GetCityAndState("98052", onCompleted); . . .function onCompleted (result){ window.alert(result);}

Handling Errors

ZipCodeService.GetCityAndState("98052", onCompleted, onFailed); . . .function onCompleted (result, context, methodName){ window.alert(result);}

function onFailed (err, context, methodName){ window.alert(err.get_message());}

DemoDemo

ASMX Wire Format

POST /AtlasRC/ZipCodeService.asmx/GetCityAndState HTTP/1.1Accept: */*Accept-Language: en-usReferer: http://localhost:1997/AtlasRC/ZipCodePage.aspxUA-CPU: x86Accept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 7.0; ...)Host: localhost:1997Content-Length: 15Connection: Keep-AliveCache-Control: no-cache

{"zip":"98052"}

POST /AtlasRC/ZipCodeService.asmx/GetCityAndState HTTP/1.1Accept: */*Accept-Language: en-usReferer: http://localhost:1997/AtlasRC/ZipCodePage.aspxUA-CPU: x86Accept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 7.0; ...)Host: localhost:1997Content-Length: 15Connection: Keep-AliveCache-Control: no-cache

{"zip":"98052"}

Request

HTTP/1.1 200 OKServer: ASP.NET Development Server/8.0.0.0Date: Fri, 29 Dec 2006 21:06:17 GMTX-AspNet-Version: 2.0.50727Cache-Control: private, max-age=0Content-Type: application/json; charset=utf-8Content-Length: 16Connection: Close

["REDMOND","WA"]

HTTP/1.1 200 OKServer: ASP.NET Development Server/8.0.0.0Date: Fri, 29 Dec 2006 21:06:17 GMTX-AspNet-Version: 2.0.50727Cache-Control: private, max-age=0Content-Type: application/json; charset=utf-8Content-Length: 16Connection: Close

["REDMOND","WA"]

Response

JSON-encodedinput

JSON-encodedoutput

ScriptHandlerFactory

Wraps default ASP.NET ASMX handler

Extends ASMX model with "special" URLs

JavaScript proxy generation (*.asmx/js)Calls to Web methods (*.asmx/methodname)

<httpHandlers> <remove verb="*" path="*.asmx" /> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, ..." /></httpHandlers>

ASMX Request Handling

ScriptHandler-Factory

ScriptHandler-Factory

RestClient-ProxyHandler

RestClient-ProxyHandler

RestHandlerRestHandler

WebService-HandlerFactory

WebService-HandlerFactory

*.asmx

"Normal" ASMX calls

ASMX Extensions

*.asmx/js

*.asmx/methodname

HelperClasses

HelperClasses

Default ASMX handler

JSON

JavaScript Object NotationLightweight data interchange formatEasier to read and write than XMLBased on subset of JavaScript

Default interchange format in ASP.NET AJAX

Microsoft.Web.Script.-Serialization.JavaScriptSerializer (server)Sys.Serialization.JavaScriptSerializer (client)

JSON home page: www.json.org

JSON vs. XML

Point p = new Point(100, 200);

{"IsEmpty":false,"X":100,"Y":200}{"IsEmpty":false,"X":100,"Y":200}

JSON

<?xml version="1.0"?><Point xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <X>100</X> <Y>200</Y></Point>

<?xml version="1.0"?><Point xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <X>100</X> <Y>200</Y></Point>

XML

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)

Using ScriptMethod

[System.Web.Script.Services.ScriptService]public class ZipCodeService : System.Web.Services.WebService{ [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod (ResponseFormat=ResponseFormat.Xml)] public XmlDocument GetCityAndState (string zip) { ... }}

Method returns XML document, so serialize asXML rather than JSON

Page Methods

Script-callable Web methods in pages

Simpler than full-blown Web servicesDo not require service referencesDo not require dedicated ASMX files

Must be public static methods

Must be enabled via ScriptManager.-EnablePageMethods (disabled by default)

Called through PageMethods proxy on client

Enabling Page Methods

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" Runat="server" />

var PageMethods = function() { PageMethods.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null;}PageMethods.prototype = { ...}

var PageMethods = function() { PageMethods.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null;}PageMethods.prototype = { ...}

Defining a Page Method

public partial class MyPage : System.Web.UI.Page{ [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ...}

PageMethods.GetCityAndState("98052", onComplete); . . .function onComplete(result){ window.alert(result);}

Calling a Page Method

DemoDemo

Built-In Web Services

AuthenticationServiceFront end to membership serviceSys.Services.AuthenticationService proxy

Global instance of Sys.Services._AuthenticationService

ProfileServiceFront-end to profile serviceSys.Services.Profile proxy

Global instance of Sys.Services._ProfileService

Accessed through ScriptHandlerFactory

Using AuthenticationServiceSys.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());}

Loading Profile Properties

Sys.Services.ProfileService.load(['ScreenName'], onLoadCompleted, onLoadFailed); ...function onLoadCompleted(result, context, methodName){ window.alert(Sys.Services.ProfileService.properties.ScreenName);}

function onLoadFailed(err, context, methodName){ window.alert(err.get_message());}

Pass null to load all profile properties

Saving Profile Properties

Sys.Services.ProfileService.properties.ScreenName = 'Bob';Sys.Services.ProfileService.save(['ScreenName'], onSaveCompleted, onSaveFailed); ...function onSaveCompleted(result, context, methodName){ window.alert('Save succeeded');}

function onSaveFailed(err, context, methodName){ window.alert(err.get_message());}

Pass null to save all profile properties