introduce what is asp.net ajax architecture of asp.net ajax goal of asp.net ajax scenarios asp.net...

Click here to load reader

Post on 27-Dec-2015

230 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

  • 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
  • Slide 11
  • Server Controls UpdatePanel Update- Progress Update- Progress Timer DragOverlay- Extender DragOverlay- Extender ScriptManager ScriptManager- Proxy ScriptManager- Proxy ProfileService Script Management Partial-Page Rendering Futures CTP
  • Slide 12
  • 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!
  • Slide 13 ">
  • ScriptManager Schema
  • Slide 14
  • Script References "Path" references load script files "Name" references load script resources
  • Slide 15
  • Service References
  • Slide 16
  • 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
  • Slide 35
  • Built-In Web Services