Simon AmreinConsultantTrivadis AG

The 'J' in your browser: Jquery & aJax

The 'J' in your browserAgenda

What isASP.NET 4.0 AjaxAjax Control ToolkitMicrosoft Ajax Content Delivery NetworkjQuery

jQuery Client Templates und DatabindingSummary & Resources

‘J’ popularity

Ajax

But this is the football team...

Ajax c#

‘J’ popularity

‘J’ popularity

Ajax control toolkit

‘J’ popularity

jQuery

The 'J' in your browserNot in the Agenda

ASP.NET Ajax LibraryThe Beta-Version was the lastversion. Microsoft is now supporting the jQuery Project

ASP.NET 4.0 AjaxServer Controls

ScriptManager ControlThe ScriptManager control manages client script for AJAX-enabled ASP.NET Web pages.

UpdatePanel ControlEnable partial-page updates

UpdateProgress ControlTemplate to show that an asynchronus method is working

Timer Control

ASP.NET 4.0 AjaxDemo

Ajax Control Toolkit (ACT)

The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications.The Ajax Control Toolkit contains more than 40 controls

AutoCompleteCollapsiblePanelColorPickerMaskedEditCalendarAccordionWatermark…

Ajax Control Toolkit (ACT)Controls

Visual Studio 2008 Ajax Control Toolkit for .NET 3.5.

Visual Studio 2010.NET 4 or .NET 3.5 versions of the ACT

Ajax Control Toolkit (ACT)Versions

Ajax Control ToolkitDemo

Microsoft Ajax Content Delivery Network (CDN)The Microsoft Ajax Content Delivery

Network (CDN) enables you to easily add popular JavaScript libraries such as jQuery to your Web applications. For example, you can start using jQuery simply by adding a <script> tag to your page that points to Ajax.microsoft.com.

http://www.asp.net/ajaxlibrary/CDN.ashx

CDN – Why?

Improve the performance Ajax applications.

Contents of the Microsoft Ajax CDN are cached on servers located around the world.

CDN – Include…

The Microsoft Ajax CDN includes:jQuery (owned by the jQuery Team)jQuery UI (owned by the jQuery UI)jQuery Validation (jQuery team)jQuery CycleAjax Control Toolkit (owned by the CodePlex)ASP.NET AjaxASP.NET MVC JavaScript Files

http://www.asp.net/ajaxLibrary/cdn.ashx

CDNDemo

jQuery (“$”)Basics

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML

Used by over 31% of the 10,000 most visited websites

jQuery is the most popular JavaScript library in use today

Source: Wikipedia

How to get jQuery

www.jquery.com

Compressed for productionUncompressed for developing / debugging

jQueryBasics

ComponentsjQuery CoreSelectorsAttributesEvents

EffectsAjaxjQuery UI…

All Selector (“*”) Selects all elements.Class Selector (“.class”) Elements with the given class. Element Selector (“element”) Selects all elements with the given tag name.ID Selector (“#id”) Element with the given id attribute.

jQueryBasic Selectors<div id="myDiv">

Some Content</div> <script> $("#myDiv").SomeThing()</script>

.click()

.dblclick()

.mousedown()

jQueryJust a few Events

<div id="target"> Click here </div>

$('#target').click(function() {alert('Handler for .click() called.'); });

.mouseenter().mouseleave().mousemove()

.mouseout()…

.show()

.hide()

.animate()

.fadeIn()

.fadeOut()

.slideUp()

.slideDown()…

jQuerySome Effects

$('#button').click(function() { $('#target').animate( { opacity: 0.25, left: '+=50', height: 'toggle' } , 5000 , function() { //Animation completed }); });

jQuery – BasicsDemo

jQueryClient Templates

jQuery templates contain markup with binding expressions. Templates are applied to data objects or arrays, and rendered into the HTML DOMAvailable as a plugin

The plugin requires jQuery version 1.4.2.Will be included in major release 1.5

http://api.jquery.com/tmpl/

jQuery Client Templates<script id=“template" type="text/x-jquery-tmpl">

<li><b>${Name}</b> (${ReleaseYear})</li> </script><script type="text/javascript"> var employees = [ {Name:"Simon Amrein", Location: "Zurich"}, {Name:"Stefan Frutiger", Location: "Bern"}, {Name:"Meinrad Weiss", Location : "Zurich"}];

element $("#template").tmpl( movies ).appendTo( "#movieList" ); </script>

<ul id="movieList"></ul>

jQuery Client TemplatesDemo

jQueryData-Linking

The link API allows you to very quickly and easily link fields of a form to an object. Any changes to the form fields are automatically pushed onto the objectConverters lets you modify the format or type of the value as it flows between the two sides This plugin currently depends on jQuery version 1.4.3

var person = {};

$("form").link(person, { firstName: "first-name", lastName: "last-name", });

jQueryData Link

var person = {}; $("#age").link(person, { age: { convert: function(value) { return Math.round(Math.parseFloat(value)); } } });

$("#name").val("7.5"); alert(person.age); // 8

jQueryData Link Converter

jQuery – Data LinkDemo

jQuery & MicrosoftOutlook

In March, the jQuery Community announced at MIX 2010 that Microsoft had committed to supporting the jQuery Project via code contributions and resources.Microsoft made available for public review their first jQuery plugin which provided client-side templating capabilities to the jQuery communityThe Microsoft-contributed plugins for version 1.5 – the jQuery Templates plugin, the jQuery Data Link plugin, and the jQuery Globalization plugin

jQuery V 1.5

jQuery.require() will load a plugin2 only after plugin1

jQuery.forEach jQuery.exception (easy to hook into throw) And much more…

The 'J' in your browserSummary

The ‘J’ stands for rich and interactive Web applications

Microsoft stopped investments for client scripts

But Ajax and jQuery will be the future

You don’t have to use it, but you will love it!

The 'J' in your browserRessources

ASP.NET 4 and VS 2010 Web Development: http://www.asp.net/learn/whitepapers/aspnet4#0.2__Toc253429252

jQuery:http://jquery.com/http://api.jquery.com/

Pluginshttp://plugins.jquery.com/

SwissPDC10@TrivadisTermin: 28.10.2010Ort: Zürich - in der Trivadis Niederlassung Agenda:

16:00 h: Registrierung und Begrüssungskaffee 16:30 h: Silverlight, Azure and WP7 17:30 h: Pause mit Verpflegung18:00 h: Keynote PDC10 mit Steve Ballmer 20:00 h: Pause mit Verpflegung 20:30 h: Podiumsdiskussion: "Was bedeuten die Ankündigung für die Praxis" 21:30 h: Verlosung der Preise

And now...

Remember www.jquery.com

After Q & A Go home and test it...

Q&A

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.