PRESENTER NAMEPRESENTER NAMETitle | Web Live Rhythm

Building Rich Web UI with the Building Rich Web UI with the Microsoft AJAX Library, Microsoft AJAX Library, Extensions, and ToolkitExtensions, and Toolkit

WEB PLATFORM THEMESWEB PLATFORM THEMESDeveloper Productivity

Dramatically reduce concepts, lines of code required

Deliver an awesome Visual Studio Web tool experience

Enable rich Web scenarios not possible today

Extensible PlatformReplace/extend all built-in features + services

Customize for any enterprise environment

Administration and ManagementEasiest platform to manage and administer

Performance and ScalabilityThe world’s fastest Web application server

Why Does User Experience Why Does User Experience Matter?Matter?

The world has shifted, experience mattersLook 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 AJAXASP.NET AJAX

Increased productivityFewer concepts, fewer lines of codeApplication and UI building blocks for common scenarios

Easier to author, debug, and maintainClean separation of content, style, behavior, and codeWell integrated with design and development tools

Seamlessly integrated application modelWorks with ASP.NET pages and server controlsAllows 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 MATRIXFEATURE MATRIX

ASP.NET AJAX 1.0Provides 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 CTPProvides features that extend the core ASP.NET AJAX 1.0 platform with additional functionality that remains under development.

ASP.NET AJAX Server ExtensionsASP.NET AJAX Server Extensions

ASP.NET AJAXServer

Controls

ASP.NET AJAXServer

Controls

App Services Bridge

App Services Bridge

Web Services Bridge

Web Services Bridge

ASP.NET AJAX ArchitectureASP.NET AJAX Architecture

Server Server FrameworkFramework

Client Framework and ServicesClient Framework and Services

Client Script LibraryClient Script Library

Controls, Components

Controls, Components

Script CoreScript Core

Base Class LibraryBase Class Library

Component Model and UI FrameworkComponent Model and UI Framework

Browser Compatibility

Browser Compatibility

Client Application Services

Client Application Services

BrowserIntegration

BrowserIntegration

ASP.NET 2.0ASP.NET 2.0

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

ASP.NET AJAXASP.NET AJAXASP.NET PagesASP.NET Pages

ASP.NET AJAXASP.NET AJAXASP.NET PagesASP.NET Pages Web ServicesWeb ServicesWeb ServicesWeb Services

HTML, Script,HTML, Script,ASP.NET AJAXASP.NET AJAX

MarkupMarkup

HTML, Script,HTML, Script,ASP.NET AJAXASP.NET AJAX

MarkupMarkup

ServiceServiceProxiesProxies

ServiceServiceProxiesProxies

NAMENAMETitle | Group

Microsoft Corporation

DEMODEMOASP.NET AJAX PROJECT ASP.NET AJAX PROJECT TYPESTYPES

DEMODEMOASP.NET AJAX PROJECT ASP.NET AJAX PROJECT TYPESTYPES

DEVELOPMENT SCENARIOSDEVELOPMENT SCENARIOS

Server-centric Ajax Web DevelopmentIncremental 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 DevelopmentLeverage full power of script/DHTML

Provide richer and more interactive user experience

Build mash-ups, gadgets and other new immersive experiences

PARTIAL PAGE UPDATESPARTIAL PAGE UPDATES

<asp:UpdatePanel> controlEasily define “updatable” regions of a pageServer roundtrips become asynchronous ASP.NET AJAX handles all the infrastructureSupports Triggers that allow other controls to fire the Postback

<asp:UpdatePanel id=“updatepanel1” runat=“server”> <ContentTemplate>

<!-- This content will be dynamically updated! --> <asp:Calendar id=“calndr1” runat=“server”/>

<ContentTemplate></asp:UpdatePanel>

TRIGGERING POSTBACKSTRIGGERING POSTBACKS

Add Triggers to UpdatePanel to Enable Other Controls to Trigger the AsyncPostback

Controls outside the UpdatePanel can trigger a Postback

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1“ EventName="Click"/> </Triggers></asp:UpdatePanel>

ENHANCE EXISTING CONTROLSENHANCE EXISTING CONTROLS

Control ExtendersExtend 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:TextBox runat="server" ID="TextBox1" /><asp:AutoCompleteExtender runat="server" ID="AC1”

TargetControlID="TextBox1" ServicePath="AutoComplete.asmx“ServiceMethod="GetWords" Enabled="true" MinimumPrefixLength="1" />

SHOWING PROGRESSSHOWING PROGRESS

UpdateProgress ControlProvides feedback on the progress of partial-page rendering

<asp:UpdateProgress ID="UpdateProgress1“ runat="server"> <ProgressTemplate> Please Wait ... </ProgressTemplate> </asp:UpdateProgress>

NAMENAMETitle | Group

Microsoft Corporation

DEMODEMOUPDATEPANELUPDATEPANELDEMODEMOUPDATEPANELUPDATEPANEL

ASP.NET AJAX Client Script LibraryASP.NET AJAX Client Script LibraryScript core and base class libraryScript core and base class library

ASP.NET AJAX script core – a full type system for JavaScript

Classes and interfaces, inheritance, virtual and abstract methodsEnumerationsMulti-cast event handlers similar to .NET

Base class libraryStringBuilder, extensions to existing types SerializersDebugging and tracing classesNetworking

WORKING WITH TYPESWORKING WITH TYPES

Register Types Using Type MethodsType.RegisterNamespace

Type.RegisterClass

Type.RegisterInterface

Type.RegisterEnum

Enables Object Oriented Capabilities

Supports Single Inheritance

Type.registerNamespace("Samples.DinnerNow");

CREATING EXTENDER CONTROLSCREATING EXTENDER CONTROLS

Extend Existing Controls with new BehaviorsCreate 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 SERVICESWORKING WITH WEB SERVICES

ScriptManager Handles WebService AccessServices Collection has a ServiceReference

Server ASMX RequirementsReference to Microsoft.Web.Script.Services

[ScriptService] Attribute on Class

Inline Methods on ASPX can be called as Web Services

Add [WebMethod] Attribute to Method

<asp:ScriptManager runat="server" ID="scriptManager"> <Services> <asp:ServiceReference path="~/WebServices/SimpleWebService.asmx" /> </Services> </asp:ScriptManager>

WEBSERVICE FAILURESWEBSERVICE 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){ …}

NAMENAMETitle | Group

Microsoft Corporation

DEMODEMOUSING TYPESUSING TYPESDEMODEMOUSING TYPESUSING TYPES

ASP.NET AJAX Control ToolkitASP.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 componentsNot supported by Microsoft

This is a community project on CodePlex

Toolkit ControlsAccordion NoBot

AlwaysVisibleControl NumericUpDown

Animation PagingBulletedList

CascadingDropDown PasswordStrength

CollapsiblePanel PopupControl

ConfirmButton Rating

DragPanel ReorderList

DropDown ResizableControl

DropShadow RoundedCorners

DynamicPopulate Slider

FilteredTextBox TextBoxWatermark

HoverMenu ToggleButton

ModalPopup UpdatePanelAnimation

MutuallyExlcusiveCheckBox ValidatorCallout

NAMENAMETitle | Group

Microsoft Corporation

DEMODEMOAJAX CONTROL TOOLKITAJAX CONTROL TOOLKITDEMODEMOAJAX CONTROL TOOLKITAJAX CONTROL TOOLKIT