marcel lattmann senior consultant, trivadis ag [email protected]
TRANSCRIPT
AgendaWhat’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 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
What's new in this Release?
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 templatesAJAX Control Toolkit – Over 100,000 developer downloads per monthCurrently named ASP.NET Ajax Library
News #2
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
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
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
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 Mozilla Firefox.
Includes pure client library for ASP.NET MVC, PHP, or pure HTML applications.
ASP.NET Ajax Library
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
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" };
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
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 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"});
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]);
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>
Displaying Data from a WCF Service
demo
AJAX Control Toolkit
The ASP.NET Ajax Library includes all 40 of the controls included in the AJAX Control Toolkit:
AccordionAutoCompleteCalendarCollapsiblePanelMaskedEditModalPopupSliderTabs… 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
jQuery
Open source, mainly developed by John ResigIntroduced in the MS world with ASP.NET MVC 1.0
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");});
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>
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")});
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>
jQueryUIControls (Widgets) and theme frameworkhttp://jqueryui.com/
Frameworks based on jQuery (2)
Client data access with jQuery
demo
Summary
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)
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)
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
???
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
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
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
