taking ajax to the next level
DESCRIPTION
Slides from ASP.NET AJAX 4.0 Talk Slides from MIX 09 talk by Stephen Walther. Demonstrates ASP.NET AJAX client templates and controls. .TRANSCRIPT
![Page 1: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/1.jpg)
![Page 2: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/2.jpg)
ASP.NET: Taking Ajax to the Next LevelStephen WaltherSenior Program ManagerMicrosoft Corporation
![Page 3: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/3.jpg)
Introduction
Web Application Experience in 1993
![Page 4: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/4.jpg)
Introduction
Brendan Eich’s Home Page (the inventor of JavaScript)
![Page 5: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/5.jpg)
Introduction
Super Fancy Ajax Application
![Page 6: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/6.jpg)
ASP.NET Server-SidePages 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 AJAXPages are rendered on the client and updated through Ajax requests for JSON
Different Types of Web Applications
![Page 7: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/7.jpg)
Client-Side Application Model
renders once
Ajax Calls (services)
![Page 8: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/8.jpg)
Less roundtripsLess bandwidthLess work on the web serverMore responsive
Why AJAX Applications Are Good
![Page 9: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/9.jpg)
Two developers: an ASP.NET and JavaScript developer. Ask each developer when a button click event happens…
Why AJAX Applications are Good
![Page 10: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/10.jpg)
Overview: 3 Ways to Build an Application
1. Server-Side ASP.NET
2. Server-Side ASP.NET AJAX
3. Client-Side ASP.NET AJAX
![Page 11: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/11.jpg)
Overview: Features of Client-Side ASP.NET AJAX
1. Declarative Client-Side Controls
2. Command Bubbling
3. Live Bindings
4. Saving and Updating Data
![Page 12: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/12.jpg)
Server-Side ASP.NET with No Ajax
• Controls• Code• Work
Web Server Web Browser
renders
postback
![Page 13: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/13.jpg)
Creating a Master/Detail Page with Server-Side ASP.NET
demo
![Page 14: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/14.jpg)
BenefitsSafe: No Browser Compatibility IssuesPowerful: Use any programming language
DrawbacksResponsiveness: User must wait for a postbackPerformance: All page content must be rendered for each interaction
Server-Side ASP.NET
![Page 15: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/15.jpg)
Server-Side ASP.NET AJAXwith UpdatePanel
• Controls• Code• Work
Web Server Web Browser
renders
sneakypostback
![Page 16: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/16.jpg)
Creating a Master/Detail Page with Server-Side ASP.NET AJAX
demo
![Page 17: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/17.jpg)
Server-Side ASP.NET AJAXBenefits
Safe: No Browser Compatibility IssuesPowerful: Use any programming languageCompatible: Retrofit existing ASP.NET applications
DrawbacksResponsiveness: User must wait for a postback (no simultaneous Ajax)Performance: (most) page content must be rendered for each interaction
![Page 18: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/18.jpg)
Client-Side ASP.NET AJAX Controls
Web Server Web Browser
renders
sneakypostback
• Code• Work • Controls
![Page 19: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/19.jpg)
Creating a Master/Detail Page with Client-Side AJAX Controls
demo
![Page 20: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/20.jpg)
Client-Side ASP.NET AJAX Controls
Perfection Reached!Benefits
Responsive: Events happen when they happenPerformance: Only necessary content is passed between client and serverClean separation of content and behavior
![Page 21: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/21.jpg)
Data SourcesASP.NET AJAX is compatible with anything that exposes JSON:
ASMX Web ServicesWCF Web ServicesHTTP HandlersJavaScript arraysASP.NET MVC JSonResultADO.NET Data Services REST Services.NET RIA Services
![Page 22: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/22.jpg)
Why Templates are Goodfor (var i=0;i < data.length;i++){ row = "<tr>"; row += "<td>" + data[i].Title + "</td>"; row += "<td>" + data[i].Director +
"</td>"; table += row;}
$get("movieBody").innerHTML = table;
(Evil)
![Page 23: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/23.jpg)
Why Templates are GoodmovieView.set_data(data);
<tbody id="movieBody" class="sys-template"><tr> <td>{{ Title }}</td> <td>{{ Director }}</td>
<td>{{ DateReleased.localeFormat("D") }}</td>
</tr></tbody>
(Good)
![Page 24: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/24.jpg)
Rude Objections(impediments to a perfect future)
Browser Back/Forward buttonAccessibilitySearch Engine Optimization (SEO)JavaScript disabled (Mobile Devices)
![Page 25: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/25.jpg)
Creating a Master/Detail Page that supports JavaScript failover
demo
![Page 26: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/26.jpg)
Technology IndependentClient-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.
![Page 27: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/27.jpg)
Creating a Master/Detail Page with Pure HTML
demo
![Page 28: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/28.jpg)
Additional ASP.NET AJAX 4.0 Features
Declarative Client-Side ControlsCommand BubblingLive BindingsSaving and Updating Data
![Page 29: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/29.jpg)
Declarative ControlsXML Namespaces
xmlns:sys=“javascript:Sys”xmlns:dataview=“javascript:Sys.UI.DataView”
sys:activateActivates declarative controls
sys:attachAttaches a control to a DOM element
![Page 30: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/30.jpg)
Creating a Master/Detail Page with Declarative Client-Side Controls
demo
![Page 31: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/31.jpg)
Command Bubblingsys:command
A command name such as select, edit, and so onsys:commandargument
A command argument such as 78Sys:commandtarget
A control or name of a control that is the target of the command.
onCommandDataView event handler that you can use to handle a custom command
![Page 32: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/32.jpg)
Select CommandDataView Properties
selectedIndex initialSelectedIndexselectedDataselectedItemClass
![Page 33: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/33.jpg)
Creating a Master/Detail Page with Command Bubbling
demo
![Page 34: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/34.jpg)
Live Bindings{{ Title }}
Used to execute JavaScript in the context of the current data item
{binding Title }WPF style binding syntaxSupports live binding
![Page 35: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/35.jpg)
Live BindingsOne-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}” />
![Page 36: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/36.jpg)
Creating a Master/Detail Page with Live Bindings
demo
![Page 37: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/37.jpg)
Data SourcesASP.NET AJAX is compatible with anything that exposes JSON:
ASMX Web ServicesWCF Web ServicesHTTP HandlersJavaScript arraysASP.NET MVC JSonResultADO.NET Data Services REST Services.NET RIA Services
![Page 38: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/38.jpg)
DataContext ClassProvides read/write access to dataSupports change tracking in the browserSend multiple changes in a single batch to the serverUse AdoNetDataContext class with ADO.NET Data Services
![Page 39: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/39.jpg)
Creating a Master/Detail Page that saves data
demo
![Page 40: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/40.jpg)
Using ADO.NET Data Services
demo
![Page 41: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/41.jpg)
Image Organizer
![Page 42: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/42.jpg)
ConclusionEmbrace the client-side! For better performance and a better user experience, start writing client-side ASP.NET AJAX applications.
![Page 43: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/43.jpg)
CodePlex ASP.NET Previewsaspnet.CodePlex.com
Official ASP.NET Websitewww.ASP.net/ajax
Resources
![Page 44: Taking AJAX to the Next Level](https://reader036.vdocuments.us/reader036/viewer/2022081518/546c9215b4af9f612c8b5046/html5/thumbnails/44.jpg)
© 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.