2 asp dot net ajax extensions
DESCRIPTION
asp.netTRANSCRIPT
![Page 1: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/1.jpg)
![Page 2: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/2.jpg)
The ASP.NET AJAX The ASP.NET AJAX ExtensionsExtensionsJeff ProsiseJeff ProsiseCofounder, WintellectCofounder, Wintellectwww.wintellect.comwww.wintellect.com
![Page 3: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/3.jpg)
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
![Page 4: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/4.jpg)
Server Controls
UpdatePanelUpdatePanel
Update-Progress
Update-Progress
TimerTimer
DragOverlay-Extender
DragOverlay-ExtenderScriptManagerScriptManager
ScriptManager-Proxy
ScriptManager-Proxy ProfileServiceProfileService
ScriptManagement
Partial-Page Rendering Futures CTP
![Page 5: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/5.jpg)
ScriptManager
Starting point for ASP.NET AJAX pages
What does ScriptManager do?Downloads JavaScript files to clientEnables partial-page rendering using UpdatePanelProvides access to Web services via client-side proxiesManages callback timeouts, provides error handling options and infrastructure, and more
Every page requires one ScriptManager!
![Page 6: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/6.jpg)
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>
![Page 7: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/7.jpg)
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
![Page 8: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/8.jpg)
Service References
<asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services></asp:ScriptManager>
![Page 9: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/9.jpg)
ScriptManagerProxy
"Proxy" for ScriptManager 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>
![Page 10: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/10.jpg)
UpdatePanel
Partial-page rendering in a boxClean round trips to server and updatesRequires no knowledge of JavaScript or AJAX
Leverages PageRequestManager class
EnablePartialRendering="true"
Supports explicitly defined triggersPostbacks from controls in UpdatePanel are converted into async callbacksTriggers expand (or shrink) postback->callback scope
![Page 11: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/11.jpg)
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>
![Page 12: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/12.jpg)
Triggers
AsyncPostBackTriggerConverts postbacks into async callbacksTypically used to trigger updates when controls outside an UpdatePanel post backIf ChildrenAsTriggers="false", can be used to specify which controls inside UpdatePanel should call back rather than post back
PostBackTriggerLets controls inside UpdatePanel post backTypically used to allow certain controls to post back when ChildrenAsTriggers="true"
![Page 13: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/13.jpg)
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>
![Page 14: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/14.jpg)
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" /> ...<asp:UpdatePanel UpdateMode="Conditional" ...> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> ...</asp:UpdatePanel>
![Page 15: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/15.jpg)
DemoDemo
![Page 16: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/16.jpg)
UpdateProgress
Companion to UpdatePanel controls
Displays 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
![Page 17: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/17.jpg)
UpdateProgress Schema
<asp:UpdateProgress ID="UpdateProgress1" Runat="server" DisplayAfter="milliseconds" DynamicLayout="true|false" AssociatedUpdatePanelID="UpdatePanelID"> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate></asp:UpdateProgress>
![Page 18: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/18.jpg)
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
![Page 19: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/19.jpg)
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>
![Page 20: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/20.jpg)
DemoDemo
![Page 21: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/21.jpg)
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 script
JavaScript proxy on client enables JavaScript clients to call Web methods
![Page 22: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/22.jpg)
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) { ... }}
![Page 23: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/23.jpg)
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>
![Page 24: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/24.jpg)
Consuming a Web Service
ZipCodeService.GetCityAndState("98052", onCompleted); . . .function onCompleted (result){ window.alert(result);}
![Page 25: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/25.jpg)
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());}
![Page 26: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/26.jpg)
DemoDemo
![Page 27: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/27.jpg)
ASMX Wire Format
POST /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"}
POST /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"}
Request
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"]
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"]
Response
JSON-encodedinput
JSON-encodedoutput
![Page 28: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/28.jpg)
ScriptHandlerFactory
Wraps default ASP.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>
![Page 29: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/29.jpg)
ASMX Request Handling
ScriptHandler-Factory
ScriptHandler-Factory
RestClient-ProxyHandler
RestClient-ProxyHandler
RestHandlerRestHandler
WebService-HandlerFactory
WebService-HandlerFactory
*.asmx
"Normal" ASMX calls
ASMX Extensions
*.asmx/js
*.asmx/methodname
HelperClasses
HelperClasses
Default ASMX handler
![Page 30: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/30.jpg)
JSON
JavaScript Object NotationLightweight data interchange formatEasier to read and write than XMLBased 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
![Page 31: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/31.jpg)
JSON vs. XML
Point p = new Point(100, 200);
{"IsEmpty":false,"X":100,"Y":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 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
![Page 32: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/32.jpg)
The ScriptMethod Attribute
Optional 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)
![Page 33: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/33.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 asXML rather than JSON
![Page 34: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/34.jpg)
Page Methods
Script-callable Web methods in pages
Simpler than full-blown Web servicesDo not require service referencesDo 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
![Page 35: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/35.jpg)
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 = { ...}
![Page 36: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/36.jpg)
Defining a Page Method
public partial class MyPage : System.Web.UI.Page{ [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ...}
![Page 37: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/37.jpg)
PageMethods.GetCityAndState("98052", onComplete); . . .function onComplete(result){ window.alert(result);}
Calling a Page Method
![Page 38: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/38.jpg)
DemoDemo
![Page 39: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/39.jpg)
Built-In Web Services
AuthenticationServiceFront end to membership serviceSys.Services.AuthenticationService proxy
Global instance of Sys.Services._AuthenticationService
ProfileServiceFront-end to profile serviceSys.Services.Profile proxy
Global instance of Sys.Services._ProfileService
Accessed through ScriptHandlerFactory
![Page 40: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/40.jpg)
Using AuthenticationServiceSys.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());}
![Page 41: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/41.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
![Page 42: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/42.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
![Page 43: 2 Asp Dot Net Ajax Extensions](https://reader038.vdocument.in/reader038/viewer/2022102607/5467f70faf7959650e8b73d7/html5/thumbnails/43.jpg)