This document provides an overview of ASP.NET AJAX and different approaches to building web applications with it, including server-side ASP.NET, server-side ASP.NET AJAX using UpdatePanels, and client-side ASP.NET AJAX. It discusses features of client-side ASP.NET AJAX like declarative controls, command bubbling, live bindings, and using templates with JSON. It also covers additional ASP.NET AJAX 4.0 features and using data sources like ADO.NET Data Services. The document encourages embracing client-side development for better performance and user experience.

2. Stephen Walther
Microsoft
Stephen.Walther@Microsoft.com

3. ASP.NET AJAX
Accordion
AlwaysVisibleControl
Animation
AutoComplete
Calendar
CascadingDropDown
CollapsiblePanel
ConfirmButton

4. ASP.NET AJAX
AjaxControlToolkit-
ScriptFilesOnly.zip

5. ASP.NET AJAX
http://www.ASP.net/ajax

6. Introduction
Web Application Experience in 1993

7. Introduction
Brendan Eich’s Home Page (the inventor of JavaScript)

8. Introduction
Super Fancy Ajax Application

9. Different Types of Web Applications
ASP.NET Server-Side
Pages are rendered on the server and updated
through postbacks
ASP.NET Server-Side AJAX (AJAH)
Pages are rendered on the server and updated
through AJAX requests for HTML
ASP.NET Client-Side AJAX
Pages are rendered on the client and updated
through Ajax requests for JSON

10. Client-Side Application Model
renders once
Ajax Calls (services)

11. Why AJAX Applications Are Good
Less roundtrips
Less bandwidth
Less work on the web server
More responsive

12. Why AJAX Applications are Good
Two developers: an ASP.NET and JavaScript
developer. Ask each developer when a button
click event happens…

13. Overview: 3 Ways to Build an Application
1. Server-Side ASP.NET
2. Server-Side ASP.NET AJAX
3. Client-Side ASP.NET AJAX

14. Overview: Features of Client-Side ASP.NET
AJAX
1. Declarative Client-Side Controls
2. Command Bubbling
3. Live Bindings
4. Saving and Updating Data
5. Using Templates with JSONP

15. Server-Side ASP.NET
with No Ajax
• Controls renders
• Code
• Work
postback
Web Server Web Browser

16. Creating a Master/Detail Page with
Server-Side ASP.NET

17. Server-Side ASP.NET
Benefits
Safe: No Browser Compatibility Issues
Powerful: Use any programming language
Drawbacks
Responsiveness: User must wait for a postback
Performance: All page content must be rendered
for each interaction

18. Server-Side ASP.NET AJAX
with UpdatePanel
• Controls renders
• Code
• Work
sneaky
postback
Web Server Web Browser

19. Creating a Master/Detail Page with
Server-Side ASP.NET AJAX

20. Server-Side ASP.NET AJAX
Benefits
Safe: No Browser Compatibility Issues
Powerful: Use any programming language
Compatible: Retrofit existing ASP.NET applications
Drawbacks
Responsiveness: User must wait for a postback (no
simultaneous Ajax)
Performance: (most) page content must be rendered for
each interaction

21. Client-Side ASP.NET AJAX Controls
• Code
renders
• Work
• Controls
sneaky
postback
Web Server Web Browser

22. Creating a Master/Detail Page
with Client-Side AJAX Controls

23. Client-Side ASP.NET AJAX Controls
Perfection Reached!
Benefits
Responsive: Events happen when they
happen
Performance: Only necessary content is
passed between client and server
Clean separation of content and
behavior

24. Data Sources
ASP.NET AJAX is compatible with anything
that exposes JSON:
ASMX Web Services
WCF Web Services
HTTP Handlers
JavaScript arrays
ASP.NET MVC JSonResult
ADO.NET Data Services
REST Services
.NET RIA Services

25. Why Templates are Good
for (var i=0;i < data.length;i++)
{
row = quot;<tr>quot;;
row += quot;<td>quot; + data[i].Title + quot;</td>quot;;
row += quot;<td>quot; + data[i].Director + quot;</td>quot;;
table += row;
}
$get(quot;movieBodyquot;).innerHTML = table;
(Evil)

26. Why Templates are Good
movieView.set_data(data);
<tbody id=quot;movieBodyquot; class=quot;sys-templatequot;>
<tr>
<td>{{ Title }}</td>
<td>{{ Director }}</td>
<td>{{ DateReleased.localeFormat(quot;Dquot;) }}</td>
</tr>
</tbody>
(Good)

27. Rude Objections
(impediments to a perfect future)
Browser Back/Forward button
Accessibility
Search Engine Optimization (SEO)
JavaScript disabled (Mobile Devices)

28. Creating a Master/Detail Page that
supports JavaScript failover

29. Technology Independent
Client-Side ASP.NET AJAX…
Works with any modern browser including
IE, Firefox, Chrome, Safari, and Opera.
Works with any back-end technology that exposes
JSON (not dependent on ASP.NET)
Works with HTML pages, no need for ASP.NET.

30. Creating a Master/Detail Page
with Pure HTML

31. Additional ASP.NET AJAX 4.0 Features
Declarative Client-Side Controls
Command Bubbling
Live Bindings
Saving and Updating Data

32. Declarative Controls
XML Namespaces
xmlns:sys=“javascript:Sys”
xmlns:dataview=“javascript:Sys.UI.DataView”
sys:activate
Activates declarative controls
sys:attach
Attaches a control to a DOM element

33. Creating a Master/Detail Page with
Declarative Client-Side Controls

34. Command Bubbling
sys:command
A command name such as select, edit, and so on
sys:commandargument
A command argument such as 78
Sys:commandtarget
A control or name of a control that is the target of the
command.
onCommand
DataView event handler that you can use to handle a
custom command

35. Select Command
DataView Properties
selectedIndex
initialSelectedIndex
selectedData
selectedItemClass

36. Creating a Master/Detail Page with
Command Bubbling

37. Live Bindings
{{ Title }}
Used to execute JavaScript in the context of the
current data item
{binding Title }
WPF style binding syntax
Supports live binding

38. Live Bindings
One-way, One-time - The data value is updated only the first time that
data binding is invoked.
{{ CompanyName }}
One-way, Live - If the underlying data item is modified, the rendered
data value is updated automatically.
<span>{binding CompanyName}</span>
Two-way, Live - If the user changes the data value, the value of the
underlying data item is updated. In addition, if the data item is modified
from another source, the rendered data value is updated.
<input type=“text” value=“{binding CompanyName}” />

39. Creating a Master/Detail Page
with Live Bindings

40. Data Sources
ASP.NET AJAX is compatible with anything
that exposes JSON:
ASMX Web Services
WCF Web Services
HTTP Handlers
JavaScript arrays
ASP.NET MVC JSonResult
ADO.NET Data Services
REST Services
.NET RIA Services

41. DataContext Class
Provides read/write access to data
Supports change tracking in the browser
Send multiple changes in a single batch to the
server
Use AdoNetDataContext class with ADO.NET Data
Services

42. Creating a Master/Detail Page that saves
data

43. Using ADO.NET Data Services

45. Conclusion
Embrace the client-side!
For better performance and a better user
experience, start writing client-side ASP.NET AJAX
applications.

46. Resources
My Blog
StephenWalther.com
CodePlex ASP.NET Previews
aspnet.CodePlex.com
Official ASP.NET Website
www.ASP.net/ajax

49. Related Content
Breakout Sessions (session codes and titles)
Interactive Theater Sessions (session codes and titles)
Hands-on Labs (session codes and titles)
Hands-on Labs (session codes and titles)

50. Track Resources
Resource 1
Resource 2
Resource 3
Resource 4

51. © 2009 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.