Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Walther Ajax4

1,395 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Walther Ajax4

  1. 1. Stephen Walther Microsoft Stephen.Walther@Microsoft.com
  2. 2. ASP.NET AJAX Accordion AlwaysVisibleControl Animation AutoComplete Calendar CascadingDropDown CollapsiblePanel ConfirmButton
  3. 3. ASP.NET AJAX AjaxControlToolkit- ScriptFilesOnly.zip
  4. 4. ASP.NET AJAX http://www.ASP.net/ajax
  5. 5. Introduction Web Application Experience in 1993
  6. 6. Introduction Brendan Eich’s Home Page (the inventor of JavaScript)
  7. 7. Introduction Super Fancy Ajax Application
  8. 8. 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
  9. 9. Client-Side Application Model renders once Ajax Calls (services)
  10. 10. Why AJAX Applications Are Good Less roundtrips Less bandwidth Less work on the web server More responsive
  11. 11. Why AJAX Applications are Good Two developers: an ASP.NET and JavaScript developer. Ask each developer when a button click event happens…
  12. 12. Overview: 3 Ways to Build an Application 1. Server-Side ASP.NET 2. Server-Side ASP.NET AJAX 3. Client-Side ASP.NET AJAX
  13. 13. 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
  14. 14. Server-Side ASP.NET with No Ajax • Controls renders • Code • Work postback Web Server Web Browser
  15. 15. Creating a Master/Detail Page with Server-Side ASP.NET
  16. 16. 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
  17. 17. Server-Side ASP.NET AJAX with UpdatePanel • Controls renders • Code • Work sneaky postback Web Server Web Browser
  18. 18. Creating a Master/Detail Page with Server-Side ASP.NET AJAX
  19. 19. 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
  20. 20. Client-Side ASP.NET AJAX Controls • Code renders • Work • Controls sneaky postback Web Server Web Browser
  21. 21. Creating a Master/Detail Page with Client-Side AJAX Controls
  22. 22. 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
  23. 23. 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
  24. 24. Why Templates are Good for (var i=0;i < data.length;i++) { row = quot;<tr>quot;; row += quot;<td>quot; + data[i].Title + quot;</td>quot;; row += quot;<td>quot; + data[i].Director + quot;</td>quot;; table += row; } $get(quot;movieBodyquot;).innerHTML = table; (Evil)
  25. 25. Why Templates are Good movieView.set_data(data); <tbody id=quot;movieBodyquot; class=quot;sys-templatequot;> <tr> <td>{{ Title }}</td> <td>{{ Director }}</td> <td>{{ DateReleased.localeFormat(quot;Dquot;) }}</td> </tr> </tbody> (Good)
  26. 26. Rude Objections (impediments to a perfect future) Browser Back/Forward button Accessibility Search Engine Optimization (SEO) JavaScript disabled (Mobile Devices)
  27. 27. Creating a Master/Detail Page that supports JavaScript failover
  28. 28. 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.
  29. 29. Creating a Master/Detail Page with Pure HTML
  30. 30. Additional ASP.NET AJAX 4.0 Features Declarative Client-Side Controls Command Bubbling Live Bindings Saving and Updating Data
  31. 31. 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
  32. 32. Creating a Master/Detail Page with Declarative Client-Side Controls
  33. 33. 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
  34. 34. Select Command DataView Properties selectedIndex initialSelectedIndex selectedData selectedItemClass
  35. 35. Creating a Master/Detail Page with Command Bubbling
  36. 36. Live Bindings {{ Title }} Used to execute JavaScript in the context of the current data item {binding Title } WPF style binding syntax Supports live binding
  37. 37. 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}” />
  38. 38. Creating a Master/Detail Page with Live Bindings
  39. 39. 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
  40. 40. 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
  41. 41. Creating a Master/Detail Page that saves data
  42. 42. Using ADO.NET Data Services
  43. 43. Conclusion Embrace the client-side! For better performance and a better user experience, start writing client-side ASP.NET AJAX applications.
  44. 44. Resources My Blog StephenWalther.com CodePlex ASP.NET Previews aspnet.CodePlex.com Official ASP.NET Website www.ASP.net/ajax
  45. 45. 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)
  46. 46. Track Resources Resource 1 Resource 2 Resource 3 Resource 4
  47. 47. © 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.

×