ASP.NET AJAX (Juggling) PatternsSteve Marx

Technical EvangelistMicrosoft Corporation

Session Objectives

A Deeper look at AJAX and ASP.NET AJAXPatterns for implementing AJAX scenariosUsing partial rendering and Web services togetherEnhancing page navigation modelUnobtrusive inclusion of script functionality

Lots of demos...

AJAX: Beyond the HypeImproving end-user perception and usability

Faster, smoother, intuitiveVisually appealingPersonalized

Improving network/bandwidth usagePartial renderingLight-weight web service calls

Improving development approach to scriptingNamespaces, interfaces, inheritanceProperties, events, dispose

DEMO

AJAX =Asynchronous Juggling And XAML

Partial Rendering• Preserves postback programming model– UpdatePanels declare regions to update– Easy and declarative– Stateful (equivalent to a postback)

Init

Load State

Process PostbackLoad

Postback Events

Save State

PreRender

Render

Unload

PageRequestManager

Form Submit

Form Data + Custom Header

Partial Rendering Response

Click

DEMO

Optimizing UpdatePanel Usage

What did we see?• 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

Logical Navigation• 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

DEMO

Logical Navigation

Structured Scripting• Increased client UI logic requires structured

approach to scripting– No more ad-hoc global variables, functions– OOP-like scripting system

• Script separate from content– Better designer/developer workflow– Easier to preserve core behavior when script is disabled– “Behaviors” enable unobtrusive script attachment

DEMO

SelectableBehavior

Web Services• 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

DEMO

Incorporating Web Services

UpdatePanel or Services?• 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

What about search?

• We have data in a database• I want Google/Live/Yahoo to see it…• But there’s JavaScript in between!

• Answer: search sitemaps

DEMO

Let’s be searchable!

Summary• 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

Resources• AJAX homepage: http://ajax.asp.net

• Blogs– http://smarx.com – me– http://nikhilk.net – Nikhil Kothari– http://weblogs.asp.net/scottgu – Scott Guthrie– http://weblogs.asp.net/bleroy – Bertrand LeRoy– http://blogs.msdn.com/brada – Brad Abrams– http://www.shankun.com – Shanku Niyogi