Text of Introduce What is ASP.NET AJAX Architecture of ASP.NET AJAX Goal of ASP.NET AJAX Scenarios ASP.NET...
Slide 1
Introduce What is ASP.NET AJAX Architecture of ASP.NET AJAX Goal of ASP.NET AJAX Scenarios ASP.NET AJAX Extensions Microsoft AJAX Library ASP.NET AJAX ToolKit
Slide 2
What is ASP.NET AJAX Name of Microsofts AJAX solution, and it refers to a set of client and server technologies that focus on improving web development with Visual Studio A framework for quickly creating efficient and interactive web applications
Slide 3
Architecture of ASP.NET AJAX Two major components Microsoft AJAX Library (client) ASP.NET 2.0 AJAX Extensions (server) Microsoft AJAX Library Browsers (IE, Firefox, Safari, others) Browser Compatibility Asynchronous Communications Script Core Library Base Class Library XHTML/CSS Server Scripts ClientServer ASP.NET 2.0 Page Framework and Server Controls Page Framework and Server Controls Application Services Application Services ASP.NET 2.0 AJAX Extensions AJAX Server Controls AJAX Server Controls Asynchronous Communications Asynchronous Communications Application Services Bridge Application Services Bridge ASPX ASMX
Slide 4
Goal of ASP.NET AJAX Cross-platform, browser-indepedent Increased productivity, less time to market Highly extensible Enhance existing pages using powerful AJAX controls Can be used with PHP, ColdFusion, etc.
Slide 5
Scenarios to develop web application with ASP.NET AJAX Server-centric Ajax Web Development Enrich applications without lots of Javascript code required Enable you to keep core UI/Application logic on server (VB/C#) Client-centric Ajax Web Development Leverage full power of script/DHTML Provide richer and more interactive user experience ASP.NET AJAX provides a great Ajax framework for both server and client centric Ajax development scenarios
Slide 6
Server-Centric Programming Model ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls Microsoft Ajax Library Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Browser Presentation(HTML/CSS)Presentation(HTML/CSS) ASP.NET Application PagesPages UI Behavior (ManagedCode) (ManagedCode) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior) Page Request
Slide 7
Client-Centric Programming Model Browser Presentation(HTML/CSS)Presentation(HTML/CSS) ServiceProxiesServiceProxies UI Behavior (Script) (Script) ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET Application PagesPages WebServicesWebServices Microsoft Ajax Library Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data Page Request
Slide 8
ASP.NET AJAX Extensions Browser-agnostic but not platform-agnostic Support programming easily ScriptManager, UpdatePanel, and others Familiar drag-and-drop design paradigm Built-in Web services provide bridge to key ASP.NET 2.0 application services ASMX extensions enable Web services to be called through JavaScript proxies
Slide 9
Architecture ASP.NET 2.0 Page Framework & Server Controls Page Framework & Server Controls Application Services Application Services ASP.NET AJAX Extensions Server Controls Server Controls ASPX ASMX Application Services Bridge Application Services Bridge Asynchronous Communications Asynchronous Communications
Slide 10
Server Asynchronous Communications Layer Http Handler Web Service Page Methods Profile Services Authentication Service Authentication Service Xml Serialization JSON Serialization Server Asynchronous Communications Layer
ScriptManager Starting point for 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!
ScriptManagerProxy "Proxy" for ScriptManager controls declared in master pages Lets content pages declare script and service references
Slide 17
UpdatePanel Partial-page rendering in 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
Slide 18 . . "> . .
UpdatePanel Schema .
Slide 19
Triggers AsyncPostBackTrigger Converts postbacks 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"
Slide 20
Triggers Example ...
Slide 21 ......">
Periodic Updates Combine UpdatePanel with Timer control to perform periodic updates Use Timer control Tick events as triggers ......
Slide 22
UpdateProgress Companion to UpdatePanel 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
Slide 23 ">
UpdateProgress Schema
Slide 24 Animated GIF Display after second"> Animated GIF Display after second"> Animated GIF Display after second" title="UpdateProgress Example Animated GIF Display after second">
UpdateProgress Example Animated GIF Display after second
Slide 25 function can"> function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }"> function can" title="Canceling an Update Working... function can">
Canceling an Update Working... function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }
Slide 26
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
Slide 27
Script-Callable Web Service [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class WebServiceDemo : System.Web.Services.WebService { [WebMethod] public string HelloWorld(string message) { return (message + " : " + DateTime.Now.ToLongTimeString()); }
Slide 28
Declaring a Service Reference
Slide 29
Consuming a Web Service function GetResult() { var content = $get('location').value; WebServiceDemo.HelloWorld(content, OnSuccess, OnFailure); } function OnSuccess(result, context, methodName) { $get('result').innerHTML = result; }
Slide 30
Handling Errors function GetResult() { var content = $get('location').value; WebServiceDemo.HelloWorld(content, OnSuccess, OnFailure); } function OnSuccess(result, context, methodName) { $get('result').innerHTML = result; } function OnFailure(error, context, methodName) { var errorMessage = error.get_message(); $get('result').innerHTML = errorMessage; }
Slide 31
Page Methods Script-callable Web methods in pages Simpler than 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
Slide 32 "> "> " title="Enabling Page Methods ">
Enabling Page Methods
Slide 33
Defining a Page Method public partial class PageMethodDemo: System.Web.UI.Page {... [WebMethod] public static string HelloWorld(string message) { return (message + " : " + DateTime.Now.ToLongTimeString()); }... }
Slide 34
function GetResult() { var content = $get('location').value; PageMethods.HelloWorld(content, OnSuccess, OnFailure); } function OnSuccess(result, context, methodName) { $get('result').innerHTML = result; } function OnFailure(error, context, methodName) { var errorMessage = error.get_message(); $get('result').innerHTML = errorMessage; } Calling a Page Method
