Simon Amrein Consultant Trivadis AG

What is ASP.NET 4.0 Ajax Ajax Control Toolkit Microsoft Ajax Content Delivery Network jQuery jQuery Client Templates und Databinding Summary & Resources

‘J’ popularity Ajax But this is the football team...

Ajax c# ‘J’ popularity

Ajax control toolkit

‘J’ popularity jQuery

ASP.NET Ajax Library The Beta-Version was the last version. Microsoft is now supporting the jQuery Project

ScriptManager Control The ScriptManager control manages client script for AJAX-enabled ASP.NET Web pages. UpdatePanel Control Enable partial-page updates UpdateProgress Control Template to show that an asynchronus method is working Timer Control

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

AutoComplete CollapsiblePanel ColorPicker MaskedEdit Calendar Accordion Watermark …

Visual Studio 2008 Ajax Control Toolkit for.NET 3.5. Visual Studio 2010.NET 4 or.NET 3.5 versions of the ACT

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 tag to your page that points to Ajax.microsoft.com.

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 Cycle Ajax Control Toolkit (owned by the CodePlex) ASP.NET Ajax ASP.NET MVC JavaScript Files

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

How to get jQuery Compressed for production Uncompressed for developing / debugging

Components jQuery Core Selectors Attributes Events Effects Ajax jQuery 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. Some Content $("#myDiv").SomeThing()

.click().dblclick().mousedown() Click here $('#target').click(function() {alert('Handler for.click() called.'); });.mouseenter().mouseleave().mousemove().mouseout() …

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

jQuery templates contain markup with binding expressions. Templates are applied to data objects or arrays, and rendered into the HTML DOM Available as a plugin The plugin requires jQuery version Will be included in major release 1.5

jQuery Client Templates ${Name} (${ReleaseYear}) var employees = [ {Name:"Simon Amrein", Location: "Zurich"}, {Name:"Stefan Frutiger", Location: "Bern"}, {Name:"Meinrad Weiss", Location : "Zurich"}]; element $("#template").tmpl( movies ).appendTo( "#movieList" );

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 object Converters 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", });

var person = {}; $("#age").link(person, { age: { convert: function(value) { return Math.round(Math.parseFloat(value)); } }); $("#name").val("7.5"); alert(person.age); // 8

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 community The 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’ 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!

ASP.NET 4 and VS 2010 Web Development: Toc Toc jQuery: Plugins

Termin: Ort: 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 Verpflegung 18: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... Rememberwww.jquery.comwww.jquery.com After Q & A  Go home and test it...

© 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.