1 / 24

ASP.NET AJAX 4.O Preview

ASP.NET AJAX 4.O Preview. Jurgen Postelmans jurgen@u2u.be U2U http://www.u2u.be/res/Articles.aspx. Objectives and Takeaways. Session Objectives Understand what AJAX is. Show how Microsoft ASP.NET AJAX is being used today Understand the pure AJAX model

alda
Download Presentation

ASP.NET AJAX 4.O Preview

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 AJAX 4.O Preview Jurgen Postelmans jurgen@u2u.be U2U http://www.u2u.be/res/Articles.aspx

  2. Objectives and Takeaways • Session Objectives • Understand what AJAX is. • Show how Microsoft ASP.NET AJAX is being used today • Understand the pure AJAX model • Introduce the new AJAX features in ASP.NET 4.0 (client data, client templates, declarative markup, bindings, command bubbling, etc.) • Key Takeaways • ASP.NET AJAX development is more active than ever • Client data-driven UI is easier than ever

  3. What Is AJAX All About?Server AJAX versus "pure" AJAX Server AJAX Rendering Rendering Initial request: HTML HTML Form POST HTML + JSON JSON JSON

  4. Microsoft AJAX TodayA server-side focus • UpdatePanel • Server Controls and Extenders • Developers shielded from JavaScript • Client-focused development possible but less familiar

  5. Demo UpdatePanel

  6. The “Pure AJAX” ModelWhy it matters It's all about the standard browser • No plug-in necessary • Network payload is way smaller(data < HTML, no ViewState round-tripping) • Less round-tripping to the server • More reactive UI

  7. Client DataFrom Web services to plain JavaScript data • Any JSON/POX Web service • .asmx • WCF • HttpHandler • JSONResult • etc. • ADO.NET Data Services • Client AdoNetServiceProxy control • Server data gets represented on the client as plain JavaScript objects • Javascript Arrays and objects.

  8. Demo of Pure AJAX with ASP.NET AJAX 3.5

  9. ASP.NET AJAX 4.0A client application model • Client-side applications get a lot easier • Server provides JSON data, not HTML • Client data sources • Client template rendering • Live Bindings • Declarative instantation

  10. Client TemplatesSimple rendering on the client • On the server: • <ItemTemplate> <li><%# Eval("Name") %></li></ItemTemplate> • On the client: • <ul class=“sys-template”> <li>{{ Name }}</li></ul>

  11. The DataView • DataView control renders data using a template • Repeater if data is an array • Details View if data is an object

  12. Client Templates Demo I

  13. Client TemplatesSimple rendering on the client • Design Goals • Performance • Simplicity and readability • Security • XHTML (if you care about that) • Easily embed data into markup: {{ Name }} • Default data context is the current data item • Expression language is JavaScript:{{BirthDate.localeFormat(“dd/MM/yyyy”)}} • Interspersed code and markup • Declarative behavior and events

  14. The Microsoft AJAX LibraryA component model for the browser • Namespaces • Components • Controls and Behaviors • $create(Sys.UI.DataView, {serviceUri: “../AdventureWorksAdo.svc”},{},{}, $get(“productListView”));equivalent to:vardv = new Sys.UI.DataView($get(“productListView”));dv.set_serviceURI(“../AdventureWorksAdo.svc”);dv.initialize();

  15. Client Templates Demo II

  16. Declarative ComponentsExtending markup semantics • Instantiate controls and behaviors from markup • XHTML-compliant markup • Registration:xmlns:dataview=“javascript:Sys.UI.DataView” • Instantiation:<div sys:attach=“dataview”></div> • Setting properties:dataview:serviceuri=“AdventureWorksAdo.svc” • No JavaScript

  17. Demo Declarative Components

  18. Command BubblingA simpler approach to building interactive UI • Similar to the server-side concept<asp:buttoncommandName=“select” … /><button sys:command=“select” … /> • Associates commands with UI elements • Commands bubble up the DOM • Controls handle commands they understand • No JavaScript

  19. Demo Command Bubbling

  20. Live BindingsFrom data to UI and back • WPF-like syntax<span>{binding Name}</span><input value=“{binding Name}” … /> • They really are live • Reflect changes live from data • Reflect changes live back to data from user input • Changes get instantly propagated • No round-trip to the server • Convert and ConvertBack functions • No JavaScript

  21. Demo Live Bindings

  22. What We’ve LearnedA client data drill-down • Getting data from ADO.NET Data Services • Formatting data into HTML using templates • Declaratively instantiating components • Bubbling commands • Binding UI to data • ASP.NET AJAX development is more active than ever • Client data-driven UI is easier than ever

  23. What Else In ASP.NET AJAX 4.0?…and beyond? • Client data • Sorting, pagination, and filtering • Automatically sending changes to the server • ASPX server integration • More controls in the AJAX Control Toolkit • Search engine optimization • jQuery • Splitting the framework into smaller pieces

More Related