ASP.NET 4 and AJAX

2,838 views

Published on

  • Be the first to comment

ASP.NET 4 and AJAX

  1. 1. Visual Studio 2010 and .NET Framework 4 Training Workshop
  2. 2. Presentation Outline (hidden slide): <ul><li>Technical Level : 300 </li></ul><ul><li>Intended Audience : Developers & Architects </li></ul><ul><li>Objectives (what do you want the audience to take away): </li></ul><ul><ul><li>Understand primary focus around new client-side controls and templating capabilities, from both an imperative and declarative perspective </li></ul></ul><ul><ul><li>Help promote the use of ASP.NET AJAX as a client-side JavaScript platform that enables rich web development, even outside of the context of ASP.NET. </li></ul></ul><ul><li>Presentation Outline : </li></ul><ul><ul><li>Client-Side Templates </li></ul></ul><ul><ul><li>Client Controls </li></ul></ul><ul><ul><li>Declarative Instantiation </li></ul></ul><ul><ul><li>Command Bubbling </li></ul></ul><ul><ul><li>Live Bindings </li></ul></ul>
  3. 3. What’s New In ASP.NET AJAX 4 Name Title Organization Email
  4. 4. Agenda <ul><li>Client-Side Templates </li></ul><ul><li>Client Controls </li></ul><ul><li>Declarative Instantiation </li></ul><ul><li>Command Bubbling </li></ul><ul><li>Live Bindings </li></ul>
  5. 5. <ul><li>“ ASP.NET AJAX is alright, but it is way too server-centric for serious client-side development…” </li></ul><ul><li>- Uninformed Guy </li></ul>
  6. 6. Common Myths <ul><li>ASP.NET AJAX is tied to ASP.NET, namely WebForms… </li></ul><ul><li>You must use a ScriptManager and UpdatePanels to get anything done… </li></ul><ul><li>It requires Visual Studio to work… </li></ul>
  7. 7. Requirements <ul><li>In order to seriously use ASP.NET AJAX, some need… </li></ul><ul><li>Client-side controls </li></ul><ul><li>Data binding </li></ul><ul><li>UI templating </li></ul><ul><li>Easy service communication </li></ul><ul><li>Modular functionality </li></ul>
  8. 8. Why do some find JavaScript painful?
  9. 9. <ul><li>Who in their right mind wants to do manual XMLHttpRequest work, HTML generation, or data wireup? </li></ul>
  10. 10. Server vs. Client AJAX Initial request: HTML HTML Form POST HTML + JSON JSON JSON Server AJAX Client AJAX Rendering Rendering
  11. 11. <ul><li>The server should only be concerned with data, not presentation </li></ul>
  12. 12. Client Templates <ul><li>Server-Side (WebForms): </li></ul><ul><li><ItemTemplate> <li><%# Eval(&quot;Name&quot;) %></li> </li></ul><ul><li></ItemTemplate> </li></ul>Client-Side: <ul class=&quot;sys-template&quot;> <li>{{ Name }}</li> </ul>
  13. 13. Client Controls DataView DataContext <ul><li>Dynamic UI </li></ul><ul><li>Master/Detail </li></ul><ul><li>DataContext integration </li></ul><ul><li>Select command bubbling </li></ul><ul><li>Etc. </li></ul><ul><li>Server communication </li></ul><ul><ul><li>WCF </li></ul></ul><ul><ul><li>ASMX </li></ul></ul><ul><ul><li>ADO.NET Data Services </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Change tracking </li></ul><ul><li>Etc. </li></ul>
  14. 14. DataContext 1. Request 2. JSON Data 3. Modify Data 4. Save Data * DataContext includes change tracking automatically ASMX WCF ADO.NET Data Services ASP.NET MVC JsonResult Etc. Data Context
  15. 15. Client Templates DataView DataContext
  16. 16. <ul><li>Maybe you’d prefer to write as little JavaScript as possible… </li></ul>
  17. 17. Declarative Instantiation <ul><li>Map: </li></ul><ul><li>xmlns:dataview=&quot;javascript:Sys.UI.DataView“ </li></ul><ul><li>2. Attach: </li></ul><ul><li><div sys:attach=&quot;dataview&quot;></div> </li></ul>3. Use: <div … dataview:serviceuri=&quot;myService.svc&quot;…>
  18. 18. <ul><li>Did I mention that it is XHTML compliant? </li></ul>
  19. 19. Declarative Instantiation
  20. 20. Command Bubbling <ul><li>Server-Side (WebForms): </li></ul><ul><li><asp:Button runat=“server” CommandName=“Select&quot; … /> </li></ul><ul><li>Client-Side: </li></ul><ul><li><button sys:command=&quot;select&quot; … /> </li></ul>
  21. 21. Live Bindings Source Target <ul><li>One-Time </li></ul><ul><li>One-Way </li></ul><ul><li>Two-Way </li></ul>Object #1 Property #1 Property #2 Property #3 Object #2 Property #1 Property #2 Property #3
  22. 22. Command Bubbling Live Bindings Change Tracking
  23. 23. Summary <ul><li>Client-Side Templates </li></ul><ul><li>Client Controls </li></ul><ul><li>Declarative Instantiation </li></ul><ul><li>Command Bubbling </li></ul><ul><li>Live Bindings </li></ul>

×