Downloaded 61 times
![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) { ... } }](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-22-2048.jpg)
![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-encoded input JSON-encoded output](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-27-2048.jpg)
![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](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-33-2048.jpg)
![Defining a Page Method public partial class MyPage : System.Web.UI.Page { [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ... }](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-36-2048.jpg)
![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](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-41-2048.jpg)
![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](https://image.slidesharecdn.com/2-asp-dotnetajaxextensions-090823095130-phpapp02/75/2-Asp-Dot-Net-Ajax-Extensions-42-2048.jpg)
Uploaded byAbhishek Bhatnagar
2 Asp Dot Net Ajax Extensions
The document discusses the architecture and components of ASP.NET AJAX extensions. It describes the ScriptManager control as the starting point for ASP.NET AJAX pages. It also covers UpdatePanel for partial page updates, triggers, and UpdateProgress for displaying update status. Web services using ASMX are also discussed as endpoints for asynchronous callbacks from client-side scripts.
2 Asp Dot Net Ajax Extensions
- 1.
- 2. The ASP.NET AJAXExtensions Jeff Prosise Cofounder, Wintellect www.wintellect.com
- 3. Architecture ASP.NET 2.0Page Framework & Server Controls Application Services ASP.NET AJAX Extensions Server Controls ASPX ASMX Application Services Bridge Asynchronous Communications
- 4. Server Controls UpdatePanelUpdate- Progress Timer DragOverlay- Extender ScriptManager ScriptManager- Proxy ProfileService Script Management Partial-Page Rendering Futures CTP
- 5. ScriptManager Starting pointfor 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 <asp:ScriptManagerID="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>
- 7. Script References <asp:ScriptManagerID="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
- 8. Service References <asp:ScriptManagerID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services> </asp:ScriptManager>
- 9. ScriptManagerProxy "Proxy" forScriptManager 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>
- 10. UpdatePanel Partial-page renderingin 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->callback scope
- 11. UpdatePanel Schema <asp:ScriptManagerID="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>
- 12. Triggers AsyncPostBackTrigger Convertspostbacks 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 <asp:UpdatePanelID="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>
- 14. Periodic Updates CombineUpdatePanel 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>
- 15.
- 16. UpdateProgress Companion toUpdatePanel 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 <asp:UpdateProgressID="UpdateProgress1" Runat="server" DisplayAfter=" milliseconds " DynamicLayout="true|false" AssociatedUpdatePanelID=" UpdatePanelID "> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate> </asp:UpdateProgress>
- 18. UpdateProgress Example <asp:UpdateProgressDisplayAfter="500" ...> <ProgressTemplate> <asp:Image ID="ProgressImage" Runat="server" ImageUrl="~/Images/SpinningClock.gif" /> </ProgressTemplate> </asp:UpdateProgress> Animated GIF Display after ½ second
- 19. 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>
- 20.
- 21. ASP.NET AJAX WebServices 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.WebService { [System.Web.Services.WebMethod] public string[] GetCityAndState (string zip) { ... } }
- 23. Declaring a ServiceReference <asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services> </asp:ScriptManager> <script src="ZipCodeService.asmx/js" type="text/javascript"> </script>
- 24. Consuming a WebService 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_message()); }
- 26.
- 27. ASMX Wire FormatPOST /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-encoded input JSON-encoded output
- 28. ScriptHandlerFactory Wraps defaultASP.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>
- 29. ASMX Request HandlingScriptHandler- Factory RestClient- ProxyHandler RestHandler WebService- HandlerFactory *.asmx "Normal" ASMX calls ASMX Extensions *.asmx/js *.asmx/ methodname Helper Classes Default ASMX handler
- 30. JSON JavaScript ObjectNotation 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 (server) Sys.Serialization.JavaScriptSerializer (client) JSON home page: www.json.org
- 31. JSON vs. XMLPoint p = new Point(100, 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
- 32. The ScriptMethod AttributeOptional 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.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
- 34. Page Methods Script-callableWeb 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.-EnablePageMethods (disabled by default) Called through PageMethods proxy on client
- 35. 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 = { ... }
- 36. Defining a PageMethod public partial class MyPage : System.Web.UI.Page { [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ... }
- 37. Calling a PageMethod PageMethods.GetCityAndState("98052", onComplete); . . . function onComplete(result) { window.alert(result); }
- 38.
- 39. Built-In Web ServicesAuthenticationService Front end to membership service Sys.Services.AuthenticationService proxy Global instance of Sys.Services._AuthenticationService 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 PropertiesSys.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
- 42. Saving Profile PropertiesSys.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
- 43.
Editor's Notes
- #14 If no event name is specified in a trigger, the trigger automatically references the control's default event (e.g., Button.Click)
- #30 One of the &quot;Helper Classes&quot; is WebServiceClientProxyGenerator , which RestClientProxyHandler calls upon to generate JavaScript proxies.
- #32 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: &quot;@946702800000@&quot; 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.
- #41 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 &quot;Forms.&quot;