Upload
abhishek-bhatnagar
View
6.209
Download
7
Tags:
Embed Size (px)
DESCRIPTION
asp.net
Citation preview
The ASP.NET AJAX The ASP.NET AJAX ExtensionsExtensionsJeff ProsiseJeff ProsiseCofounder, WintellectCofounder, Wintellectwww.wintellect.comwww.wintellect.com
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
Server Controls
UpdatePanelUpdatePanel
Update-Progress
Update-Progress
TimerTimer
DragOverlay-Extender
DragOverlay-ExtenderScriptManagerScriptManager
ScriptManager-Proxy
ScriptManager-Proxy ProfileServiceProfileService
ScriptManagement
Partial-Page Rendering Futures CTP
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!
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>
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
Service References
<asp:ScriptManager ID="ScriptManager1" Runat="server"> <Services> <asp:ServiceReference Path="ZipCodeService.asmx" /> </Services></asp:ScriptManager>
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>
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
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>
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"
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>
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>
DemoDemo
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
UpdateProgress Schema
<asp:UpdateProgress ID="UpdateProgress1" Runat="server" DisplayAfter="milliseconds" DynamicLayout="true|false" AssociatedUpdatePanelID="UpdatePanelID"> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate></asp:UpdateProgress>
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
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>
DemoDemo
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
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) { ... }}
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>
Consuming a Web Service
ZipCodeService.GetCityAndState("98052", onCompleted); . . .function onCompleted (result){ window.alert(result);}
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());}
DemoDemo
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
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>
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
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
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
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)
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 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
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 = { ...}
Defining a Page Method
public partial class MyPage : System.Web.UI.Page{ [System.Web.Services.WebMethod] public static string[] GetCityAndState (string zip) { ... } ...}
PageMethods.GetCityAndState("98052", onComplete); . . .function onComplete(result){ window.alert(result);}
Calling a Page Method
DemoDemo
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
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());}
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
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