DEV302: ASP.NET AJAX Patterns

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

Tanapol Pavadachochai Lead Developer Genxas

Introduction to ASP.NET AJAX AJAX Sample Partial Rendering Enabling 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

Click

Form Submit

PageRequestManager

Form Data + Custom Header

Load Postback Events Save State PreRender

Partial Rendering Response

Render

Unload

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)

Server FX

Type System,Type safety, OO concepts, Browser compat Component, Control, Behavior Service & app service proxies

ExtenderControl ScriptControl ScriptManager UpdatePanel ..

Type.registerNamespace(‘Custom’) Custom.MyClass = function(..) { Custom.MyClass.initializeBase(..) }

Namespaces Ctor

Custom.MyClass.prototype = { get/set_propertyMember: function() methodMember: function(), add/remove_eventMember: function() } Custom.MyClass.registerClass( ‘Custom.MyClass’, Sys.UI.Control)

‘Class members’

new Error.argumentNull(..)

‘typed’ exceptions

Sys.UI.Control.isInstanceOfType( myClass_instance)

Reflection-like APIs

Define class and inheritance

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