ASP.NET AJAX Futures

Bertrand Le RoySenior Program Manager LeadMicrosoft Corporation

PC32

Session Objectives Understand what AJAX is Show how Microsoft AJAX is being used today Understand the “pure” AJAX model Introduce the new AJAX features in ASP.NET 4.0

(client data, client templates, declarative markup, bindings, command bubbling, etc.)

Key Takeaways ASP.NET AJAX development is more

active than ever Client data-driven UI is easier than ever

Objectives And Takeaways

What Is AJAX All About?Server AJAX versus "pure" AJAX

Initial request: HTML

HTMLForm POST

HTML + JSON

JSONJSON

Rendering

Rendering

Server AJAX

“Pure” AJAX

UpdatePanel Server Controls and Extenders Developers shielded from JavaScript Client-focused development possible

but less familiar

Microsoft AJAX TodayA server-side focus

UpdatePanel

Bertrand Le RoySenior Program Manager LeadASP.NET

demo

It's all about the standard browser No plug-in necessary Network payload is way smaller

(data < HTML, no ViewState round-tripping) Less round-tripping to the server More reactive UI

The “Pure AJAX” ModelWhy it matters

ASP.NET AJAX 4.0A client application model

Client-side applications get a lot easier Server provides JSON data, not HTML Client data sources Client template rendering Live bindings Declarative instantiation

Client DataFrom Web services to plain JavaScript data

Plain JavaScript data: Arrays and objects Any JSON Web service

.asmx WCF HttpHandler JSONResult etc.

ADO.NET Data Services DataSource control Server data gets represented on the client

as plain JavaScript objects

Client TemplatesSimple rendering on the client

On the server:<ItemTemplate> <li><%# Eval("Name") %></li></ItemTemplate>

On the client:<lu class=“sys-template”> <li>{{ Name }}</li></lu>

Client TemplatesSimple rendering on the client

Our design goals Performance Simplicity and readability Security XHTML (if you care about that) Easily embed data into markup: {{ Name }} Default data context is the current data item Expression language is JavaScript:

{{BirthDate.localeFormat(“dd/MM/yyyy”)}} Interspersed code and markup Declarative behavior and events

Namespaces Components Controls and Behaviors $create(Sys.UI.DataView,

{serviceUri: “../AdventureWorksAdo.svc”},{},{}, $get(“productListView”));equivalent to:var dv = new Sys.UI.DataView($get(“productListView”));dv.set_serviceURI(“../AdventureWorksAdo.svc”);dv.initialize();

The Microsoft AJAX LibraryA component model for the browser

The Microsoft AJAX LibraryA component model for the browser

Namespaces Components Controls and Behaviors $create shortcut and the equivalent code with new DataView control renders data using a template

Repeater if data is an array Details view if data is an object

DataSource component integrates data sources .asmx WCF ADO.NET Data Services etc.

Client Templates Bertrand Le Roy

Senior Program Manager LeadASP.NET

demo

Declarative ComponentsExtending markup semantics

Instantiate controls and behaviors from markup XHTML-compliant markup Registration:

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

<div sys:attach=“dataview”></div> Setting properties:

dataview:serviceuri=“AdventureWorksAdo.svc” No JavaScript

Declarative Instantiation Bertrand Le Roy

Senior Program Manager LeadASP.NET

demo

Command BubblingA simpler approach to building interactive UI

Similar to the server-side concept<asp:button commandName=“select” … /><button sys:command=“select” … />

Associates commands with UI elements Commands bubble up the DOM Controls handle commands they

understand No JavaScript

Command Bubbling Bertrand Le Roy

Senior Program Manager LeadASP.NET

demo

Live BindingsFrom data to UI and back

WPF-like syntax<span>{binding Name}</span><input value=“{binding Name}” … />

They really are live Reflect changes live from data Reflect changes live back to data

from user input Changes get instantly propagated No round-trip to the server

Convert and ConvertBack functions No JavaScript

Live Bindings

Bertrand Le RoySenior Program Manager LeadASP.NET

demo

What We’ve LearnedA client data drill-down

Getting data from ADO.NET Data Services Formatting data into HTML using templates Declaratively instantiating components Bubbling commands Binding UI to data

ASP.NET AJAX development is more active than ever

Client data-driven UI is easier than ever

What Else In ASP.NET AJAX 4.0?…and beyond?

Client data Sorting, pagination, and filtering Automatically sending changes to the server ASPX server integration

More controls in the AJAX Control Toolkit Search engine optimization jQuery Splitting the framework into smaller pieces

Download the latest ASP.NET Previewshttp://www.codeplex.com/aspnet

ASP.NET official Web sitehttp://www.asp.net

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

Blogshttp://weblogs.asp.net/bleroyhttp://blogs.msdn.com/scottguhttp://www.hanselman.com/bloghttp://weblogs.asp.net/infinitiesloop

October 2008 MSDN Articlehttp://msdn.microsoft.com/en-us/magazine/cc972638.aspx

Learning MoreLinks

Evals & Recordings

Please fill

out your

evaluation for

this session at:

This session will be available as a recording at:

www.microsoftpdc.com

Please use the microphones provided

Q&A

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