ASP.NET 2.0 AJAX Microsoft’s Framework for building AJAX Applications

1. ASP.NET 2.0 AJAXMicrosoft’s Framework for building AJAX Applications Agung RiyadiCTO, PT. BataviaSoft IndonesiaMicrosoft MVP, ASP . NETmailto: agung.riyadi@bataviasoft.nlblog: http://geeks.netindonesia.net/blogs/agung

2. Agenda • Microsoft Presentation Tier Technologies • Microsoft‘s AJAX Framework • Overview • Architecture • ASP.NET 2.0 AJAX Extensions • Microsoft AJAX Library • ASP.NET AJAX Control Toolkit • Roadmap • AJAX Live demos !

3. Microsoft Presentation Tier Technologies

4. Web Browser Downlevel- WindowsMac HTML (baseline) + JavaScript Windows Vista Windows XP Functional Devices DHTML / AJAX Lower latency, better UX Fully standards compliant Better UX / complex development “WPF/E” XAML / .NET FX High reach, X-platform XAML & App Model Graphics, Media, Animation Friction Free Full integration with desktop XAML / .NET FX Full fidelity & performance “Beyond the browser” Full development framework Windows Server & Services ASP.NET ASP.NET AJAX Live Microsoft UI Platfrom Capabilities Windows Client Platform Windows Vista Windows XP Functional Broadest Reach / Ubiquity Basic Experience Always Connected Superior UX Targeted Experiences Increased Performance Greater Richness Occasionally Connected

5. ASP.NET AJAX Overview

6. What is ASP.NET AJAX? A Framework for building Richer, more Interactive, Standards-based Web Experiences • High Productivity AJAX Development Framework • Fewer concepts, fewer lines of code • Application and UI building blocks for common scenarios • Builds on Top of ASP.NET 2.0 • Easy to Author, Debug, and Maintain • Clean separation of content, style, behavior, and code • Well integrated with design and development tools • Seamlessly integrated application model • Works with ASP.NET pages and server controls • Allows access to ASP.NET web services and components • Standards-Based: Works Cross-Browser!

7. ASP.NET AJAX Sharing Application Business Logic PresentationTier User InterfaceTier Business Tier Data Tier Private Public HTML Web Client BusinessFacade Component IIS ASP .NET IIS Business LogicComponent Session- State Views Business LogicComponent SmartClient XML WebService StoredProcedures Business LogicComponent Offline Cache

8. ASP.NET AJAX Architecture

9. HTML, Script, ASP.NET AJAX Markup ASP.NET AJAX Service Proxies ASP.NET AJAX-enabled ASP.NET Pages Web Services (ASMX or WCF) Microsoft AJAX Library(Client Script Library) ASP.NET AJAX Server Extensions App Services Bridge Controls, Components ASP.NET AJAX Server Controls ASP.NET AJAX Client App Services Component Model and UI Framework Web Services Bridge Base Class Library Local Store ASP.NET 2.0 Script Core Application Services Page Framework, Server Controls Browser Integration Browser Compatibility ASP.NET AJAX Architecture ASP.NET AJAX Client Framework & Services ASP.NET AJAX Server Framework

10. ASP.NET AJAX Scenarios • Server-centric Ajax Web Development • Incremental Ajax approach to add UI enrichment • Enrich Applications without lots of Javascript Code • 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 • Build mash-ups, gadgets and other new immersive experiences ASP.NET AJAX provides a great Ajax framework for both scenarios

11. ASP.NET 2.0 AJAX Extensions Server Centric Programming Model

12. ASP.NET Application Pages Initial Rendering (UI + Behavior) Input Data UI Behavior (Managed Code) Updated UI + Behavior ASP.NET ASP.NET AJAX Script Framework Page Framework, Server Controls Component/UI Framework, Controls Application Services Client Application Services Server-Centric Programming Model Browser “Application” Presentation (HTML/CSS)

13. The New Server-Side Controls • Example: The <asp:UpdatePanel> Control • Container control that enables “updatable” regions in a page • ASP.NET AJAX provides a XmlHttp based postback infrastructure Some non-updatable content and controls... <asp:UpdatePanelid=“u1”runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:labelid="Lablel1” runat=“server”/> <asp:buttonid=“button1”text=“PushMe!”runat=“server”/> <ContentTemplate> </asp:UpdatePanel> More non-updatable content and controls... Defines End-To-End behavior of Client-Side Components/Controls and Server-Side elements. Generates all required Script and sends it to the browser

14. <asp:UpdateProgress> control Provide “Status” UI while waiting on Response from a Server • Provide way for Users to understand latency • Provide way for users to Cancel Requests • UpdateProgress Control can be placed anywhere on Page • Templated Control allows any Content (e.g. Animated .gif) <asp:UpdatePanelid=“u1”mode=“Conditional”runat=“server”> <ContentTemplate> <asp:gridviewid=“GridView1”runat=“server”> ... </asp:gridview> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress> <ProgressTemplate> <divclass="updateprogress"> <imgsrc="images/progress_animation.gif"/> Updating... <asp:linkbuttonid=“abortButton”text=“Cancel”runat=“server”/> </div> </ProgressTemplate> </asp:UpdateProgress>

15. „AJAXifying“ an ASP.NET 2.0 Application

16. Microsoft AJAX Library Client Centric Programming Model

17. ASP.NET Application Browser “Application” Presentation (HTML/CSS) Initial Rendering (UI + Behavior) Pages ASP.NET AJAX Service Proxies Data UI Behavior (Script) Web Services Data ASP.NET AJAX Script Framework ASP.NET Component/UI Framework, Controls Page Framework, Server Controls Application Services Client Application Services Client-Centric Programming Model

18. ASP.NET AJAX Client Script LibraryScript core and base class library ASP.NET AJAXClient Script Library Powerful Script Framework • Rich Type System and Class Library for Javascript • Component Model and UI Framework • Rich Client-Side Data access and Databinding • Easily integrated with Server Application Model • Easily consume Web services from Browser • Script access to ASP.NET Application Services • Server-side Bridge to reuse 3rd party Services Controls and Components Component Model and UI Framework Base Class Library Script Core Browser Compatibility

19. ASP.NET AJAX Client Script LibraryNetworking • XMLHTTP – Variations in Browsers, tough to hand-code • Client networking stack layered on XMLHTTP • WebRequest, WebResponse, MethodRequest classes • ASP.NET AJAX Web Services Bridge • Access to ASP.NET-hosted and serviced components • ASMX and WCF services, .NET objects, ASP.NET page-level services • Wire format: Javascript Object Notation (JSON) and REST <scriptsrc=“MyService.asmx/js”/> <script> functiononLoad() { MyService.GetItemsByName(Text1.value, onComplete); } functiononComplete(results) { $(‘ResultsDataSource’).set_data(results); } </script> Automatic Client Proxy generation

20. ASP.NET AJAX Components and Behaviors • Provides Client JavaScript Control + Component Model • Enables Control behavior to be associated with html • Provides clean OO Encapsulation Model + Control re-use • Enables clean Developer/Designer workflow • UI defined using standard XHTML with CSS • Control Behaviors defined and attached separate from html • AJAX Controls can be declared procedurally + declaratively • XML Declarative Markup useful for Tool Support • Advanced AJAX Client Control Features: • Bi-Directional Databinding, Transformers, Validation

21. ASP.NET AJAX Client Script LibraryProcedural Client Side Scripting Search for: <input id=“Query" type="text" /> <div id="completionList"></div> function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox(document.getElementById(‘Query')); txt1.get_behaviors().add(auto1); txt1.initialize(); auto1.initialize(); }

22. ASP.NET AJAX Client Script LibraryDeclarative XML Script Search for: <input id=“Query" type="text" /> <div id="completionList"></div> <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id=“Query"> <behaviors> <autoComplete completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" completionSetCount="15" completionInterval="500" /> </behaviors> </textBox> </components> </page> </script>

23. Server Programming ModelClient Programming Model

24. ASP.NET AJAX Control Toolkit Extending AJAX

25. ASP.NET AJAX: Extender ControlsAdding Interactivity • Extend ASP.NET controls with AJAX behaviors • Reusable piece of interactive functionality • Attach to HTML UI declaratively or in code • Drag-and-drop, Tooltips, Popups, Auto-complete • Example: <asp:AutoCompleteExtender> • Enables textbox auto-complete support • Supports both .asmx and WCF based web-services (both using the built-in ASP.NET AJAX JSON bridge) <asp:textboxid=“CustomerSearch”runat=“server”/> <asp:AutoCompleteExtenderID="AutoComplete"runat="server"> <asp:AutoCompletePropertiesEnabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch"/> </asp:AutoCompleteExtender>

26. ASP.NET AJAX Control Toolkit Core Scenarios • Server Side Developers • Improve Client Experience without learning JavaScript or AJAX Client-Side development • Client Side Developers (AJAX JavaScript) • Make it much easier to develop AJAX Controls and Components • Very high Reusability Community Participation Model • ASP.NET AJAX Component Gallery • Everyone can Contribute • Microsoft Permissive License

27. ASP.NET AJAX Control Toolkit • Get bits from CodePlex • Open and build Project „AjaxControlToolkit“ • To use provided Extender Controls • Add Controls to Visual Studio Toolbox • ~\bin\[target]\AjaxControlToolkit.dll • To create Extender Controls • Install Project Templates • AjaxControlExtender.vsi • Read Documentation & Walkthroughs • http://ajax.asp.net/ajaxtoolkit/

28. ASP.NET AJAX Control Toolkit

29. ASP.NET AJAX Roadmap

30. ASP.NET AJAX Roadmap • On-going updates on a periodic basis • “Go-Live” RC1 Build Now Available • Download from http://ajax.asp.net • Goal to ship ASP.NET AJAX V1.0 in early 2007 • Fully supported product • Zero cost (totally free) • Visual Studio Tool Integration in Orcas Timeframe (Next Generation Visual Studio) • Incorporate and better integrate AJAX features • Improving design-time authoring experience • Improved Java-Script debugging

31. Live samples !

32. We are hiring Just drop your resume to my email : agung.riyadi@bataviasoft.com

33. © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.