390 likes | 563 Views
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)
E N D
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) 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
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
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
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
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
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
ASP.NET AJAX Library DataContext, DataView, UI Templates
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
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
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" };
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
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();
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">
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]);
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>
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
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
Using ASP.NET Ajax client controls (Ajax Control Toolkit in ASP.NET Ajax Library) demo
jQuery • Open source, mainly developed by John Resig • Introduced in the MS world with ASP.NET MVC 1.0
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"); });
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({}); });
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")});
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>
jQueryUI Controls (Widgets) and theme framework http://jqueryui.com/ Frameworks based on jQuery (2)
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)
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)
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 ???
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
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
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!