asp.net 4 and ajax

Visual Studio 2010and

.NET Framework 4

Training Workshop

Visual Studio 2010and

.NET Framework 4

Training Workshop

What’s New InASP.NET AJAX 4What’s New InASP.NET AJAX 4

NameTitleOrganizationEmail

AgendaAgenda

• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings

“ASP.NET AJAX is alright, but it is way too server-centric for serious client-side development…”

- Uninformed Guy

Common MythsCommon Myths

ASP.NET AJAX is tied to ASP.NET, namely WebForms…

You must use a ScriptManager and UpdatePanels to get anything done…

It requires Visual Studio to work…

RequirementsRequirements

In order to seriously use ASP.NET AJAX, some need…

1.Client-side controls2.Data binding3.UI templating4.Easy service communication5.Modular functionality

Why do some find JavaScript painful?Why do some find JavaScript painful?

Who in their right mind wants to do manual XMLHttpRequest work, HTML generation, or data wireup?

Server vs. Client AJAXServer vs. Client AJAX

Initial request: HTML

Initial request: HTML

HTMLHTMLForm POSTForm POST

HTML + JSONHTML + JSON

JSONJSONJSONJSON

Renderin

g

Renderin

g

Server AJAX

Client AJAX

The server should only be concerned with data, not presentation

Client TemplatesClient Templates

Server-Side (WebForms):

<ItemTemplate> <li><%# Eval("Name") %></li>

</ItemTemplate>

Client-Side:

<ul class="sys-template"> <li>{{ Name }}</li>

</ul>

Client ControlsClient Controls

DataView DataContext

• Dynamic UI• Master/Detail• DataContext

integration• Select command

bubbling• Etc.

• Server communication• WCF• ASMX

• ADO.NET Data Services• Etc.

• Change tracking• Etc.

DataContextDataContext

ASMX

WCF

ADO.NETData Services

ASP.NET MVCJsonResult

Etc.

1. Request

2. JSON DataData

Context

3. Modify Data 4. Save Data

* DataContext includes change tracking automatically

Client TemplatesDataViewDataContext

Client TemplatesDataViewDataContext

Maybe you’d prefer to write as little JavaScript as possible…

Declarative InstantiationDeclarative Instantiation

1. Map:

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

2. Attach:

<div sys:attach="dataview"></div>

3. Use:

<div … dataview:serviceuri="myService.svc"…>

Did I mention that it is XHTML compliant?

Declarative InstantiationDeclarative Instantiation

Command BubblingCommand Bubbling

Server-Side (WebForms):

<asp:Button runat=“server” CommandName=“Select" … />

Client-Side:

<button sys:command="select" … />

Live BindingsLive Bindings

Object #1

Property #1Property #2Property #3

Object #2

Property #1Property #2Property #3

Source Target

• One-Time• One-Way• Two-Way

Command BubblingLive BindingsChange Tracking

Command BubblingLive BindingsChange Tracking

SummarySummary

• Client-Side Templates• Client Controls• Declarative Instantiation• Command Bubbling• Live Bindings