Real-World Ajax with ASP.NETNikhil KothariSoftware ArchitectMicrosoft Corporation

Session Overview

Quick overview of ASP.NET AjaxAjax deep-dive

Cover some key real-world problemsDiscuss solutions, patterns, opportunitiesLots of demosAnd more of ASP.NET Ajax

ASP.NET Ajax Overview

Partial renderingUpdate a portion of the page without writing any script

Ajax Control ToolkitOpen source project at http://www.codeplex.com/AtlasControlToolkitLots of Ajax-enabled server controls

Web servicesExposing web services as JSON servicesSuper simple access via script proxies and networking stack

Script Framework (MicrosoftAjax.js)Type system, and general framework for creating Ajax apps

Simple Ajax with ASP.NETPartial RenderingWeb ServicesControl Toolkit

demo

Ajax in the Real World

Ajax has become mainstreamUsers have come to expect itHowever, subtle use of Ajax is usually effectiveDon’t have to go overboard with flashy apps

It is about creating better user experiences

Fluid user interface matching user task flowsRich data visualizationIntuitive data entry

It is not just about updating page contents by issuing xmlhttp requests

Ajax Challenges

Script complexityIndexability and SEONavigation and bookmarkabilityIncreasing user expectationsDiagnostics/Tracing/MonitoringPerformanceAccessibilityBrowser API inconsistencies…

Script Complexity

Increasing complexity with increased Ajax features

Use appropriate framework featuresScript components, encapsulation of logicOOPSeparation of content, presentation, and logic

Partial rendering in ASP.NETBehaviors in ASP.NET Ajax

Re-use and encapsulation mechanismRepresent script logic that you attach to markupUsable in a variety of scenariosEnable better designer/developer workflow

Tackling Script ComplexityCreating and Using Behaviors

demo

Navigation and Bookmarkability

Ajax updates don’t affect the browser history

Breaks the back buttonMight also break bookmarkability

It is an opportunity!You have a clean slateAdd your own history points to create a better navigation model than regular post-backs

ASP.NET Ajax History FeatureVery simple API to abstract browser “nuances”Call addHistoryState()Handle the navigated event to detect state changesUpdates URL fragment to also provide bookmarkability

Restoring Navigation and BookmarkabilityLogical History

demo

Ajax and Indexability

Preserving indexability is a must for most sites

Relies on presence of static data within pagesAjax apps often fetch data dynamicallyApp structure and logic isn’t useful for searching

An alternate Ajax patternEmbed data statically within the pageMake every page of data independently discoverable via sitemapsScript consumes data and creates interactive presentationScript uses xmlhttp to implement paging as well

Preserving Indexability

Embedding Data in the PageSitemaps

demo

Search Engine View

<div id=“photoList”> <div> <h1 class=“title”>…</h1> <img class=“photo” src=“…” alt=“…” /> </div> </div><div id=“mapFrame” />

Indexability through HTML Data

<script>document.write(‘<div style=“display: none”>’);</script> <div id=“photoList”> <div> <h1 class=“title”>…</h1> <img class=“photo” src=“…” alt=“…” /> </div> </div><script>document.write(‘</div>’);</script><div id=“mapFrame” /><script> // Script to create map</script>

Script-enabled Browser View

<div style=“display: none”> <div id=“photoList”> … </div></div><div id=“mapFrame” /><script> // Script to create map</script>

Leveraging New Capabilities

Increasing user expectations for functionality

Ability to work with local filesExpectations around faster applicationsDeeply integrating media experiences

Using islands of SilverlightCan be used incrementally to light up existing Ajax appsBalancing reach and capabilitiesNew capabilities to your application

CLR-based execution, threads for background workAccess to local storage and filesVector graphics, media

Going Beyond Ajax

Lighting up your Ajax Application with Silverlight 2

demo

Resources

ASP.NET Ajaxhttp://ajax.asp.netDocs, how-to videos, forums etc.

Ajax Control Toolkithttp://www.codeplex.com/AtlasControlToolkit

My Bloghttp://www.nikhilk.netSlides + SamplesMy Contact Form

Summary

Prioritize creating better user experiences

Think about where to apply Ajax in your applications

Approach Ajax systematicallySeparate content and behavior

Apply established patterns for addressing key Ajax challengesLeverage ASP.NET Ajax

Solutions and framework for creating real-world Ajax apps

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Error Logging and Diagnostics

Ajax apps have a lot more happening on the clientTracking script execution in production

Handling errors internally and logging themEnd-user shouldn’t ever see script errorsOther tracing and tracking scenarios

Error Logging

Handling Errors and Reporting

demo

Performance

Broad discussion topic with several facets

Script downloading/bandwidth consumptionScript execution timePerception – get some rendering quick…

ScriptManager.LoadScriptsBeforeUIOne upcoming ASP.NET Feature:

Script combiningReduces the number of script downloads per page

Performance

Script Combining

demo