1 / 39

The new ASP.NET Ajax Library

The new ASP.NET Ajax Library. Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com. Agenda. What’s new? ASP.NET AJAX Library AJAX Control Toolkit jQuery. Javascript support in VS 2008 and 2010 has been improved (intellisense, debugging)

terena
Download Presentation

The new ASP.NET Ajax Library

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. The new ASP.NET Ajax Library Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com

  2. Agenda • What’s new? • ASP.NET AJAX Library • AJAX Control Toolkit • jQuery

  3. Javascript support in VS 2008 and 2010 has been improved (intellisense, debugging) Multi-Browser functionality is still a pain Needs a lot of testing Productivity is not as good as with C# or VB.NET, e.g. in Silverlight Maintenance is a problem Not the typical knowledge of an ASP.NET programmer  We need powerful libraries which encapsulate these problems Today

  4. What's new in this Release?

  5. The ASP.NET Ajax Library Beta is released: Developer download from Code Plex http://ajaxcontroltoolkit.codeplex.com/ http://Ajax.CodePlex.com Not included in VS 2010 / .NET 4.0 News #1

  6. MS combined the Microsoft Ajax Library and the AJAX Control Toolkit Microsoft Ajax Library – Powerful client data access technology and templates AJAX Control Toolkit – Over 100,000 developer downloads per month Currently named ASP.NET Ajax Library News #2

  7. ASP.NET Ajax Library works with: ASP.NET Web Forms ASP.NET MVC Pure HTML PHP, Ruby on Rails, and anything else Most controls of the Ajax Toolkit work with pure HTML and ASP.NET MVC (~35 of 40) Some still need a viewstate News #2

  8. jQuery Integration: All ASP.NET Ajax controls are exposed as jQuery plug-ins automatically You can use jQuery selectors in ASP.NET Ajax code News #3

  9. The ASP.NET Ajax Library is being contributed to the CodePlex Foundation Codeplex.org != Codeplex.com See http://CodePlex.org and www.asp.net/ajaxLibrary for details Microsoft Product Support: Standard and premier support for RTM version from Microsoft News #4

  10. ASP.NET AJAX Library DataContext, DataView, UI Templates

  11. Rich library for building Ajax applications: Compatible with all modern browsers including Microsoft Internet Explorer, Google Chrome, Apple Safari, Opera, and MozillaFirefox. Includes pure client library for ASP.NET MVC, PHP, or pure HTML applications. ASP.NET Ajax Library

  12. Powerful Client Data Access Library • ChangeTracking • Lazy Loading • Client Templates • Client Data-Binding • 2 way data-binding • Master-Detail • Client Data Access • ASMX Web Services • WCF Services • WCF Data Services • MVC Controllers • Any JSON End-Point Client Server Request Data view Data context WCF Data Services WCF Services Update Client Templates others

  13. Lightweight proxy for WCF Data Services Read-only AdoNetServiceProxy var proxy = new Sys.Data.AdoNetServiceProxy(uri); Sys.create.dataView(".imageslist", { dataProvider: proxy, fetchOperation: "Employees", fetchParameters: { orderby: 'Name' }, autoFetch: "true" };

  14. Client-Side proxy for WCF Data Services Manages changes Sends only the changes to the service Methods Insert and delete objects Attach data collection  do change tracking Get changes, clear changes, … MergeOption when reloading data appendOnly: Keep existing changes overwriteChanges: Refresh data AdoNetDataContext

  15. AdoNetQueryBuilder Translated into URL rest syntax Filter Objects queryObject = new Sys.Data.AdoNetQueryBuilder("Employees"); queryObject.set_orderby("Name"); queryObject.set_filter("Remarks eq " + "'MS Development'"); queryObject.set_expand("Hobbies"); dataView.set_fetchOperation(queryObject.toString();); dataView.fetchData();

  16. Between template and Data Context Imperative: declarative DataView var master = Sys.create.dataView(".imageslist",{ dataProvider: dataContext, fetchOperation: "Employees", fetchParameters: { orderby: 'Name' }, autoFetch: "true" }); <tbody sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}" dataview:fetchoperation="{{ queryObject.toString() }}" dataview:autofetch="true">

  17. Loads all scripts required by a component and executes the scripts in the right order Combines scripts for improved performance Supports on-demand loading Works in ASP.NET Web Forms, ASP.NET MVC, HTML, PHP and any other type of web application Supports Microsoft Content Delivery Network No support for jQuery Client Script Loader <script src="../Scripts/Start.debug.js" type="text/javascript"></script> ... Sys.require([Sys.components.dataView, Sys.components.adoNetServiceProxy]);

  18. Performance: cached on servers around the world May be already in browser cache from other application Included using Available files: AJAX Library (standard, debug) V0.911 jQuery 1.4.1 & 1.4.2 (standard, minified, VS intellisense files) jQuery validate ASP.NET MVC V1.0 See http://www.asp.net/ajaxlibrary/CDN.ashx for details Content Delivery Network <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.js type="text/javascript"></script>

  19. Displaying Data from a WCF Service demo

  20. AJAX Control Toolkit

  21. The ASP.NET Ajax Library includes all 40 of the controls included in the AJAX Control Toolkit: Accordion AutoComplete Calendar CollapsiblePanel MaskedEdit ModalPopup Slider Tabs … and so on … Ajax Client Controls

  22. Each control can be used on pure html pages or on aspx pages: Web Forms HTML (imperative) Can also be defined declaratively or with jQuery syntax Ajax Client Controls

  23. Using ASP.NET Ajax client controls (Ajax Control Toolkit in ASP.NET Ajax Library) demo

  24. jQuery

  25. jQuery • Open source, mainly developed by John Resig • Introduced in the MS world with ASP.NET MVC 1.0

  26. jQuery selectors • Easy to use and powerful • Define eventhandler for a button • Selector 2: Loop through all <td> items of the imageslist and hide the <img>-tag $("#btnSaveChanges").click(function () { alert("Changes Saved!"); }); $("#btnNiceEffect").click(function () { $("#imageslist > td img").hide("slow"); $("#imageslist > td img").show("slow"); });

  27. All ASP.NET Ajax Library controls are exposed as jQuery plug-ins automatically: jQuery Integration <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.calendar, function () { $("#bdate").calendar({}); }); </script> Sys.require(Sys.components.calendar, function () { $("#mydiv > input").calendar({}); });

  28. jQuery Plugins • jQuery mechanism to add functionality • Several hundred free plug-ins are available • Example: TableSorterPlugin • Plus zebra look • Plus paging • very powerful $("#employeelist") .tablesorter({widgets: ['zebra']}) .tablesorterPager({container: $("#pager")});

  29. jTemplates Template plug-in for jQuery http://jtemplates.tpython.com/ Frameworks based on jQuery (1) // Bind and process template $("#result").setTemplateElement("myTemplate"); $("#result").processTemplate(employees); ... <!-- Template content --> <textareaid="myTemplate" style="display:none" rows="0" cols="0"> {#foreach $T as record} <tr> <td>{$T.record.Vorname}</td> <td>{$T.record.Name}</td> <td>{$T.record.Remarks}</td> </tr> {#/for} <div id="result"></div>

  30. jQueryUI Controls (Widgets) and theme framework http://jqueryui.com/ Frameworks based on jQuery (2)

  31. Client data access with jQuery demo

  32. Summary

  33. Single download for Ajax Library and Ajax Control Toolkit, not part of VS 2010 Strong templating and data connection Most Controls need no Viewstate – Works with Web Forms, MVC, PHP, or whatever Open for contribution and supported by Microsoft Use Microsoft Content Delivery Network (CDN) jQuery is the preferred client-side library for the future Summary (1)

  34. jQuery is the preferred client-side Ajax library MS will contribute to jQuery as all other companies First proposal: Support for UI templates Planned: Support for DataContext ASP.NET Ajax Library preferred for server-side Ajax only ASP.NET Ajax library renamed to Ajax Control Toolkit Today: the other way round If Dataview and Templates are heavily used No advantages using ASP.NET Web Forms Automatically use MVC ? Summary (2)

  35. Latest News AJAX Control Toolkit ASP.NET AJAX Library jQuery Merge ASP.NET AJAX Library today Move AJAX Library functionality to jQuery Rename AJAX Control Toolkit ???

  36. http://Ajax.CodePlex.com http://www.ASP.net/ajaxLibrary Dino Espositos Cutting Edge MSDN Magazine 10/2009 - 3/2010 http://msdn.microsoft.com/en-us/magazine http://www.jamessenior.com/ http://channel9.msdn.com/learn/ Additional Resources

  37. Thank you for your Attention! • For more Information please contact • Marcel Lattmann • Senior Consultant • marcel.lattmann@trivadis.com • Tel 061 / 279 97 55 • Mobile 079 / 379 97 60 • Trivadis AG • Elisabethenanlage 9 • CH-4051 Basel

  38. Besuchen Sie unseren Stand Trivadis Innovation Partnership Programm (TIPP) Gemeinsame Innovations-Projekte Trainings Voucher für 1 Schulungstag (Wert CHF 870.-) SharePoint 2010 SQL Server 2008 R(2)efreshed Business Intelligence mit Microsoft in 2010 Talent Scout Herausfordernde, attraktive Jobs warten MeldenSiesich!

More Related