Building AJAX-Enabled Applications with ASP.NET AJAX Framework Peter Ty Developer Evangelist Microsoft Hong Kong

What Is AJAX? The AJAX buzzword The AJAX buzzword  AJAX == Asynchronous JavaScript and XML  It’s a Web development technique for creating interactive Web applications using a combination of DHTML, JavaScript, and XMLHTTP Bottom Line: AJAX is really about improving the “User Experience” Bottom Line: AJAX is really about improving the “User Experience”  Improve the perceived performance of app  Refreshing parts of the page, instead of the whole page  Improving navigation  Enabling richer/natural user interactions while still leveraging cascading style sheets (CSS) for positioning and layout  Using the Web as an “Application Platform” by exposing and consume Web services You can see it on the Web today! You can see it on the Web today!  Map – MSN® Virtual Earth™ & Windows Live Local, Google Maps  – Windows Live Mail, Google Mail, Yahoo Mail

What is ASP.NET AJAX? An end-to-end framework for building rich, interactive Web experiences and browser-based applications An end-to-end framework for building rich, interactive Web experiences and browser-based applications ASP.NET 2.0 AJAX Extensions ASP.NET 2.0 AJAX Extensions  Server controls that very simply enable AJAX in any ASP.NET application Microsoft AJAX Library Microsoft AJAX Library  Client script framework that works cross-browser, and back-end server ASP.NET AJAX Control Toolkit ASP.NET AJAX Control Toolkit  Rich set of server controls and client script functionality  Community development model Key Goals Key Goals  Simple, Yet Powerful .NET-like feel to script framework  Reduce the need for scripting by every developer in mainline scenarios

ASP.NET AJAX Web Server IE Firefox Safari BrowserClients Microsoft AJAX Library AtlasUIGlitz.js AtlasGadgets.js AtlasFX.js AtlasCompat.js AtlasRuntime.js JSON Bridge Support Membership and Personalization Support ASP.NET Server Control Integration IIS and ASP.NET Apache and PHP ColdFusion ASP.NET 2.0 AJAX Extensions ASP.NET AJAX Control Toolkit

Which audience does ASP.NET AJAX target? ASP.NET 2.0 AJAX Extensions ASP.NET 2.0 AJAX Extensions  Typical ASP.NET (server) page developer  “Server-centric developer” Microsoft AJAX Library Microsoft AJAX Library  ASP.NET server control developer  “Client-centric” developer ASP.NET AJAX Control Toolkit ASP.NET AJAX Control Toolkit  Typical ASP.NET (server) page developer  ASP.NET server control developer

ASP.NET 2.0 AJAX Extensions (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)

Server Controls Goal: Easily enhance any ASP.NET Web application Goal: Easily enhance any ASP.NET Web application  Application UI and core logic still runs on server  Avoid need to master JavaScript and asynchronous programming Use AJAX techniques to reduce roundtrips Use AJAX techniques to reduce roundtrips  Enable incremental page UI updates (avoid full page refreshes)  Scenarios: data navigation and editing, form validation, auto refresh  Fall back for downlevel browsers Enable richer interactivity for existing ASP.NET control Enable richer interactivity for existing ASP.NET control  Extenders to add ASP.NET AJAX behaviors to any ASP.NET control  Use the same controls, object model, and events you already know  Examples: auto-completion, Web parts, drag-and-drop, tooltips

ScriptManager control Co-ordinates page rendering for the server controls Co-ordinates page rendering for the server controls Sends down the right compat scripts depending on the calling browser Sends down the right compat scripts depending on the calling browser

UpdatePanel control Container control that enables “updatable” regions in a page Container control that enables “updatable” regions in a page ASP.NET AJAX provides a XmlHttp based postback infrastructure ASP.NET AJAX provides a XmlHttp based postback infrastructure Some non-updatable content and controls... This content can be dynamically updated! This content can be dynamically updated! </atlas:UpdatePanel> More non-updatable content and controls...

UpdatePanel

UpdatePanel Under the Covers ASP.NET AJAX hooks post-back submit actions on client ASP.NET AJAX hooks post-back submit actions on client Uses XMLHttp to fire postback action to server Uses XMLHttp to fire postback action to server Postback events fire like normal on server Postback events fire like normal on server Only content of UpdatePanel regions returned Only content of UpdatePanel regions returned Changed UpdatePanel regions replaced on client Changed UpdatePanel regions replaced on client

ASP.NET AJAX Control Toolkit  An easy to use SDK that simplifies the process of writing ASP.NET AJAX components  Additional controls and extenders that make common DHTML and AJAX scenarios easy  Thin enabling layer  Microsoft ® Visual Studio ® 2005 Templates  Unit Testing Framework  Example controls, source, and documentation included Toolkit Controls ASP.NET 2.0 Microsoft AJAX Library ASP.NET 2.0 AJAX Extensions Toolkit Base Classes (.NET and JS) Visual Studio 2005 Templates

Ajax enabled Media Share Library Starter Kit

Client-Centric Programming Model Browser Presentation(HTML/CSS)Presentation(HTML/CSS) ASP.NET AJAX ServiceProxies ServiceProxies 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

Microsoft AJAX Library Compatibility layer for browsers and platforms  Support for Windows Internet Explorer, Firefox/Mozilla, Safari Script core runtime: a rich type system for JScript  Classes, namespaces, inheritance, interfaces  Event handlers  Object serialization Base class library and networking services  Helper classes for developers (subset of.NET BCL)  Management of asynchronous network operations Component model and UI framework  Declarative scripting (XML script definitions)  Extensible component and control model  Data binding, presentation, and validation Client components for common scenarios – examples:  TextBox, Panel, Label, etc.  ListView and DataView for rendering templated data  UI behaviors such as drag and drop, tooltips, auto-completion Microsoft AJAX Library Controls and Components Script Core Base Class Library Component Model and UI Framework Component Model and UI Framework Browser Compatibility

To Learn More ASP.NET AJAX site ASP.NET AJAX site ASP.NET AJAX Control Toolkit ASP.NET AJAX Control Toolkit abid=477 abid=477

Resources Technical Chats and Webcasts Microsoft Learning and Certification MSDN & TechNet Virtual Labs Newsgroups communities/newsgroups/en-us/default.aspx Technical Community Sites User Groups

MVP (Most Valuable Professional) The Microsoft Most Valuable Program is a globally managed program that recognizes, enables, and empowers that highest quality, most credible experts and accessible individuals with expertise in one or more Microsoft products in technical community that continue to help and inspire people around the world everyday who actively participate online or offline communities to share their knowledge and do amazing things with Microsoft technologies. Accessible Active technical community leaders sharing their experience and support with peers Recognized Recognized and awarded by Microsoft for active participation and willingness to share in communities. Credible Demonstrated Microsoft technical expertise providing the highest quality information and content Microsoft Technical Communities ;