AJAX ASP.Net
•
0 likes•731 views
ASP.NET AJAX supports ASMX Web methods as endpoints for asynchronous AJAX callbacks. Efficient on the wire (no SOAP or XML)
More Related Content
Similar to AJAX ASP.Net
Similar to AJAX ASP.Net (20)
More from SHC
More from SHC (20)
Recently uploaded
Recently uploaded (20)
AJAX ASP.Net
- 1. The ASP.NET AJAX Extensions Robert A Dennyson
- 2. 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. Server Controls UpdatePanel Update- Progress Timer DragOverlay- Extender ScriptManager ScriptManager- Proxy ProfileService Script Management Partial-Page Rendering Futures CTP
- 5. 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>
- 6. 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
- 7. Service References <asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services> </asp:ScriptManager>
- 10. 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>
- 12. 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>
- 14. UpdatePanel
- 16. UpdateProgress Schema <asp:UpdateProgress ID="UpdateProgress1" Runat="server" DisplayAfter=" milliseconds " DynamicLayout="true|false" AssociatedUpdatePanelID=" UpdatePanelID "> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate> </asp:UpdateProgress>
- 17. 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
- 18. 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>
- 19. UpdateProgress
- 21. 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. 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>
- 23. Consuming a Web Service ZipCodeService.GetCityAndState("98052", onCompleted); . . . function onCompleted (result) { window.alert(result); }
- 24. 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. Web Services
- 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-encoded input JSON-encoded output
- 28. ASMX Request Handling ScriptHandler- Factory RestClient- ProxyHandler RestHandler WebService- HandlerFactory *.asmx "Normal" ASMX calls ASMX Extensions *.asmx/js *.asmx/ methodname Helper Classes Default ASMX handler
- 30. JSON vs. XML Point 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. 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. 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 = { ... }
- 35. Defining a Page Method public partial class MyPage : System.Web.UI.Page { [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ... }
- 36. Calling a Page Method PageMethods.GetCityAndState("98052", onComplete); . . . function onComplete(result) { window.alert(result); }
- 37. Page Methods
- 39. 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. 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. 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. Discussion
Editor's Notes
- If no event name is specified in a trigger, the trigger automatically references the control's default event (e.g., Button.Click)
- Call Web service and use WDH to show traffic on the wire.
- One of the &quot;Helper Classes&quot; 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: &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.
- 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;