Gill CleerenMicrosoft Regional Director – Silverlight MVPOrdina Belgium

To jQuery or to Client Library, that’s the question!

Glad to meet you...Gill CleerenMicrosoft Regional DirectorMVP Silverlight.NET Architect @Ordina (www.ordina.be) Speaker (TechDays, DevDays, NDC Norway, Spring Conference UK, SQL Server Saturday Switzerland...)Visug user group lead (www.visug.be)Author (Silverlight 4 Data and services cookbook)www.snowball.be - gill@snowball.be - @gillcleeren

What we’ll be looking at...Part 1: Current state of scripting options for the ASP.NET

developerWhere are we now?Cool features of ASP.NET AJAXCool features of the ASP.NET AJAX toolkit

Part 2 : jQueryWhy jQuery?jQuery fundamentalsCreating and manipulating elementsEventsAnimations and effectsTalking to the server using ajax callsjQuery UITemplating, data link and globalization

Current state of scripting options for the ASP.NET developer

Part 1

Current state of scripting options for the ASP.NET developer

Today – 1 year ago (about ): Microsoft announced it ceased further development in AJAX Client Library

Instead, Microsoft announcedto invest in building jQueryplugins. Up first is porting existingfunctionality to jQuery.

Current state of scripting options for the ASP.NET developer

Conclusion: don’t invest any new development time in client library!

Don’t panic if you have, there’s still support for the current version!

Current state of scripting options for the ASP.NET developer

Current state of scripting options for the ASP.NET developer

There is continued investment inASP.NET AJAXASP.NET AJAX Control Toolkit

Let’s look at a few new and nice features of these!

ASP.NET AJAX

ASP.NET AJAX: The ScriptManager

Exists since ASP.NET 2.0 AJAXEnhanced over time with 3.5 and 4.0Used for managing/downloading scripts

MicrosoftOwn scripts

Cool features of the ScriptManagerCombine Scripts (more in the next slide)Compress Scripts (more in the next slide)Cache Scripts with a Far Future headerUse the Microsoft Ajax CDN (ASP.NET 4)

The CompositeScript function

Can be used to combine several scriptsCan be used in combination with jQuery, jQuery UI...

Results in less server calls from the browser fasterAutomatically adds

Far Future HeaderScript remains cached for long time, less downloads faster

Compression of script code (GZIP)

Using a CDN

CDN = ??Canadian Dairy Network?Coin Dealer Newsletter?Cultural Diversity Network?

CDN = Content delivery Network

Using a CDN

It’s possible to load all ASP.NET Framework scripts and other scripts from the Microsoft CDN

AJAX Web Forms scriptsAJAX Control ToolkitjQuery

Probably not for internal apps

Why a CDN?

Local script loading (geo-aware)Servers located around the world

Bandwidth reductionNo need to pay for script bandwidth, operations

Faster loader times for end-userLoad once, use on multiple sites

Automatically added headers for caching and compression

One year expiration, GZIP compressionHosts Ajax library scripts such as jQuery and jQuery Validate

Tip: include a fallback

Although a CDN should be always available, include a fallback mechanism to be sure!

<script type="text/javascript" src="http://

ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') {     document.write(unescape("%3Cscript src='/Scripts/jquery-1.4.2.min.js'

type='text/javascript'%3E%3C/script%3E")); } </script>

Using the ScriptManager

demo

ASP.NET AJAX Control Toolkit

AJAX Control Toolkit

Most people know it from the great collection of controlsServer and client-side version available

Client-side can be used with other librariesWorks with 3.5 and 4.0Scripts hosted on CDNIncludes a minifier now as well

JSCSS

Possible to contribute to the project on CodePlexajaxcontroltoolkit.codeplex.com

Included controls

AccordionAlwaysVisibleControlAnimationAsyncFileUploadAutoCompleteCalendarCascadingDropDownCollapsiblePanelColorPickerComboBoxConfirmButtonDragPanelDropDownDropShadow

DynamicPopulateFilteredTextBoxHoverMenuHTMLEditorListSearchMaskedEditModalPopupMultiHandleSliderMutuallyExclusiveNoBotNumericUpDownPagingBulletedListPasswordStrength

PopupControlRatingReorderListResizableControlRoundedCornersSeadragonSliderSlideShowTabsTextBoxWatermarkToggleButtonUpdatePanelAnimationValidatorCallout

The minifier tool

Can be used to crunch JavaScript or CSS files

Removes whitespace, breaks...Command-line tool, possible to include as build taskajaxmin test.js -o test.min.js

Using the toolkit and the minifier

demo

jQuery

Part 2

Hi, jQuery

jQuery isMost popular, cross-browser JavaScript libraryFocusing on making client-side scripting of HTML simpler

Easy navigating the DOMHandling eventsWorking with Ajax

Open-source, released in 2006

Why jQuery?

Many JavaScript frameworks try bending the language out of its natural formjQuery aims at leveraging CSS, HTML and JavaScriptAdvantages

LightweightEasy to learn using familiar CSS syntax and intuitive

Many plugins availableEasy to extend and compatibleIt’s on Microsoft’s radarRich community

$('#something').hide().css('background', 'red').fadeIn(); You can read this, right?

Microsoft and jQuery

Included with Visual Studio in both WebForms and MVC projects

Can be used with or without ScriptManagerScriptManager can be used to compress and combine scriptsIntelliSense available CDN support Microsoft is contributor to jQueryProposed (and accepted) templating, data linking and globalization

Script, don’t get in my way!jQuery helps us writing Unobstrutive JavaScript

codeYou don’t want to mingle style with HTMLWhy would you want to mingle behavior with HTML?

This will become a heavy job without jQuery!

<script type="text/javascript"> window.onload = function() { document.getElementById('testButton').onclick = function() { document.getElementById('xyz').style.color = 'red'; }; };</script>

This code is downloaded every time

jQuery fundamentals: $$ function (aka jQuery() function) returns

A JavaScript object containing an array of DOM elementsIn the order they were found in the documentMatching a specified selector (for example a CSS selector)Known to mankind as a wrapper or wrapped set

It returns the same group of elements, can be chained

$("div.someClass").show();

$("div.someClass").show().addClass("SomeOtherClass");

Finds all DIVs withClass someClass andSets them visible

To the same set, thisadds another class

jQuery fundamentals: the ready handler

Script execution should wait until DOM elements are readyYou say: window.onload?Sadly, this waits for everything to be loaded, including images etcScript execution is too late

Instead, we need to wait only until the DOM tree is createdCan be difficult in cross-browser situationsEasy-peasy with jQuery

$(document).ready(function() {$("div.someClass").show();});

$(function() { $("div.someClass").show();});

jQuery fundamentals: selectors

At the core of jQuery lies its selector engine

Can be used to select elements based on names, attribute, position...

$() is heavily overloadedMaking a selectionCreating new HTML elements

jQuery fundamentals: selectors

Most basic: CSS selectors

Can be combined

Child selector

Attribute selector

$("p a.someClass")

Selects all a’s with someClass

applied within a paragraph

$("p a.someClass, div")

Also includes all DIVs on the page

$("ul.someList > li > a")

Selects all links, directly in an LI,

within an UL with someList class

$("a[href*='http://www.snowball.be']")

Selects all links that contain

a reference to my site

$("span[class^='some']")Select all SPANs whose class

attribute starts with some

$("span[class]")Select all SPANs

that have a class

jQuery fundamentals: selectors

Position

Psuedo-classes (CSS filter selectors & custom selectors)

$("a:first")

Selects first A we can find on the page

$("div:even")

Selects the “even” DIVs on a page

$("table#someTable td:first-child")

Selects the first cells within a table

named someTable

$("input:checked")

Selects checked inputs

(including the ones that weren’t

checked initially)$(":password") Selects all INPUTs

of type password$("input:not(:checked)")Selects all ‘not-

checked’ inputs

Selecting elements using selectors

demo

jQuery fundamentals: creating elements

$(‘...’) selects an element <> $(‘<li>’) creates an elementAttributes can be passed using JavaScript object

$(function(){ $('<img>', {

src: 'someImage.jpg',alt: 'Some nice image'

}).appendTo('body');

$(function(){ $('<div>I’m off</div>')

.appendTo('body');

Creating elements using $

demo

Working with the result of $

Once we have a wrapped set, we can go wild with it!Handle the set as a wholeWork with individual elements

Working with the result of $ (2)

A wrapped set is like an array of elements, normal “array operations” can be done on it

Check the size

Access an indiviual element

Loop over the elements

$('a').size();

$('a') [0];

$('a').get(0);

$('img').each(function(n){ this.alt='image['+n+']';});

Working with the result of $ (3)

Set operations (continued)Add and remove elements

Filter elements

Remember that we are always returning the set

Chaining is always possible!

$("a[class]").add("a[href]");

$("a").filter("[href^='http://']");

$("a[class]").add("a[href]").filter("[href^='http://']")...;

Working with the set

demo

Attributes

When we want to change how an element looks, we can change its attributesjQuery provides the attr() method

2 variations based on number and types of parametersRead a specified property from first element in wrapped set

Set a property on all elements in the wrapped set (0 or more)

Can also accept a functionAttr() helps us dealing with browser-dependencies (again)

jQuery float attribute refers to styleFloat in IE, cssFloat in others

$("#myImage").attr("alt");

$('#myImage').attr('alt', ‘Me in Paris');

$('a[href^=http://']).attr('target ', 'blank‘);

Attributes (2)

jQuery makes it easy to apply and remove CSS classesaddClass(), removeClass(), toggleClass() and hasClass()

Changing indiviual CSS elements is supportedcss() can be used to get or set CSS on an element

$('#mydiv').css("background-color","yellow");

Working with elements

html() can be used to get or set the content of an element

text() can retrieve combined textual content of all elements, including their children

If the elements are form elements, we need to use val()

$('input:checkbox:checked').val(); Retrieves the value from a checked checkbox

$('#mydiv').html();

Retrieves the HTML content

Of mydiv

Working with attributes

demo

Events

A bit of historyOnce upon a time, a browser called Netscape introduced an event model, often referred to as DOM Level 0 Event Model

Creates event handlers as references to a function on a propertyNot what we need if we want to create Unobtrusive JavaScriptOnly one event handler per element for specific event

Only got standardized until DOM Level 2 Event ModelBased on a system of event listeners (addEventListener)IE decided to go its own way (attachEvent)

Using event was a real mess because of browser dependencies

jQuery comes to the rescue

jQuery events

bind() is where it all startsBinds a function to any event on any DOM element

Works in any browser, jQuery hides the details for usPossible to bind more than one event handler for an event on on element

one() removes itself after event handler executed

$('#myimg').bind('click',

function(event){alert(Hello TechEd!');});

Live and let die

bind() is OK for existing elementslive() allows us to create event handlers for elements that don’t exist (yet)

die() removes the live()-created event handlers

$('.someClass').live('click',

function() { //do something

});

If new elements match the selector,

they get this event handler as well

$(".someClass").die("click")

Events

demo

Animations and effects

Core jQuery has some basic effectsMore are available in jQuery UIShould be used with caution!

Most basic ‘animation’ is hiding/showing an element

hide(): sets display:none on the elementshow(): sets display to inline/blocktoggle(): sets visible is hidden and vice-versa

Methods are overloaded, acceptingSpeedCallback

Animations and effects (2)

Elements can also be gradually added/removed

slideDown() and slideUp()Fading in is supported as well

fadeIn() and fadeOut()animate() is mother of all animations

Using ‘target values’ for style properties, jQuery will animate the transition

$('.someClass').animate({opacity:0.25},'slow');

Change the opacitywith a slow animation

Animations

demo

Ajax in the past

When we were all young (in 1998), Microsoft introduced the ability to perform asynchronous requests from script (ActiveX)Later, other browsers implemented a standard, the XMLHttpRequest

IE6 uses an ActiveX objectResult is that we need to do checks

Again... jQuery to the rescue!

if(window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();}

Looks ugly, doesn’t it?

Ajax with jQuery

Basic functionality to load content from a server-side resource:

load()urlparameters: data to be passed (string, object...). If provided, a POST is executed, otherwise a GETcallback (optional)

Next to load, we can also use $.get()/$.getJson() or $.post()

$('#someDiv').load('test.html',

function() { alert('Load was performed.');

});

Loads the HTML page

Basic Ajax request with load()

demo

Ajax with jQuery(2)

If we need all control over the Ajax request we can get:$.ajax()

options: defines an object containing all the properties for the Ajax request

List of options is huge, therefore$.ajaxSetup

options: defines an object containing all the properties for the Ajax request, becoming the default for Ajax requests

$.ajaxSetup({ type: 'POST', timeout: 5000, dataType: 'html'});

Ajax with jQuery(3)

Throughout the Ajax request, we can get feedbackLocal events from the $.ajax() call (callbacks)Global events

Are broadcast to every element within the DOM, can be attached on any element

ajaxStartajaxSendajaxSuccessajaxErrorajaxComplete

More control with ajax()

demo

jQuery Ajax, ASP.NET MVC and WebForms

jQuery can work in harmony with ASP.NET MVC and WebForms

Sample ajax() call for WebForms$.ajax({

type: "post",contentType: "application/json; charset=utf-8",dataType: "json",url: "/Default.aspx/AddTask",data: JSON.stringify(dto)

});

ASP.NET WebForms with jQuery

demo

ASP.NET MVC with jQuery

demo

jQuery UI

Huge extension of jQuery, providing more UI capabilitiesContains number of UI features we’d logically needIncludes

Effects: more advanced than core effectsInteractions: drag and dropWidgets (aka controls): date picker...All can be themed

jqueryui.com contains tool to configure download and “ThemeRoller” toolCode included in jquery-ui.js

Effects

jQuery core contains some basic effects Based on the effect(type, options, speed, callback) method

Has several animation types such as puff, highlight and shake (even explode exists)Also allows to do animations with colors (not possible with animate())

backgroundColor, color...Visibility methods (show()...) are extendedClass methods (addClass()...) are extended

Effects

demo

Interactions

Interactions focus on allowing users to directly interact with elements, which isn’t possible with standard HTML controls

They add advanced behaviors to our pages related to mouse interactions

Available interactions:DraggingDroppingSortingResizingSelecting

Dragging

Easy-peasy (again) with jQuerydraggable() is your friend (heavily overloaded once again)

Allows making elements draggable, possible with options (opacity...)

Overloaded so it also support enabling, disabling... Draggable$('.disableMe').draggable('disable');

$('#someDiv').draggable();

Dragging, dropping and other interactions

demo

Widgets: controls on steroids

New controls (based on existing ones)Contents

ButtonsSlidersProgress barsAutocompletionDate pickerTabsAccordionDialog box

Widgets in action

demo

Breaking news!

October 4th 2010: jQuery has accepted 3 plugins from Microsoft

jQuery TemplatesjQuery Data LinkjQuery Globalization

Are now official pluginsIt was said templates would be part of jQuery core 1.5, but this hasn’t happened...

jQuery Templates

Template is HTML markup (containing tags)

3 plugins:.tmpl(): renders the template.tmplItem(): find the template item.template(): compile the template

<script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script>

$("#movieTemplate").tmpl(movies) .appendTo("#movieList");

jQuery Templates (2)

Container for the template can beInline markupString (computed or downloaded)

Can be retrieved using

Selector is container (div...)Can result in invalid HTML (due to tags)Browser may start to load in this HTML

Best to place it within script tag

$( selector ).tmpl( data )

<script id="myContainer" type="text/x-jquery-tmpl">

.tmpl()

Take the first element in the matched set and render its content as a template, using the specified data.tmpl( [ data ], [ options ] )

Data: The data to render. Can be any JavaScript type, including Array or ObjectOptions: An optional map of user-defined key-value pairs

Can be used with local data, mostly remote data (ajax)

$( "#myTemplate" ).tmpl( myData )

jQuery Templates

demo

jQuery Data Link

Data linking is the data binding engine of jQueryAllows linking a field of an object to a field of another object

Available through the .link() function

When a value of a field changes, the property on the object is changed as well

Links are two-way by default

var person = {};$("form").link(person);

jQuery Data Link

demo

jQuery Globalization

Includes globalization information for over 350 (!) cultures

CurrenciesDate formatting (month names)Number formatting

Uses the standardized culture identifications Ex. nl-BE a great culture ;-)

jQuery Globalization

demo

Summary

Microsoft invests in jQueryjQuery today is most popular JavaScript framework

Light-weight library that uses JavaScript as JavaScript, relying on CSSCross-browser compatible, hides the details (ready handler)Easy eventing modelCan work with MVC & WebFormsEasily extensible to fit your needs, tons of plugins already available

Toolkit and core ASP.NET AJAX have their use too!

Q&A

Thank you!

Gill CleerenMicrosoft Regional Director – Silverlight MVPOrdina Belgium

To jQuery or to Client Library, that’s the question!

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