By Gyan Deo Singh Building Rich Web UI with the Microsoft AJAX Library, Extensions, and Toolkit

WEB PLATFORM THEMES Developer Productivity Dramatically reduce concepts, lines of code required Deliver an awesome Visual Studio Web tool experience Enable rich Web scenarios not possible today Extensible Platform Replace/extend all built-in features + services Customize for any enterprise environment Administration and Management Easiest platform to manage and administer Performance and Scalability The world’s fastest Web application server

Why Does User Experience Matter? The world has shifted, experience matters Look and feel User interaction Emotional connection Designers are now an important part of any software development lifecycle Too hard today for designers and developers to work together Tooling has not caught up with this shift Throwing it over the wall is not good enough

ASP.NET AJAX Increased productivity Fewer concepts, fewer lines of code Application and UI building blocks for common scenarios Easier 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-hosted web services and components Works everywhere – cross-browser, standards based A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE PERSONALIZED WEB EXPERIENCES A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE PERSONALIZED WEB EXPERIENCES

FEATURE MATRIX ASP.NET AJAX 1.0 Provides the core ASP.NET 2.0 AJAX Extensions and Microsoft AJAX Library for creating AJAX-style applications with either server-centric or client-centric development models. At final release, this package will be fully supported by Microsoft Premier Support Services. ASP.NET AJAX Futures January CTP Provides features that extend the core ASP.NET AJAX 1.0 platform with additional functionality that remains under development.

ASP.NET AJAX Server Extensions ASP.NET AJAX Server Controls ASP.NET AJAX Server Controls App Services Bridge Web Services Bridge ASP.NET AJAX Architecture Server Framework Client Framework and Services Client Script Library Controls, Components Script Core Base Class Library Component Model and UI Framework Browser Compatibility Client Application Services Browser Integration Browser Integration ASP.NET 2.0 Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET AJAX ASP.NET Pages ASP.NET AJAX ASP.NET Pages Web Services HTML, Script, ASP.NET AJAX Markup HTML, Script, ASP.NET AJAX Markup ServiceProxiesServiceProxies

NAME Title | Group Microsoft Corporation DEMO ASP.NET AJAX PROJECT TYPES

DEVELOPMENT SCENARIOS Server-centric Ajax Web Development 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 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

PARTIAL PAGE UPDATES control Easily define “updatable” regions of a page Server roundtrips become asynchronous ASP.NET AJAX handles all the infrastructure Supports Triggers that allow other controls to fire the Postback

TRIGGERING POSTBACKS Add Triggers to UpdatePanel to Enable Other Controls to Trigger the AsyncPostback Controls outside the UpdatePanel can trigger a Postback <asp:AsyncPostBackTrigger ControlID="Button1“ EventName="Click"/>

ENHANCE EXISTING CONTROLS Control Extenders Extend ASP.NET controls with ASP.NET AJAX client behaviors Encapsulate both client and server behavior Same familiar programming model as ASP.NET server controls <asp:AutoCompleteExtender runat="server" ID="AC1” TargetControlID="TextBox1" ServicePath="AutoComplete.asmx“ ServiceMethod="GetWords" Enabled="true" MinimumPrefixLength="1" />

SHOWING PROGRESS UpdateProgress Control Provides feedback on the progress of partial-page rendering Please Wait...

NAME Title | Group Microsoft Corporation DEMO UPDATEPANEL

ASP.NET AJAX Client Script Library Script core and base class library ASP.NET AJAX script core – a full type system for JavaScript Classes and interfaces, inheritance, virtual and abstract methods Enumerations Multi-cast event handlers similar to.NET Base class library StringBuilder, extensions to existing types Serializers Debugging and tracing classes Networking

WORKING WITH TYPES Register Types Using Type Methods Type.RegisterNamespace Type.RegisterClass Type.RegisterInterface Type.RegisterEnum Enables Object Oriented Capabilities Supports Single Inheritance Type.registerNamespace("Samples.DinnerNow");

CREATING EXTENDER CONTROLS Extend Existing Controls with new Behaviors Create a server extender control that developers can add to an ASP.NET page to control the client behavior of a targeted Web server control. Handle events from the browser Document Object Model (DOM) using a client behavior. Inherit the ExtenderControl Abstract Class Implement the IExtenderControl interface Create JavaScript File for Client Behavior

WORKING WITH WEB SERVICES ScriptManager Handles WebService Access Services Collection has a ServiceReference Server ASMX Requirements Reference to Microsoft.Web.Script.Services [ScriptService] Attribute on Class Inline Methods on ASPX can be called as Web Services Add [WebMethod] Attribute to Method

WEBSERVICE FAILURES Callbacks for Success or Failure of Web Service Calls Handle Errors If you do not pass a client callback function to the Web service method, the return value is ignored function Div(a, b) { Samples.AspNet.WebService.Div(a, b, OnSucceeded, OnFailed); } function OnFailed(error) { … } function OnSucceeded(error) { … }

NAME Title | Group Microsoft Corporation DEMO USING TYPES

ASP.NET AJAX Control Toolkit A rich set of sample controls and extenders that makes it easier then ever to build and consume rich client-side ASP.NET AJAX controls and extenders. Ready to go samples SDK to simplify the creation and re-use of your own custom controls and extenders. Full source code & documentation SDK that simplifies the process of writing ASP.NET AJAX components 28 Controls and components Not supported by Microsoft This is a community project on CodePlex Not supported by Microsoft This is a community project on CodePlex Toolkit Controls AccordionNoBot AlwaysVisibleControlNumericUpDown AnimationPagingBulletedList CascadingDropDownPasswordStrength CollapsiblePanelPopupControl ConfirmButtonRating DragPanelReorderList DropDownResizableControl DropShadowRoundedCorners DynamicPopulateSlider FilteredTextBoxTextBoxWatermark HoverMenuToggleButton ModalPopupUpdatePanelAnimation MutuallyExlcusiveCheckBoxValidatorCallout

NAME Title | Group Microsoft Corporation DEMO AJAX CONTROL TOOLKIT