marcel lattmann senior consultant, trivadis ag [email protected]
TRANSCRIPT
![Page 2: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/2.jpg)
AgendaWhat’s new?
ASP.NET AJAX Library
AJAX Control Toolkit
jQuery
![Page 3: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/3.jpg)
Javascript support in VS 2008 and 2010 has been improved (intellisense, debugging)Multi-Browser functionality is still a pain
Needs a lot of testingProductivity is not as good as with C# or VB.NET, e.g. in Silverlight
Maintenance is a problemNot the typical knowledge of an ASP.NET programmer
We need powerful libraries which encapsulate these problems
Today
![Page 4: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/4.jpg)
What's new in this Release?
![Page 5: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/5.jpg)
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
![Page 6: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/6.jpg)
MS combined the Microsoft Ajax Library and the AJAX Control Toolkit
Microsoft Ajax Library – Powerful client data access technology and templatesAJAX Control Toolkit – Over 100,000 developer downloads per monthCurrently named ASP.NET Ajax Library
News #2
![Page 7: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/7.jpg)
ASP.NET Ajax Library works with:ASP.NET Web FormsASP.NET MVCPure HTMLPHP, 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
![Page 8: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/8.jpg)
jQuery Integration:All ASP.NET Ajax controls are exposed as jQuery plug-ins automaticallyYou can use jQuery selectors in ASP.NET Ajax code
News #3
![Page 9: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/9.jpg)
The ASP.NET Ajax Library is being contributed to the CodePlex Foundation
Codeplex.org != Codeplex.comSee http://CodePlex.org and www.asp.net/ajaxLibrary for details
Microsoft Product Support:Standard and premier support for RTM version from Microsoft
News #4
![Page 10: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/10.jpg)
ASP.NET AJAX Library
DataContext, DataView, UI Templates
![Page 11: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/11.jpg)
Rich library for building Ajax applications:
Compatible with all modern browsers including Microsoft Internet Explorer, Google Chrome, Apple Safari, Opera, and Mozilla Firefox.
Includes pure client library for ASP.NET MVC, PHP, or pure HTML applications.
ASP.NET Ajax Library
![Page 12: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/12.jpg)
ChangeTrackingLazy Loading
Client TemplatesClient Data-Binding
2 way data-bindingMaster-Detail
Client Data AccessASMX Web ServicesWCF ServicesWCF Data ServicesMVC ControllersAny JSON End-Point
Powerful Client Data Access Library
Client
Client Templates
Data view
ServerWCF Data Services
others
WCF ServicesUpdate
RequestData conte
xt
![Page 13: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/13.jpg)
Lightweight proxy for WCF Data ServicesRead-only
AdoNetServiceProxy
var proxy = new Sys.Data.AdoNetServiceProxy(uri);
Sys.create.dataView(".imageslist",{ dataProvider: proxy, fetchOperation: "Employees", fetchParameters: { orderby: 'Name' }, autoFetch: "true" };
![Page 14: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/14.jpg)
Client-Side proxy for WCF Data ServicesManages changes
Sends only the changes to the service
MethodsInsert and delete objectsAttach data collection do change trackingGet changes, clear changes, …
MergeOption when reloading dataappendOnly: Keep existing changesoverwriteChanges: Refresh data
AdoNetDataContext
![Page 15: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/15.jpg)
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();
![Page 16: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/16.jpg)
Between template and Data ContextImperative:
declarative
DataView
<tbody sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}" dataview:fetchoperation="{{ queryObject.toString() }}" dataview:autofetch="true">
var master = Sys.create.dataView(".imageslist",{ dataProvider: dataContext, fetchOperation: "Employees", fetchParameters: { orderby: 'Name' }, autoFetch: "true"});
![Page 17: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/17.jpg)
Loads all scripts required by a component and executes the scripts in the right orderCombines scripts for improved performanceSupports on-demand loadingWorks in ASP.NET Web Forms, ASP.NET MVC, HTML, PHP and any other type of web applicationSupports Microsoft Content Delivery NetworkNo support for jQuery
Client Script Loader<script src="../Scripts/Start.debug.js" type="text/javascript"></script>...Sys.require([Sys.components.dataView, Sys.components.adoNetServiceProxy]);
![Page 18: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/18.jpg)
Performance: cached on servers around the worldMay be already in browser cache from other application
Included using
Available files:AJAX Library (standard, debug) V0.911jQuery 1.4.1 & 1.4.2 (standard, minified, VS intellisense files)jQuery validateASP.NET MVC V1.0See 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>
![Page 19: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/19.jpg)
Displaying Data from a WCF Service
demo
![Page 20: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/20.jpg)
AJAX Control Toolkit
![Page 21: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/21.jpg)
The ASP.NET Ajax Library includes all 40 of the controls included in the AJAX Control Toolkit:
AccordionAutoCompleteCalendarCollapsiblePanelMaskedEditModalPopupSliderTabs… and so on …
Ajax Client Controls
![Page 22: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/22.jpg)
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
![Page 23: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/23.jpg)
Using ASP.NET Ajax client controls (Ajax Control Toolkit in ASP.NET Ajax Library)
demo
![Page 24: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/24.jpg)
jQuery
![Page 25: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/25.jpg)
jQuery
Open source, mainly developed by John ResigIntroduced in the MS world with ASP.NET MVC 1.0
![Page 26: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/26.jpg)
jQuery selectorsEasy to use and powerfulDefine 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");});
![Page 27: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/27.jpg)
All ASP.NET Ajax Library controls are exposed as jQuery plug-ins automatically:
jQuery Integration
Sys.require(Sys.components.calendar, function () { $("#mydiv > input").calendar({});});
<script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.calendar, function () { $("#bdate").calendar({}); }); </script>
![Page 28: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/28.jpg)
jQuery PluginsjQuery mechanism to add functionalitySeveral hundred free plug-ins are availableExample: TableSorter Plugin
Plus zebra lookPlus paging
very powerful
$("#employeelist") .tablesorter({widgets: ['zebra']}) .tablesorterPager({container: $("#pager")});
![Page 29: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/29.jpg)
jTemplatesTemplate plug-in for jQueryhttp://jtemplates.tpython.com/
Frameworks based on jQuery (1)
// Bind and process template$("#result").setTemplateElement("myTemplate");$("#result").processTemplate(employees);...
<!-- Template content --><textarea id="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>
![Page 30: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/30.jpg)
jQueryUIControls (Widgets) and theme frameworkhttp://jqueryui.com/
Frameworks based on jQuery (2)
![Page 31: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/31.jpg)
Client data access with jQuery
demo
![Page 32: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/32.jpg)
Summary
![Page 33: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/33.jpg)
Single download for Ajax Library and Ajax Control Toolkit, not part of VS 2010Strong templating and data connectionMost Controls need no Viewstate – Works with Web Forms, MVC, PHP, or whateverOpen for contribution and supported by MicrosoftUse Microsoft Content Delivery Network (CDN)jQuery is the preferred client-side library for the future
Summary (1)
![Page 34: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/34.jpg)
jQuery is the preferred client-side Ajax library MS will contribute to jQuery as all other companies
First proposal: Support for UI templatesPlanned: 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 usedNo advantages using ASP.NET Web FormsAutomatically use MVC ?
Summary (2)
![Page 35: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/35.jpg)
Latest News
ASP.NET AJAX Library
AJAX Control Toolkit jQuery
AJAX Control Toolkit
ASP.NET AJAX Library
Merge
Rename
Move AJAX Library functionality to jQuery
today
???
![Page 36: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/36.jpg)
http://Ajax.CodePlex.comhttp://www.ASP.net/ajaxLibrary
Dino Espositos Cutting EdgeMSDN Magazine 10/2009 - 3/2010 http://msdn.microsoft.com/en-us/magazine
http://www.jamessenior.com/http://channel9.msdn.com/learn/
Additional Resources
![Page 37: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/37.jpg)
Thank you for your Attention!For more Information please contact
Marcel LattmannSenior Consultant
[email protected] 061 / 279 97 55Mobile 079 / 379 97 60
Trivadis AGElisabethenanlage 9CH-4051 Basel
![Page 38: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/38.jpg)
Besuchen Sie unseren Stand
SharePoint 2010SQL Server 2008 R(2)efreshedBusiness Intelligence mit Microsoft in 2010
Trainings Voucher für 1 Schulungstag (Wert CHF 870.-)
Talent Scout
Herausfordernde, attraktive Jobs warten Melden Sie sich!
Trivadis Innovation Partnership Programm (TIPP)Gemeinsame Innovations-Projekte
![Page 39: Marcel Lattmann Senior Consultant, Trivadis AG marcel.lattmann@trivadis.com](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649d8d5503460f94a74c4a/html5/thumbnails/39.jpg)