Stephen WaltherMicrosoftStephen.Walther@Microsoft.com

ASP.NET AJAX

Accordion

AlwaysVisibleControl

Animation

AutoComplete

Calendar

CascadingDropDown

CollapsiblePanel

ConfirmButton

ASP.NET AJAX

AjaxControlToolkit-ScriptFilesOnly.zip

ASP.NET AJAX

http://www.ASP.net/ajax

Introduction

Web Application Experience in 1993

Introduction

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

Introduction

Super Fancy Ajax Application

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

Client-Side Application Model

renders once

Ajax Calls (services)

Less roundtrips

Less bandwidth

Less work on the web server

More responsive

Why AJAX Applications Are Good

Two developers: an ASP.NET and JavaScript developer. Ask each developer when a button click event happens…

Why AJAX Applications are Good

Overview: 3 Ways to Build an Application

1. Server-Side ASP.NET

2. Server-Side ASP.NET AJAX

3. Client-Side ASP.NET AJAX

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

Server-Side ASP.NET with No Ajax

• Controls• Code• Work

Web Server Web Browser

renders

postback

Creating a Master/Detail Page with 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

Server-Side ASP.NET

Server-Side ASP.NET AJAXwith UpdatePanel

• Controls• Code• Work

Web Server Web Browser

renders

sneakypostback

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

Server-Side ASP.NET AJAX

BenefitsSafe: No Browser Compatibility Issues

Powerful: Use any programming language

Compatible: 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

Client-Side ASP.NET AJAX Controls

Web Server Web Browser

renders

sneakypostback

• Code• Work • Controls

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

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

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

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)

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)

Rude Objections(impediments to a perfect future)

Browser Back/Forward button

Accessibility

Search Engine Optimization (SEO)

JavaScript disabled (Mobile Devices)

Creating a Master/Detail Page that supports JavaScript failover

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.

Creating a Master/Detail Page with Pure HTML

Additional ASP.NET AJAX 4.0 Features

Declarative Client-Side Controls

Command Bubbling

Live Bindings

Saving and Updating Data

Declarative Controls

XML Namespacesxmlns:sys=“javascript:Sys”

xmlns:dataview=“javascript:Sys.UI.DataView”

sys:activateActivates declarative controls

sys:attachAttaches a control to a DOM element

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

Command Bubbling

sys:commandA command name such as select, edit, and so on

sys:commandargumentA command argument such as 78

Sys:commandtargetA 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

Select Command

DataView PropertiesselectedIndex

initialSelectedIndex

selectedData

selectedItemClass

Creating a Master/Detail Page with Command Bubbling

Live Bindings

{{ Title }} Used to execute JavaScript in the context of the current data item

{binding Title }WPF style binding syntax

Supports live binding

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}” />

Creating a Master/Detail Page with Live Bindings

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

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

Creating a Master/Detail Page that saves data

Using ADO.NET Data Services

http://www.microsoft.com/india/msdn

Conclusion

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

My Blog

StephenWalther.com

CodePlex ASP.NET Previews

aspnet.CodePlex.com

Official ASP.NET Website

www.ASP.net/ajax

Resources

http://www.microsoft.com/india/msdn

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)

Track Resources

Resource 1

Resource 2

Resource 3

Resource 4

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