Tanapol PavadachochaiLead DeveloperGenxas

Songsak Channarukul, Ph.D.Assumption University Thaisharp.net founder

Introduction to ASP.NET AJAX

AJAX Sample

Partial RenderingEnabling AJAX with UpdatePanels

Optimizing UpdatePanels Usage

AJAX with Web Services

Logical Navigation

ASP.NET Control Toolkit

Core Architecture of ASP.NET AJAX

Asynchronous JavaScript and XML

Improving end-user perception and usability

Faster, smoother, intuitive

Visually appealing

Personalized

Improving network/bandwidth usage

Partial rendering

Light-weight web service calls

Improving development approach to scripting

Namespaces, interfaces, inheritance

Properties, events, dispose

Available at http://ajax.asp.net

ASP.NET AJAX v1.0

Baseline – will be integrated into ASP.NET

ASP.NET AJAX Futures CTP

Features that are not yet ready to be part of base product.

AJAX Control Toolkit

Built on ASP.NET AJAX, goal is to be community developed and supported

Adds AJAXy behavior to ASP.NET Controls

AJAX Sample

Partial rendering via UpdatePanels

Web services – AutoCompletionTextBox

Customized progress

Water Markup TextBox

Preserves postback programming model

UpdatePanels declare regions to update

Easy and declarative

Stateful (equivalent to a postback)

Init

Load State

Process Postback

Load

Postback Events

Save State

PreRender

Render

Unload

PageRequestManager

Form Submit

Form Data + Custom Header

Partial Rendering Response

Click

Enable AJAX with UpdatePanels

Partial rendering via UpdatePanels

Better user experience

Ease of usage

Server control

More efficiency on network traffic (have better way to gain more efficiency)

Optimizing UpdatePanels Usage

Optimize what to update and when

UpdateMode=“Conditional”

Use triggers, Update() for granular control

Postbacks are still postbacks

Which user actions should be postbacks?

Carefully evaluate AutoPostBack

Consider alternative means of interactivity

Data and operations exposed as web services

Support for SOAP (.asmx) and RESTful models

JSON format, object serialization

Higher-level networking stack

Sys.Net.WebRequest – abstracts XMLHttpRequest

Script proxies for .asmx enable simple method call model

Ideal for stateless requests

Lean wire format

Generally useful in client-centric apps

Alternative to partial updates where appropriate

Complementary models

Partial rendering – when you need state, server-side control logic

Pros: easy to use, control properties, page state

Cons: full postback, one at a time

Web services – when your logic is stateless

Pros: light-weight, parallel

Cons: need to write necessary code to package UI as parameters

AJAX with Web Services

Postbacks flood navigation history with intermediate steps

AJAX-based pages often have no history

Back button goes the whole way back to the previous page

How can we improve navigation?

App defines a set of logical views

App controls which updates transition between views

Logical views added to navigation history

Bonus: bookmarking and indexing

Logical Navigation

Joint project between the community and

Microsoft

Built upon the ASP.NET 2.0 AJAX Extensions

Aims to be the biggest and best collection of

web-client components available

ASP.NET AJAX Control Toolkit

General:

Building AJAX apps using ASP.NET –

Page developers get rich controls and behaviors

Component developers get a well-orchestrated framework

Building rich client apps

Server and Client components

Client FX (JS)

Type System,Type safety, OO concepts, Browser compatComponent, Control, BehaviorService & app service proxies

Server FX

ExtenderControlScriptControl

ScriptManagerUpdatePanel ..

Type.registerNamespace(‘Custom’)

Custom.MyClass = function(..) {

Custom.MyClass.initializeBase(..)

}

Custom.MyClass.prototype = {

get/set_propertyMember: function()

methodMember: function(),

add/remove_eventMember: function()

}

Custom.MyClass.registerClass(

‘Custom.MyClass’, Sys.UI.Control)

new Error.argumentNull(..)

Sys.UI.Control.isInstanceOfType(

myClass_instance)

NamespacesCtor

‘Class members’

Define class and inheritance

‘typed’ exceptions

Reflection-like APIs

Debug and release scripts for development and production environments

ScriptManager: Manages the AJAX app in the server

Declarative and programmatic script references

Handles scripts for:

Debug and release patterns

Path-based and assembly-based script resources

..

ExtenderControl, WebScriptControl,

ScriptDescriptors for ‘instance’ scripts

ScriptReferences for ‘library’ scripts

AJAX enables rich, next-generation apps

ASP.NET AJAX makes it easy

Integrate AJAX patterns into ASP.NET model

Simple out-of-the-box functionality

Solid platform with extensibility to go further

1.0 shipped! Ready for primetime