Web Applications meets Life Microsoft ASP.NET “Atlas” Saurabh Verma Chief Software Architect | The Perfect Future

2 Road Map What is ASP.NET ‘Atlas’ ‘Atlas’ Development Models Inside UpdatePanel Summary Content by : Scott Guthrie,Microsoft

3 Saurabh Verma Chief Software Architect and co-Founder of The Perfect Future Involved in architecting and developing next generation communication engine “HumTum” “HumTum” A Web 2.0 BLOG

4 What is ASP.NET ‘Atlas’ A framework for building a new generation of richer, interactive, personalized standards-based web applications High-productivity platform for AJAX-style browser applications Script component model and UI framework for browser-based web applications Rich suite of components, controls, and behaviors to make Ajax easy Seamlessly integrate with Microsoft platform and application model Easily leverages services and components hosted in ASP.NET Delivers ubiquitous reach and easy deployment Works with IE, FireFox, Safari web clients – no client install required Based on existing standards – DHTML, JScript, CSS Enable world-class tools for AJAX-style application development Will be integrated with web authoring tools for developers and designers Next release of VS will provide richer scripting toolset (debugging, tracing, etc)

What is ASP.NET ‘Atlas’

6 ‘Atlas’ Development Server Centric Model Incremental Ajax approach to add UI enrichment for key scenarios Enrich applications without lots of Javascript code required Enable you to keep core UI/Application logic on server (VB/C#) Client Centric Model Leverage full power of script/DHTML Provide richer and more interactive user experience Build mash-ups, gadgets and other new immersive experiences Atlas provides a great Ajax framework for both server and client centric development

‘Atlas’ Development Models

8 Server Centric Model ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls Atlas Script Framework 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)

9 Client Centric Model Browser Presentation(HTML/CSS)Presentation(HTML/CSS) “Atlas”ServiceProxies“Atlas”ServiceProxies UI Behavior (Script) (Script) ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET Application PagesPages WebServicesWebServices Atlas Script Framework Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data

Server Centric Development with Atlas

Server Controls Server Controls 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 Enable incremental page UI updates (avoid full page refreshes) Scenarios: data navigation and editing, form validation, auto refresh Enable richer interactivity for existing ASP.NET controls Use the same controls, object model and events you already know Extenders to add Atlas behaviors to any ASP.NET controls Examples: auto-completion, web-parts, drag-and-drop, tooltips You get 12 atlas controls on toolbar after adding to atlas binary to your toolbar

control control Container control that enables “updatable” regions in a page Atlas 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...

Simple UpdatePanel Demo

Inside Inside Atlas intercepts post-back submit actions on client Uses XMLHttp to fire postback action to server Postback events fire like normal on server Only content of updatepanel regions returned Changed updatepanel regions replaced on client

Postbacks Postbacks All post-back actions for controls declared within an updatepanel control will cause Ajax- based post-backs with incremental page refresh Post-back action for controls outside of an updatepanel control will by default cause normal postbacks

Triggers Triggers Triggers can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanel <asp:ControlEventTrigger> Refresh the UpdatePanel when a control event firesRefresh the UpdatePanel when a control event fires<asp:ControlValueTrigger> Update the UpdatePanel when a control value changesUpdate the UpdatePanel when a control value changes

Triggers Triggers This content will be updated when a button is clicked outside of This content will be updated when a button is clicked outside of the UpdatePanel contentemplate... the UpdatePanel contentemplate... </atlas:UpdatePanel>

UpdatePanel with Triggers

Refresh Modes Refresh Modes Multiple UpdatePanel Controls can be added to a pageMultiple UpdatePanel Controls can be added to a page Sometimes you only want to update one panel…Sometimes you only want to update one panel… UpdatePanel control supports two update mode:UpdatePanel control supports two update mode: “Always” = Refresh every-time an Ajax postback occurs “Always” = Refresh every-time an Ajax postback occurs “Conditional” = Refresh when specific Ajax postback occurs “Conditional” = Refresh when specific Ajax postback occurs Conditional refreshes can be done via triggers:Conditional refreshes can be done via triggers: -- Update on control event fires -- Update on control event fires -- Update when value changes -- Update when value changes Conditional refreshes can also be triggered via code:Conditional refreshes can also be triggered via code: UpdatePanel1.Update() method causes that panel to refreshUpdatePanel1.Update() method causes that panel to refresh

Refresh Modes Refresh Modes This content will only be updated when a button is clicked outside of This content will only be updated when a button is clicked outside of the UpdatePanel contentemplate, or if the TextBox1.Text property changes the UpdatePanel contentemplate, or if the TextBox1.Text property changes </atlas:UpdatePanel>

control control Delivers ability to provide “status” UI while waiting on response from a server Remember that “A” in “Ajax” stands for Asynchronous Need to provide way for users to understand latency Need to provide way for users to cancel requests UpdateProgress control can be placed anywhere on page Templated control allows any content (e.g. animated.gif) Can use CSS to position/style anywhere

control control </atlas:UpdatePanel><atlas:UpdateProgress> Updating... Updating... </atlas:UpdateProgress>

control control <atlas:UpdateProgress> Updating... Updating... </atlas:UpdateProgress>

UpdateProgress Demo

Client Centric Ajax Development with Atlas

Client-Centric Programming Model Browser Presentation(HTML/CSS)Presentation(HTML/CSS) “Atlas”ServiceProxies“Atlas”ServiceProxies UI Behavior (Script) (Script) ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET Application PagesPages WebServicesWebServices Atlas Script Framework Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data

Atlas Client Script Library Goal: Easily develop rich interactive web applications Application UI runs in browser, business logic runs on server HTML/Atlas client accesses data and services from the web Scenarios Mash-up applications Composite applications, sites, and gadgets (e.g. Live.com) Disconnected browser scenarios (e.g. Windows Sidebar) Powerful UI framework and component model for browsers Declarative markup and component model Rich client-side data access and data-binding Zero footprint client installation on any modern browser Easily integrated with server application model Easily consume any web service (ASMX, Indigo) from browser Proxy generation, serialization to consume.NET objects in script Script access to ASP.NET application services Server-side bridge to reuse 3 rd party services

Atlas Client Script Library Controls and Components Script Core Base Class Library Component Model and UI Framework Component Model and UI Framework Browser Compatibility 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 (Atlas XML script definitions) Extensible component and control model Data binding, presentation, and validation Atlas components for common scenarios – examples: ListView and DataView for rendering templated data UI behaviors such as drag and drop, tooltips, auto- completion Compatibility layer for browsers and platforms Support for IE, Firefox/Mozilla, Safari

Network Callbacks from Script Atlas provides easy mechanism for script callbacks Can call a web-service end-point on server Can call a page-method end-point on server Atlas provides JSON network serialization support JSON = JavaScript Object Notation JSON support for auto-serialization of.NET types e.g. return an array of “Customer” objects Advanced network manager features supported Priorities and queuing on network calls Batch invocation of multiple calls in single network request

Network WebService Calls from Script // Server Method Implemented in SimpleService.asmx public class SimpleService : System.Web.Services.WebService { [WebMethod] [WebMethod] public int Add(int x, int y) { public int Add(int x, int y) { return x+y; return x+y; }} // Add this control to a.aspx page to reference it </atlas:ScriptManager>

Network WebService Calls from Script function Calculate() { function Calculate() { SimpleService.Add(123, 456, onComplete, onTimeout); SimpleService.Add(123, 456, onComplete, onTimeout); } function onComplete(result) { function onComplete(result) { someHtmlLabel.innerText = result; someHtmlLabel.innerText = result; } function onTimeout(result) { function onTimeout(result) { alert(“Timed out!”); alert(“Timed out!”); }</script>

32 Web Services Call Demo

Summary 33 Atlas provides a rich Ajax programming framework Rich built-in integration with ASP.NET Server Controls Web and Application Services Rich client-side JavaScript framework model Build rich mashups and gadgets Rich extensibility model for component developers Start taking a look at it today!

34 START NOW

35 Thank You You can mail me at Visit my blog at

1. What are the key topics we covered in today's presentation? A) Atlas.net B) Atlas.net, Update Panel and Control Toolkit C) Update Panel D) Control Toolkit

2. Number of atlas controls on toolbar after adding atlas binary A) 10 B) 8 C) 14 D) 12

3. Types of Development Approaches in Atlas A) Server B) Client C) Client and Server D) None

4. Motivational Framework behind Atlas A) AJAX B) PHP C) ASP D) Laszlo

How to Participate Please send your responses to Subject = “Microsoft Webcast Contest – Web Applications meets Life Microsoft ASP.NET “Atlas”"