1 / 44

ASP.NET: Taking Ajax to the Next Level

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.

makya
Download Presentation

ASP.NET: Taking Ajax to the Next Level

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASP.NET: Taking Ajax to the Next Level Stephen Walther Senior Program Manager Microsoft Corporation

  2. Introduction Web Application Experience in 1993

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

  4. Introduction Super Fancy Ajax Application

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

  6. Client-Side Application Model renders once Ajax Calls (services)

  7. Why AJAX Applications Are Good • Less roundtrips • Less bandwidth • Less work on the web server • More responsive

  8. Why AJAX Applications are Good Two developers: an ASP.NET and JavaScript developer. Ask each developer when a button click event happens…

  9. Overview: 3 Ways to Build an Application • Server-Side ASP.NET • Server-Side ASP.NET AJAX • Client-Side ASP.NET AJAX

  10. Overview: Features of Client-Side ASP.NET AJAX • Declarative Client-Side Controls • Command Bubbling • Live Bindings • Saving and Updating Data

  11. Server-Side ASP.NET with No Ajax • Controls • Code • Work renders postback Web Server Web Browser

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

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

  14. Server-Side ASP.NET AJAXwith UpdatePanel • Controls • Code • Work renders sneaky postback Web Server Web Browser

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

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

  17. Client-Side ASP.NET AJAX Controls • Code • Work • Controls renders sneaky postback Web Server Web Browser

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

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

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

  21. 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)

  22. 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)

  23. Rude Objections(impediments to a perfect future) • Browser Back/Forward button • Accessibility • Search Engine Optimization (SEO) • JavaScript disabled (Mobile Devices)

  24. demo Creating a Master/Detail Page that supports JavaScript failover

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

  26. demo Creating a Master/Detail Page with Pure HTML

  27. Additional ASP.NET AJAX 4.0 Features • Declarative Client-Side Controls • Command Bubbling • Live Bindings • Saving and Updating Data

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

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

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

  31. Select Command • DataView Properties • selectedIndex • initialSelectedIndex • selectedData • selectedItemClass

  32. demo Creating a Master/Detail Page with Command Bubbling

  33. Live Bindings • {{ Title }} • Used to execute JavaScript in the context of the current data item • {binding Title } • WPF style binding syntax • Supports live binding

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

  35. demo Creating a Master/Detail Page with Live Bindings

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

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

  38. demo Creating a Master/Detail Page that saves data

  39. demo Using ADO.NET Data Services

  40. Image Organizer

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

  42. Resources • CodePlex ASP.NET Previews aspnet.CodePlex.com • Official ASP.NET Website www.ASP.net/ajax

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

More Related