Satisfy Your Technical Curiosity The ASP.NET AJAX Extensions Jeff Prosise Cofounder, Wintellect

Satisfy Your Technical Curiosity

The ASP.NET AJAX ExtensionsThe ASP.NET AJAX Extensions

Jeff 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-ProgressUpdate-Progress

TimerTimer

DragOverlay-Extender

DragOverlay-ExtenderScriptManagerScriptManager

ScriptManager-Proxy

ScriptManager-Proxy ProfileServiceProfileService

ScriptScriptManagementManagement

Partial-Page Partial-Page RenderingRendering Futures CTPFutures CTP


ScriptManager

Starting point for ASP.NET AJAX pagesWhat does ScriptManager do?

Downloads JavaScript files to clientEnables partial-page rendering using UpdatePanelProvides access to Web services from clientManages callback timeouts and 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>  </Scripts> <Services>  </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"Path" references load script files

"Name" references load script resources"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 pagesLets content pages declare script and service references

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" Runat="server"> <Scripts>  </Scripts> <Services>  </Services></asp:ScriptManagerProxy>


UpdatePanel

Partial-page rendering in a boxClean round trips and flicker-free updates

Leverages client-side PageRequestManagerEnablePartialRendering="true" in ScriptManager

Supports explicitly defined triggersBy default, postbacks from all controls in an UpdatePanel are converted into async callbacksTriggers expand/shrink postback->callback scope

Works in virtually all scenarios


UpdatePanel Schema<asp:ScriptManager ID="ScriptManager1" Runat="server" EnablePartialRendering="true" /> . . .<asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Always|Conditional" ChildrenAsTriggers="true|false"> <Triggers>  </Triggers> <ContentTemplate>  </ContentTemplate></asp:UpdatePanel>


Triggers

AsyncPostBackTriggerConverts postbacks into asynchronous callbacksTypically used to trigger updates when controls outside an UpdatePanel post back and fire eventsIf ChildrenAsTriggers="false", specifies which controls should call back rather than post back

PostBackTriggerAllows controls inside UpdatePanel to post back


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 updatesUse 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>



UpdateProgress

Companion to UpdatePanel controlsDisplays 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>  </ProgressTemplate></asp:UpdateProgress>


UpdateProgress Example

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

Animated GIFAnimated GIF

Display after ½ secondDisplay 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>



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 client-side scriptJavaScript proxy on client enables JavaScript clients to call Web methods on server


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



ASMX Wire FormatPOST /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"}

RequestRequest

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"]

ResponseResponse

JSON-encodedJSON-encodedinputinput

JSON-encodedJSON-encodedoutputoutput


ScriptHandlerFactory

Wraps (replaces) default ASMX handler

Extends ASMX model with "special" URLsJavaScript 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"Normal" ASMX calls

ASMX Extensions

*.asmx/js

*.asmx/methodname

HelperClasses

HelperClasses

Default ASMX handlerDefault 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 AJAXMicrosoft.Web.Script.-Serialization.JavaScriptSerializerSys.Serialization.-JavaScriptSerializer

JSON home page: www.json.org


JSON vs. XMLPoint p = new Point(100, 200);

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

JSONJSON

<?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>

XMLXML


The ScriptMethod Attribute

Optional attribute for script-callable Web methodsOffers 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 serializeMethod returns XML document, so serializeas XML rather than JSONas XML rather than JSON


Page Methods

Script-callable Web methods built into pagesSimpler than writing a full-blown Web service

Do not require service referencesDo not require dedicated ASMX files

Must be public static methodsMust 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



Built-In Web Services

AuthenticationServiceFront end to ASP.NET 2.0 membership serviceUse Sys.Services.AuthenticationService proxy

Global instance of Sys.Services._AuthenticationService

ProfileServiceFront-end to ASP.NET 2.0 profile serviceUse Sys.Services.Profile proxy

Global instance of Sys.Services._ProfileService

Accessed through ScriptHandlerFactory


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


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 propertiesPass 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 propertiesPass null to save all profile properties

Documents

Satisfy Your Technical Curiosity The ASP.NET AJAX Extensions Jeff Prosise Cofounder, Wintellect