asp net taking ajax to the next level n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ASP.NET: Taking Ajax to the Next Level PowerPoint Presentation
Download Presentation
ASP.NET: Taking Ajax to the Next Level

Loading in 2 Seconds...

play fullscreen
1 / 44

ASP.NET: Taking Ajax to the Next Level - PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on

ASP.NET: Taking Ajax to the Next Level. Stephen Walther Senior Program Manager Microsoft Corporation. Introduction. Web Application Experience in 1993. Introduction. Brendan Eich’s Home Page (the inventor of JavaScript). Introduction. Super Fancy Ajax Application.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'ASP.NET: Taking Ajax to the Next Level' - makya


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
asp net taking ajax to the next level

ASP.NET: Taking Ajax to the Next Level

Stephen Walther

Senior Program Manager

Microsoft Corporation

introduction
Introduction

Web Application Experience in 1993

introduction1
Introduction

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

introduction2
Introduction

Super Fancy Ajax Application

different types of web applications
Different Types of Web Applications
  • 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
client side application model
Client-Side Application Model

renders once

Ajax Calls (services)

why ajax applications are good
Why AJAX Applications Are Good
  • Less roundtrips
  • Less bandwidth
  • Less work on the web server
  • More responsive
why ajax applications are good1
Why AJAX Applications are Good

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

overview 3 ways to build an application
Overview: 3 Ways to Build an Application
  • Server-Side ASP.NET
  • Server-Side ASP.NET AJAX
  • Client-Side ASP.NET AJAX
overview features of client side asp net ajax
Overview: Features of Client-Side ASP.NET AJAX
  • Declarative Client-Side Controls
  • Command Bubbling
  • Live Bindings
  • Saving and Updating Data
server side asp net with no ajax
Server-Side ASP.NET with No Ajax
  • Controls
  • Code
  • Work

renders

postback

Web Server

Web Browser

server side asp net
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 ajax with updatepanel
Server-Side ASP.NET AJAXwith UpdatePanel
  • Controls
  • Code
  • Work

renders

sneaky

postback

Web Server

Web Browser

server side asp net ajax
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 interaction
client side asp net ajax controls
Client-Side ASP.NET AJAX Controls
  • Code
  • Work
  • Controls

renders

sneaky

postback

Web Server

Web Browser

client side asp net ajax controls1
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
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
Why Templates are Good

for (vari=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 good1
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
Rude Objections(impediments to a perfect future)
  • Browser Back/Forward button
  • Accessibility
  • Search Engine Optimization (SEO)
  • JavaScript disabled (Mobile Devices)
technology independent
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.
additional asp net ajax 4 0 features
Additional ASP.NET AJAX 4.0 Features
  • Declarative Client-Side Controls
  • Command Bubbling
  • Live Bindings
  • Saving and Updating Data
declarative controls
Declarative Controls
  • XML Namespaces
    • xmlns:sys=“javascript:Sys”
    • xmlns:dataview=“javascript:Sys.UI.DataView”
  • sys:activate
    • Activates declarative controls
  • sys:attach
    • Attaches a control to a DOM element
command bubbling
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 command
select command
Select Command
  • DataView Properties
    • selectedIndex
    • initialSelectedIndex
    • selectedData
    • selectedItemClass
live bindings
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 bindings1
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}” />

data sources1
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
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
slide41

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

resources
Resources
  • CodePlex ASP.NET Previews

aspnet.CodePlex.com

  • Official ASP.NET Website

www.ASP.net/ajax

slide43

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