Marcel LattmannSenior Consultant, Trivadis AGmarcel.lattmann@trivadis.com

The new ASP.NET Ajax Library

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

marcel.lattmann@trivadis.comTel 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