Stephen Walther Senior Program Manager Microsoft Corporation Introduction Web Application Experience in 1993 Introduction Brendan Eichs Home Page the inventor of JavaScript Introduction ID: 386459
Download Presentation The PPT/PDF document "ASP.NET: Taking Ajax to the Next Level" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
ASP.NET: Taking Ajax to the Next Level
Stephen Walther
Senior Program Manager
Microsoft CorporationSlide2
Introduction
Web Application Experience in 1993Slide3
Introduction
Brendan
Eich’s
Home Page (the inventor of JavaScript)Slide4
Introduction
Super Fancy Ajax ApplicationSlide5
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
Different Types of Web ApplicationsSlide6
Client-Side Application Model
renders once
Ajax Calls (services)Slide7
Less roundtrips
Less bandwidth
Less work on the web server
More responsive
Why AJAX Applications Are GoodSlide8
Two developers: an ASP.NET and JavaScript developer. Ask each developer when a button click event happens…
Why AJAX Applications are Good Slide9
Overview:
3
Ways to Build an Application
Server-Side ASP.NET
Server-Side ASP.NET AJAX
Client-Side ASP.NET AJAXSlide10
Overview: Features of Client-Side ASP.NET AJAX
Declarative Client-Side Controls
Command Bubbling
Live Bindings
Saving and Updating Data Slide11
Server-Side ASP.NET
with No Ajax
Controls
Code
Work
Web Server
Web Browser
renders
postbackSlide12
Creating a Master/Detail Page with Server-Side ASP.NET
demo Slide13
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
Server-Side ASP.NETSlide14
Server-Side ASP.NET AJAX
with UpdatePanel
Controls
Code
Work
Web Server
Web Browser
renders
sneaky
postbackSlide15
Creating a Master/Detail Page with Server-Side ASP.NET AJAX
demo Slide16
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 interactionSlide17
Client-Side ASP.NET AJAX Controls
Web Server
Web Browser
renders
sneaky
postback
Code
Work
ControlsSlide18
Creating a Master/Detail Page with Client-Side AJAX Controls
demoSlide19
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 behaviorSlide20
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 ServicesSlide21
Why Templates are Good
for (
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)Slide22
Why Templates are Good
movieView.set_data
(data);
<
tbody
id="
movieBody
" class="sys-template">
<
tr
>
<td>{{ Title }}</td>
<td>{{ Director }}</td>
<td>{{
DateReleased.localeFormat
("D") }}</td>
</
tr
>
</
tbody
>
(Good)Slide23
Rude Objections
(impediments to a perfect future)
Browser Back/Forward button
Accessibility
Search Engine Optimization (SEO)
JavaScript disabled (Mobile Devices)Slide24
Creating a Master/Detail Page that supports JavaScript failover
demoSlide25
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.Slide26
Creating a Master/Detail Page with Pure HTML
demoSlide27
Additional ASP.NET AJAX 4.0 Features
Declarative Client-Side Controls
Command Bubbling
Live Bindings
Saving and Updating DataSlide28
Declarative Controls
XML Namespaces
xmlns:sys
=“
javascript:Sys
”
xmlns:dataview
=“javascript:Sys.UI.DataView”
sys:activateActivates declarative controlssys:attach
Attaches a control to a DOM elementSlide29
Creating a Master/Detail Page with Declarative
Client-Side Controls
demoSlide30
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 commandSlide31
Select Command
DataView
Properties
selectedIndex
initialSelectedIndex
selectedData
selectedItemClassSlide32
Creating a Master/Detail Page with Command Bubbling
d
emoSlide33
Live Bindings
{{ Title }}
Used to execute JavaScript in the context of the current data item
{binding Title }
WPF style binding syntax
Supports live bindingSlide34
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
}” />
Slide35
Creating a Master/Detail Page with Live Bindings
demoSlide36
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 ServicesSlide37
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 ServicesSlide38
Creating a Master/Detail Page that saves data
demoSlide39
Using ADO.NET Data Services
demoSlide40
Image OrganizerSlide41
Conclusion
Embrace the client-side!
For better performance and a better user experience, start writing client-side ASP.NET AJAX applications.Slide42
CodePlex
ASP.NET Previews
aspnet.CodePlex.com
Official ASP.NET Website
www.ASP.net/ajax
ResourcesSlide43
©
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.Slide44