2 Asp Dot Net Ajax Extensions


Published on


Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • If no event name is specified in a trigger, the trigger automatically references the control's default event (e.g., Button.Click)
  • One of the "Helper Classes" is WebServiceClientProxyGenerator , which RestClientProxyHandler calls upon to generate JavaScript proxies.
  • ASP.NET AJAX’s JSON serializers provide special handling for one common .NET data type that isn’t handled natively by JSON: System.DateTime . Here’s how System.Web.Script.Serialization.JavaScriptSerializer serializes a date and time representing midnight on January 1, 2000 into JSON: "@946702800000@" The number between @ signs is the number of milliseconds elapsed since January 1, 1970. This is the format used by the ASP.NET AJAX Release Candidate (RC); it will probably be tweaked before RTM.
  • The first null passed to the login function is used to pass custom data. The second null is a redirect URL. If a redirect URL is specified, the user is redirected to that location following a successful login. The third parameter to the login function specifies whether a logged-in user should be issued a temporary auth cookie (false) or a persistent auth cookie (true). In order for all this to work, the application's authentication mode must be set to "Forms."
  • 2 Asp Dot Net Ajax Extensions

    1. 2. The ASP.NET AJAX Extensions Jeff Prosise Cofounder, Wintellect www.wintellect.com
    2. 3. Architecture ASP.NET 2.0 Page Framework & Server Controls Application Services ASP.NET AJAX Extensions Server Controls ASPX ASMX Application Services Bridge Asynchronous Communications
    3. 4. Server Controls UpdatePanel Update- Progress Timer DragOverlay- Extender ScriptManager ScriptManager- Proxy ProfileService Script Management Partial-Page Rendering Futures CTP
    4. 5. ScriptManager <ul><li>Starting point for ASP.NET AJAX pages </li></ul><ul><li>What does ScriptManager do? </li></ul><ul><ul><li>Downloads JavaScript files to client </li></ul></ul><ul><ul><li>Enables partial-page rendering using UpdatePanel </li></ul></ul><ul><ul><li>Provides access to Web services via client-side proxies </li></ul></ul><ul><ul><li>Manages callback timeouts, provides error handling options and infrastructure, and more </li></ul></ul><ul><li>Every page requires one ScriptManager! </li></ul>
    5. 6. ScriptManager Schema <asp:ScriptManager ID=&quot;ScriptManager1&quot; Runat=&quot;server&quot; EnablePartialRendering=&quot;true|false&quot; EnablePageMethods=&quot;true|false&quot; AsyncPostBackTimeout=&quot; seconds &quot; AsyncPostBackErrorMessage=&quot; message &quot; AllowCustomErrorsRedirect=&quot;true|false&quot; OnAsyncPostBackError=&quot; handler &quot; EnableScriptGlobalization=&quot;true|false&quot; EnableScriptLocalization=&quot;true|false&quot; ScriptMode=&quot;Auto|Inherit|Debug|Release&quot; ScriptPath=&quot; path &quot;> <Scripts> <!-- Declare script references here --> </Scripts> <Services> <!-- Declare Web service references here --> </Services> </asp:ScriptManager>
    6. 7. Script References <asp:ScriptManager ID=&quot;ScriptManager1&quot; Runat=&quot;server&quot;> <Scripts> <asp:ScriptReference Name=&quot;PreviewScript.js&quot; Assembly=&quot;Microsoft.Web.Preview&quot; /> <asp:ScriptReference Name=&quot;PreviewDragDrop.js&quot; Assembly=&quot;Microsoft.Web.Preview&quot; /> <asp:ScriptReference Path=&quot;~/Scripts/UIMap.js&quot; /> </Scripts> </asp:ScriptManager> &quot;Path&quot; references load script files &quot;Name&quot; references load script resources
    7. 8. Service References <asp:ScriptManager ID=&quot;ScriptManager1&quot; Runat=&quot;server&quot;> <Services> <asp:ServiceReference Path=&quot;ZipCodeService.asmx&quot; /> </Services> </asp:ScriptManager>
    8. 9. ScriptManagerProxy <ul><li>&quot;Proxy&quot; for ScriptManager controls declared in master pages </li></ul><ul><li>Lets content pages declare script and service references </li></ul><asp:ScriptManagerProxy ID=&quot;ScriptManagerProxy1&quot; Runat=&quot;server&quot;> <Scripts> <!-- Declare additional script references here --> </Scripts> <Services> <!-- Declare additional service references here --> </Services> </asp:ScriptManagerProxy>
    9. 10. UpdatePanel <ul><li>Partial-page rendering in a box </li></ul><ul><ul><li>Clean round trips to server and updates </li></ul></ul><ul><ul><li>Requires no knowledge of JavaScript or AJAX </li></ul></ul><ul><li>Leverages PageRequestManager class </li></ul><ul><ul><li>EnablePartialRendering=&quot;true&quot; </li></ul></ul><ul><li>Supports explicitly defined triggers </li></ul><ul><ul><li>Postbacks from controls in UpdatePanel are converted into async callbacks </li></ul></ul><ul><ul><li>Triggers expand (or shrink) postback->callback scope </li></ul></ul>
    10. 11. UpdatePanel Schema <asp:ScriptManager ID=&quot;ScriptManager1&quot; Runat=&quot;server&quot; EnablePartialRendering=&quot;true&quot; /> . . . <asp:UpdatePanel ID=&quot;UpdatePanel1&quot; Runat=&quot;server&quot; UpdateMode=&quot;Always|Conditional&quot; ChildrenAsTriggers=&quot;true|false&quot;> <Triggers> <!-- Define triggers (if any) here --> </Triggers> <ContentTemplate> <!-- Define content here --> </ContentTemplate> </asp:UpdatePanel>
    11. 12. Triggers <ul><li>AsyncPostBackTrigger </li></ul><ul><ul><li>Converts postbacks into async callbacks </li></ul></ul><ul><ul><li>Typically used to trigger updates when controls outside an UpdatePanel post back </li></ul></ul><ul><ul><li>If ChildrenAsTriggers=&quot;false&quot;, can be used to specify which controls inside UpdatePanel should call back rather than post back </li></ul></ul><ul><li>PostBackTrigger </li></ul><ul><ul><li>Lets controls inside UpdatePanel post back </li></ul></ul><ul><ul><li>Typically used to allow certain controls to post back when ChildrenAsTriggers=&quot;true&quot; </li></ul></ul>
    12. 13. Triggers Example <asp:UpdatePanel ID=&quot;UpdatePanel1&quot; Runat=&quot;server&quot; UpdateMode=&quot;Conditional&quot;> <Triggers> <asp:AsyncPostBackTrigger ControlID=&quot;Button1&quot; /> <asp:AsyncPostBackTrigger ControlID=&quot;TreeView1&quot; EventName=&quot;TreeNodeExpanded&quot; /> <asp:AsyncPostBackTrigger ControlID=&quot;TreeView1&quot; EventName=&quot;TreeNodeCollapsed&quot; /> <asp:PostBackTrigger ControlID=&quot;Button2&quot; /> </Triggers> <ContentTemplate> ... </ContentTemplate> </asp:UpdatePanel>
    13. 14. Periodic Updates <ul><li>Combine UpdatePanel with Timer control to perform periodic updates </li></ul><ul><li>Use Timer control Tick events as triggers </li></ul><asp:Timer ID=&quot;Timer1&quot; Runat=&quot;server&quot; Interval=&quot;5000&quot; OnTick=&quot;OnTimerTick&quot; /> ... <asp:UpdatePanel UpdateMode=&quot;Conditional&quot; ...> <Triggers> <asp:AsyncPostBackTrigger ControlID=&quot;Timer1&quot; /> </Triggers> ... </asp:UpdatePanel>
    14. 15. Demo
    15. 16. UpdateProgress <ul><li>Companion to UpdatePanel controls </li></ul><ul><li>Displays custom template-driven UI for: </li></ul><ul><ul><li>Indicating that an async update is in progress </li></ul></ul><ul><ul><li>Canceling an async update that is in progress </li></ul></ul><ul><li>Automatically displayed when update begins or &quot;DisplayAfter&quot; interval elapses </li></ul>
    16. 17. UpdateProgress Schema <asp:UpdateProgress ID=&quot;UpdateProgress1&quot; Runat=&quot;server&quot; DisplayAfter=&quot; milliseconds &quot; DynamicLayout=&quot;true|false&quot; AssociatedUpdatePanelID=&quot; UpdatePanelID &quot;> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate> </asp:UpdateProgress>
    17. 18. UpdateProgress Example <asp:UpdateProgress DisplayAfter=&quot;500&quot; ...> <ProgressTemplate> <asp:Image ID=&quot;ProgressImage&quot; Runat=&quot;server&quot; ImageUrl=&quot;~/Images/SpinningClock.gif&quot; /> </ProgressTemplate> </asp:UpdateProgress> Animated GIF Display after ½ second
    18. 19. Canceling an Update <asp:UpdateProgress DisplayAfter=&quot;500&quot; ...> <ProgressTemplate> <b>Working...</b> <asp:Button ID=&quot;CancelButton&quot; Runat=&quot;server&quot; Text=&quot;Cancel&quot; OnClientClick=&quot;cancelUpdate(); return false&quot; /> </ProgressTemplate> </asp:UpdateProgress> <script type=&quot;text/javascript&quot;> function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); } </script>
    19. 20. Demo
    20. 21. ASP.NET AJAX Web Services <ul><li>ASP.NET AJAX supports ASMX Web methods as endpoints for asynchronous AJAX callbacks </li></ul><ul><ul><li>Efficient on the wire (no SOAP or XML) </li></ul></ul><ul><ul><li>Efficient on the server (no page lifecycle) </li></ul></ul><ul><li>ScriptService attribute on server indicates Web service is callable from script </li></ul><ul><li>JavaScript proxy on client enables JavaScript clients to call Web methods </li></ul>
    21. 22. 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. 23. Declaring a Service Reference <asp:ScriptManager ID=&quot;ScriptManager1&quot; Runat=&quot;server&quot;> <Services> <asp:ServiceReference Path=&quot;ZipCodeService.asmx&quot; /> </Services> </asp:ScriptManager> <script src=&quot;ZipCodeService.asmx/js&quot; type=&quot;text/javascript&quot;> </script>
    23. 24. Consuming a Web Service ZipCodeService.GetCityAndState(&quot;98052&quot;, onCompleted); . . . function onCompleted (result) { window.alert(result); }
    24. 25. Handling Errors ZipCodeService.GetCityAndState(&quot;98052&quot;, onCompleted, onFailed); . . . function onCompleted (result, context, methodName) { window.alert(result); } function onFailed (err, context, methodName) { window.alert(err.get_message()); }
    25. 26. Demo
    26. 27. 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 {&quot;zip&quot;:&quot;98052&quot;} Request HTTP/1.1 200 OK Server: ASP.NET Development Server/ 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 [&quot;REDMOND&quot;,&quot;WA&quot;] Response JSON-encoded input JSON-encoded output
    27. 28. ScriptHandlerFactory <ul><li>Wraps default ASP.NET ASMX handler </li></ul><ul><li>Extends ASMX model with &quot;special&quot; URLs </li></ul><ul><ul><li>JavaScript proxy generation (*.asmx/js) </li></ul></ul><ul><ul><li>Calls to Web methods (*.asmx/ methodname ) </li></ul></ul><httpHandlers> <remove verb=&quot;*&quot; path=&quot;*.asmx&quot; /> <add verb=&quot;*&quot; path=&quot;*.asmx&quot; validate=&quot;false&quot; type=&quot;System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, ...&quot; /> </httpHandlers>
    28. 29. ASMX Request Handling ScriptHandler- Factory RestClient- ProxyHandler RestHandler WebService- HandlerFactory *.asmx &quot;Normal&quot; ASMX calls ASMX Extensions *.asmx/js *.asmx/ methodname Helper Classes Default ASMX handler
    29. 30. JSON <ul><li>JavaScript Object Notation </li></ul><ul><ul><li>Lightweight data interchange format </li></ul></ul><ul><ul><li>Easier to read and write than XML </li></ul></ul><ul><ul><li>Based on subset of JavaScript </li></ul></ul><ul><li>Default interchange format in ASP.NET AJAX </li></ul><ul><ul><li>Microsoft.Web.Script.-Serialization.JavaScriptSerializer (server) </li></ul></ul><ul><ul><li>Sys.Serialization.JavaScriptSerializer (client) </li></ul></ul><ul><li>JSON home page: www.json.org </li></ul>
    30. 31. JSON vs. XML Point p = new Point(100, 200); {&quot;IsEmpty&quot;:false,&quot;X&quot;:100,&quot;Y&quot;:200} JSON <?xml version=&quot;1.0&quot;?> <Point xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot;> <X>100</X> <Y>200</Y> </Point> XML
    31. 32. The ScriptMethod Attribute <ul><li>Optional attribute for script-callable Web methods </li></ul><ul><li>Offers added control over wire format of calls </li></ul>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)
    32. 33. 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. 34. Page Methods <ul><li>Script-callable Web methods in pages </li></ul><ul><li>Simpler than full-blown Web services </li></ul><ul><ul><li>Do not require service references </li></ul></ul><ul><ul><li>Do not require dedicated ASMX files </li></ul></ul><ul><li>Must be public static methods </li></ul><ul><li>Must be enabled via ScriptManager.-EnablePageMethods (disabled by default) </li></ul><ul><li>Called through PageMethods proxy on client </li></ul>
    34. 35. Enabling Page Methods <asp:ScriptManager ID=&quot;ScriptManager1&quot; EnablePageMethods=&quot;true&quot; Runat=&quot;server&quot; /> var PageMethods = function() { PageMethods.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null; } PageMethods.prototype = { ... }
    35. 36. Defining a Page Method public partial class MyPage : System.Web.UI.Page { [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ... }
    36. 37. Calling a Page Method PageMethods.GetCityAndState(&quot;98052&quot;, onComplete); . . . function onComplete(result) { window.alert(result); }
    37. 38. Demo
    38. 39. Built-In Web Services <ul><li>AuthenticationService </li></ul><ul><ul><li>Front end to membership service </li></ul></ul><ul><ul><li>Sys.Services.AuthenticationService proxy </li></ul></ul><ul><ul><ul><li>Global instance of Sys.Services._AuthenticationService </li></ul></ul></ul><ul><li>ProfileService </li></ul><ul><ul><li>Front-end to profile service </li></ul></ul><ul><ul><li>Sys.Services.Profile proxy </li></ul></ul><ul><ul><ul><li>Global instance of Sys.Services._ProfileService </li></ul></ul></ul><ul><li>Accessed through ScriptHandlerFactory </li></ul>
    39. 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()); }
    40. 41. 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. 42. 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