Embed Size (px)
Citation preview
Building AJAX-Enabled Building AJAX-Enabled Applications with ASP.NET Applications with ASP.NET
AJAX FrameworkAJAX Framework
Peter TyPeter Ty
Developer EvangelistDeveloper Evangelist
Microsoft Hong KongMicrosoft Hong Kong
[email protected]@microsoft.com
What Is AJAX?What Is AJAX?
The AJAX buzzwordThe AJAX buzzword AJAX == AJAX == AsynchronousAsynchronous JavaScriptJavaScript and and XMLXML It’s a Web development technique for creating interactive Web It’s a Web development technique for creating interactive Web
applications using a combination of applications using a combination of DHTMLDHTML, , JavaScriptJavaScript, and , and XMLHTTPXMLHTTP 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 appImprove the perceived performance of app Refreshing parts of the page, instead of the whole pageRefreshing parts of the page, instead of the whole page Improving navigationImproving navigation
Enabling richer/natural user interactions while still leveraging Enabling richer/natural user interactions while still leveraging cascading style sheets (CSS) for positioning and layoutcascading style sheets (CSS) for positioning and layout
Using the Web as an “Application Platform” by exposing and consume Using the Web as an “Application Platform” by exposing and consume Web servicesWeb 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 MapsMap – MSN® Virtual Earth™ & Windows Live Local, Google Maps E-mail – Windows Live Mail, Google Mail, Yahoo MailE-mail – Windows Live Mail, Google Mail, Yahoo Mail
What is ASP.NET AJAX?What is ASP.NET AJAX?
An end-to-end framework for building rich, interactive Web An end-to-end framework for building rich, interactive Web experiences and browser-based applicationsexperiences and browser-based applications
ASP.NET 2.0 AJAX ExtensionsASP.NET 2.0 AJAX Extensions Server controls that very simply enable AJAX in any ASP.NET Server controls that very simply enable AJAX in any ASP.NET
applicationapplication Microsoft AJAX LibraryMicrosoft AJAX Library
Client script framework that works cross-browser, and back-end Client script framework that works cross-browser, and back-end serverserver
ASP.NET AJAX Control ToolkitASP.NET AJAX Control Toolkit Rich set of server controls and client script functionalityRich set of server controls and client script functionality Community development modelCommunity development model
Key GoalsKey Goals Simple, Yet PowerfulSimple, Yet Powerful .NET-like feel to script framework.NET-like feel to script framework Reduce the need for scripting by every developer in mainline Reduce the need for scripting by every developer in mainline
scenariosscenarios
ASP.NET AJAXASP.NET AJAXWeb ServerWeb Server
IE
Firefox
Safari
BrowseBrowserr
ClientsClientsMicrosoft AJAX Microsoft AJAX
LibraryLibrary
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.NETIIS and ASP.NET
Apache and PHPApache and PHP
ColdFusionColdFusion
ASP.NET 2.0 AJAX ASP.NET 2.0 AJAX ExtensionsExtensions
ASP.NET AJAX ASP.NET AJAX Control ToolkitControl Toolkit
Which audience does ASP.NET Which audience does ASP.NET AJAX target?AJAX target?
ASP.NET 2.0 AJAX ExtensionsASP.NET 2.0 AJAX Extensions Typical ASP.NET (server) page developerTypical ASP.NET (server) page developer ““Server-centric developer”Server-centric developer”
Microsoft AJAX LibraryMicrosoft AJAX Library ASP.NET server control developerASP.NET server control developer ““Client-centric” developerClient-centric” developer
ASP.NET AJAX Control ToolkitASP.NET AJAX Control Toolkit Typical ASP.NET (server) page developerTypical ASP.NET (server) page developer ASP.NET server control developerASP.NET server control developer
ASP.NET 2.0 AJAX ExtensionsASP.NET 2.0 AJAX Extensions((Server-Centric Programming Model)Server-Centric Programming Model)
ASP.NETASP.NET
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
Microsoft AJAX LibraryMicrosoft AJAX Library
Client Application
Services
Client Application
Services
Component/UIFramework,
Controls
Component/UIFramework,
Controls
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
ASP.NET ApplicationASP.NET Application
PagesPagesPagesPages
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
Input Data
Updated UI + Behavior
Initial Rendering
(UI + Behavior)
Server ControlsServer Controls Goal: Easily enhance any ASP.NET Web applicationGoal: Easily enhance any ASP.NET Web application
Application UI and core logic still runs on serverApplication UI and core logic still runs on server Avoid need to master JavaScript and asynchronous Avoid need to master JavaScript and asynchronous
programmingprogramming
Use AJAX techniques to reduce roundtripsUse AJAX techniques to reduce roundtrips Enable Enable incrementalincremental page UI updates (avoid full page refreshes) page UI updates (avoid full page refreshes) Scenarios: data navigation and editing, form validation, auto Scenarios: data navigation and editing, form validation, auto
refreshrefresh Fall back for downlevel browsersFall back for downlevel browsers
Enable richer interactivity for existing ASP.NET controlEnable richer interactivity for existing ASP.NET control ExtendersExtenders to add ASP.NET AJAX behaviors to any ASP.NET to add ASP.NET AJAX behaviors to any ASP.NET
controlcontrol Use the same controls, object model, and events you already Use the same controls, object model, and events you already
knowknow Examples: auto-completion, Web parts, drag-and-drop, tooltipsExamples: auto-completion, Web parts, drag-and-drop, tooltips
ScriptManager controlScriptManager control
Co-ordinates page rendering for the server Co-ordinates page rendering for the server controlscontrols
Sends down the right compat scripts Sends down the right compat scripts depending on the calling browserdepending on the calling browser
<atlas:ScriptManager ID="scriptManager" <atlas:ScriptManager ID="scriptManager" EnablePartialRendering="true" runat="server" />EnablePartialRendering="true" runat="server" />
UpdatePanel controlUpdatePanel control
Container control that enables “updatable” Container control that enables “updatable” regions in a pageregions in a page
ASP.NET AJAX provides a XmlHttp based ASP.NET AJAX provides a XmlHttp based postback infrastructurepostback infrastructure
Some non-updatable content and controls...Some non-updatable content and controls...
<atlas:UpdatePanel id=“u1” runat=“server”><atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate><ContentTemplate>
This content can be dynamically updated!This content can be dynamically updated! <asp:calendar id=“cal1” runat=“server”/><asp:calendar id=“cal1” runat=“server”/>
<ContentTemplate><ContentTemplate></atlas:UpdatePanel></atlas:UpdatePanel>
More non-updatable content and controls...More non-updatable content and controls...
UUpdatePanelpdatePanel
UpdatePanel Under the CoversUpdatePanel Under the Covers
ASP.NET AJAX hooks post-back submit actions ASP.NET AJAX hooks post-back submit actions on clienton client
Uses XMLHttp to fire postback action to serverUses XMLHttp to fire postback action to server Postback events fire like normal on serverPostback events fire like normal on server Only content of UpdatePanel regions returnedOnly content of UpdatePanel regions returned Changed UpdatePanel regions replaced on Changed UpdatePanel regions replaced on
clientclient
ASP.NET AJAX Control ASP.NET AJAX Control ToolkitToolkit
An easy to use SDK that simplifies the process of writing ASP.NET An easy to use SDK that simplifies the process of writing ASP.NET AJAX components AJAX components
Additional controls and extenders that make common DHTML and AJAX Additional controls and extenders that make common DHTML and AJAX scenarios easyscenarios easy
Thin enabling layerThin enabling layer MicrosoftMicrosoft®® Visual Studio Visual Studio®® 2005 Templates 2005 Templates Unit Testing FrameworkUnit Testing Framework Example controls, source, and documentation includedExample controls, source, and documentation included
Toolkit Controls
ASP.NET 2.0Microsoft AJAX Library
ASP.NET 2.0 AJAX Extensions
Toolkit Base Classes (.NET and JS)
Visual Studio 2005 Templates
Ajax enAjax enabled abled Media Share Library Media Share Library Starter KitStarter Kit
Client-Centric Programming Client-Centric Programming ModelModel
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
ASP.NET AJAXASP.NET AJAXServiceServiceProxiesProxies
ASP.NET AJAXASP.NET AJAXServiceServiceProxiesProxies
UI BehaviorUI Behavior(Script)(Script)
UI BehaviorUI Behavior(Script)(Script)
ASP.NETASP.NET
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
ASP.NET ApplicationASP.NET Application
PagesPagesPagesPages
WebWebServicesServices
WebWebServicesServices
Microsoft AJAX LibraryMicrosoft AJAX Library
Client Application
Services
Client Application
Services
Component/UIFramework,
Controls
Component/UIFramework,
Controls
Initial Rendering
(UI + Behavior)
Data
Data
Microsoft AJAX LibraryMicrosoft AJAX Library
Compatibility layer for browsers and platformsCompatibility layer for browsers and platforms Support for Windows Internet Explorer, Firefox/Mozilla, SafariSupport for Windows Internet Explorer, Firefox/Mozilla, Safari
Script core runtime: a rich type system for JScript Script core runtime: a rich type system for JScript Classes, namespaces, inheritance, interfaces Classes, namespaces, inheritance, interfaces Event handlersEvent handlers Object serializationObject serialization
Base class library and networking servicesBase class library and networking services Helper classes for developers (subset of .NET BCL)Helper classes for developers (subset of .NET BCL) Management of asynchronous network operationsManagement of asynchronous network operations
Component model and UI frameworkComponent model and UI framework Declarative scripting (XML script definitions)Declarative scripting (XML script definitions) Extensible component and control modelExtensible component and control model Data binding, presentation, and validationData binding, presentation, and validation
Client components for common scenarios – examples:Client components for common scenarios – examples: TextBox, Panel, Label, etc.TextBox, Panel, Label, etc. ListView and DataView for rendering templated data ListView and DataView for rendering templated data UI behaviors such as drag and drop, tooltips, auto-completionUI behaviors such as drag and drop, tooltips, auto-completion
Microsoft AJAX LibraryMicrosoft AJAX Library
Controls and ComponentsControls and Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI Framework
Component Model and UI Framework
Browser CompatibilityBrowser Compatibility
To Learn MoreTo Learn More
ASP.NET AJAX siteASP.NET AJAX site
http://ajax.asp.net/ http://ajax.asp.net/
ASP.NET AJAX Control ToolkitASP.NET AJAX Control Toolkit
http://ajax.asp.net/default.aspx?http://ajax.asp.net/default.aspx?tabid=47&subtabid=477 tabid=47&subtabid=477
ResourcesResourcesTechnical Chats and Webcastshttp://www.microsoft.com/communities/chats/default.mspx
http://www.microsoft.com/usa/webcasts/default.asp
Microsoft Learning and Certificationhttp://www.microsoft.com/learning/default.mspx
MSDN & TechNet http://microsoft.com/msdn
http://microsoft.com/technet
Virtual Labshttp://www.microsoft.com/technet/traincert/virtuallab/rms.mspx
Newsgroupshttp://communities2.microsoft.com/
communities/newsgroups/en-us/default.aspx
Technical Community Siteshttp://www.microsoft.com/communities/default.mspx
User Groupshttp://www.microsoft.com/communities/usergroups/default.mspx
MVP MVP (Most Valuable Professional)(Most Valuable Professional) The Microsoft Most Valuable Program is a globally managed program The Microsoft Most Valuable Program is a globally managed program that recognizes, enables, and empowers that highest quality, most that recognizes, enables, and empowers that highest quality, most credible experts and accessible individuals with expertise in one or credible experts and accessible individuals with expertise in one or more Microsoft products in technical community that continue to help more Microsoft products in technical community that continue to help and inspire people around the world everyday who actively participate and inspire people around the world everyday who actively participate online or offline communities to share their knowledge and do amazing online or offline communities to share their knowledge and do amazing things with Microsoft technologies. things with Microsoft technologies.
AccessibleAccessible Active technical community leaders sharing Active technical community leaders sharing their experience and support with peerstheir experience and support with peers
RecognizedRecognizedRecognized and awarded by Microsoft for Recognized and awarded by Microsoft for active participation and willingness to share active participation and willingness to share in communities. in communities.
CredibleCredibleDemonstrated Microsoft technical expertise Demonstrated Microsoft technical expertise providing the highest quality information providing the highest quality information and contentand content
Microsoft Technical Communities Microsoft Technical Communities http://www.microsoft.com/hk/community/http://www.microsoft.com/hk/community/Email: [email protected] ; Email: [email protected] ; [email protected]@microsoft.com
