1. Satisfy Your Technical Curiosity The ASP.NET AJAX Extensions Jeff Prosise Cofounder, Wintellect www.wintellect.com

2. Satisfy Your Technical Curiosity Architecture ASP.NET 2.0 Page Framework & Server Controls Page Framework & Server Controls Application Services Application Services ASP.NET AJAX Extensions Server Controls Server Controls ASPX ASMX Application Services Bridge Application Services Bridge Asynchronous Communications Asynchronous Communications

3. Satisfy Your Technical Curiosity Server Controls UpdatePanel Update- Progress Update- Progress Timer DragOverlay- Extender DragOverlay- Extender ScriptManager ScriptManager- Proxy ScriptManager- Proxy ProfileService ScriptManagement Partial-Page Rendering Futures CTP

4. Satisfy Your Technical Curiosity 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 from client Manages callback timeouts and provides error handling options and infrastructure and more Every page requires one ScriptManager!

5. Satisfy Your Technical Curiosity 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">

6. Satisfy Your Technical Curiosity Script References <asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" /> <asp:ScriptReference Name="PreviewDragDrop.js" Assembly="Microsoft.Web.Preview" /> "Path" references load script files "Name" references load script resources

7. Satisfy Your Technical Curiosity Service References

8. Satisfy Your Technical Curiosity ScriptManagerProxy "Proxy" for ScriptManager controls declared in master pages Lets content pages declare script and service references

9. Satisfy Your Technical Curiosity UpdatePanel Partial-page rendering in a box Clean round trips and flicker-free updates Leverages client-side PageRequestManager EnablePartialRendering="true" in ScriptManager Supports explicitly defined triggers By default, postbacks from all controls in an UpdatePanel are converted into async callbacks Triggers expand/shrink postback->callback scope Works in virtually all scenarios

10. Satisfy Your Technical Curiosity UpdatePanel Schema <asp:ScriptManager ID="ScriptManager1" Runat="server" EnablePartialRendering="true" />. <asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Always|Conditional" ChildrenAsTriggers="true|false">

11. Satisfy Your Technical Curiosity Triggers AsyncPostBackTrigger Converts postbacks into asynchronous callbacks Typically used to trigger updates when controls outside an UpdatePanel post back and fire events If ChildrenAsTriggers="false", specifies which controls should call back rather than post back PostBackTrigger Allows controls inside UpdatePanel to post back

12. Satisfy Your Technical Curiosity Triggers Example <asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Conditional"> <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="TreeNodeExpanded" /> <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="TreeNodeCollapsed" />...

13. Satisfy Your Technical Curiosity 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" />......

14. Satisfy Your Technical Curiosity

15. 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

16. Satisfy Your Technical Curiosity UpdateProgress Schema <asp:UpdateProgress ID="UpdateProgress1" Runat="server" DisplayAfter="milliseconds" DynamicLayout="true|false" AssociatedUpdatePanelID="UpdatePanelID">

17. Satisfy Your Technical Curiosity UpdateProgress Example <asp:Image ID="ProgressImage" Runat="server" ImageUrl="~/Images/SpinningClock.gif" /> Animated GIF Display after ½ second

18. Satisfy Your Technical Curiosity Canceling an Update Working... <asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" /> function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }

19. Satisfy Your Technical Curiosity

20. 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 script JavaScript proxy on client enables JavaScript clients to call Web methods on server

21. Satisfy Your Technical Curiosity 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) {... }

22. Satisfy Your Technical Curiosity Declaring a Service Reference

23. Satisfy Your Technical Curiosity Consuming a Web Service ZipCodeService.GetCityAndState("98052", onCompleted);. function onCompleted (result) { window.alert(result); }

24. Satisfy Your Technical Curiosity 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()); }

25. Satisfy Your Technical Curiosity

26. ASMX Wire Format POST /AtlasRC/ZipCodeService.asmx/GetCityAndState HTTP/1.1 Accept: */* Accept-Language: en-us Referer: http://localhost:1997/AtlasRC/ZipCodePage.aspx UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0;...) Host: localhost:1997 Content-Length: 15 Connection: Keep-Alive Cache-Control: no-cache {"zip":"98052"} Request HTTP/1.1 200 OK Server: ASP.NET Development Server/8.0.0.0 Date: Fri, 29 Dec 2006 21:06:17 GMT X-AspNet-Version: 2.0.50727 Cache-Control: private, max-age=0 Content-Type: application/json; charset=utf-8 Content-Length: 16 Connection: Close ["REDMOND","WA"] Response JSON-encodedinput JSON-encodedoutput

27. Satisfy Your Technical Curiosity ScriptHandlerFactory Wraps (replaces) default ASMX handler Extends ASMX model with "special" URLs JavaScript proxy generation (*.asmx/js) Calls to Web methods (*.asmx/methodname) <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions,..." />

28. Satisfy Your Technical Curiosity ASMX Request Handling ScriptHandler- Factory ScriptHandler- Factory RestClient- ProxyHandler RestClient- ProxyHandler RestHandler WebService- HandlerFactory WebService- HandlerFactory *.asmx "Normal" ASMX calls ASMX Extensions *.asmx/js *.asmx/methodname Helper Classes Helper Classes Default ASMX handler

29. Satisfy Your Technical Curiosity 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.JavaScriptSerializer Sys.Serialization.-JavaScriptSerializer JSON home page: www.json.org

30. Satisfy Your Technical Curiosity JSON vs. XML Point p = new Point(100, 200); {"IsEmpty":false,"X":100,"Y":200} JSON <Point xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> 100 200 <Point xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> 100 200 XML

31. Satisfy Your Technical Curiosity The ScriptMethod Attribute Optional attribute for script-callable Web methods Offers added control over wire format of calls PropertyDescription UseHttpGetTrue = Use HTTP GET, False = Use HTTP POST (default) ResponseFormatResponseFormat.Xml or ResponseFormat.Json (default) XmlSerializeStringTrue = Serialize everything (including strings) as XML, False = Serialize response strings as JSON (default) (Only valid if ResponseFormat == ResponseFormat.Xml)

32. Satisfy Your Technical Curiosity 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 as XML rather than JSON

33. Satisfy Your Technical Curiosity Page Methods Script-callable Web methods built into pages Simpler than writing a full-blown Web service Do not require service references Do 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

34. Satisfy Your Technical Curiosity 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 = {... }

35. Satisfy Your Technical Curiosity Defining a Page Method public partial class MyPage : System.Web.UI.Page { [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) {... }... }

36. Satisfy Your Technical Curiosity PageMethods.GetCityAndState("98052", onComplete);. function onComplete(result) { window.alert(result); } Calling a Page Method

37. Satisfy Your Technical Curiosity

38. Built-In Web Services AuthenticationService Front end to ASP.NET 2.0 membership service Use Sys.Services.AuthenticationService proxy Global instance of Sys.Services._AuthenticationService ProfileService Front-end to ASP.NET 2.0 profile service Use Sys.Services.Profile proxy Global instance of Sys.Services._ProfileService Accessed through ScriptHandlerFactory

39. Satisfy Your Technical Curiosity 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()); }

40. Satisfy Your Technical Curiosity 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

41. Satisfy Your Technical Curiosity 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

42. Satisfy Your Technical Curiosity