1

An Introduction and Comparison between jQuery and the AJAX Control Toolkit

T Josephson & E RalstonBIS BoF

August 24th, 2009

2

3

Ajax Control Toolkit

Library of CSS-driven, Ajax-enabled server-side controls and extenders use like conventional ASP.NET controls encapsulate client-side CSS and JavaScript Ajax-aware as appropriate

Developed using a collaborative source model source freely available with modification license contributions welcome from all developers 37 controls in current release

4

Controls vs. Extenders

4

*Controls* are new UI elements

*Extenders* extend existing UI elements

Example: Tabs, ComboBox, HTMLEditor, NoBot, Rating, ReorderList are the controls

AutoComplete and Calendar are TextBox extenders

Both offer client-side functionality with sophisticated JavaScript renderings

Extenders increase flexibility of toolkit: apply to a variety of ASP.NET controls apply to existing controls in existing apps

5

Ajax Control Toolkit Summary

5

Toolkit offers client-side controls in a convention ASP.NET model encapsulates complex JavaScript, CSS and Ajax

Extender model increases flexibility of toolkit Toolkit offers some nice functionality Requires install of the Ajax Control Toolkit to get startedhttp://www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxControlToolkit

Interesting development model for Microsoft contributions welcome from all!

jQuery

Open Source JavaScript LibraryGoals

Leverage CSS SelectorsSimplify DOM ManipulationLightweightBe extensibleBe functional

6

Events & Effects

Provides programmatic event hookupMouse & Keyboard

Apply various effects Show/Hide, Fade, Slide, and AnimateOther effects available using plug-ins

7

jQuery Plug-ins

JavaScript Libraries that depend on jQuery and add functionalityjQuery UI is one pluginOver 1000 more available as plugins.jquery.com

“Controls”AnimationLayoutMediaData

8

AJAX Control Toolkit Demo

9

jQuery Demo

10

jQuery & Microsoft AJAX

11

jQuery is supported by MicrosoftjQuery will ship with Visual Studio 2010

Available for 2008 with a patch

Pitfalls When Using jQuery & AJAX Control Toolkit Together

AJAX + jQuery + jQuery Plug-ins = a lot of JavaScript!

AJAX Controls have unreliable IDs, use CSS Class or element type

Using AJAX to update the screen removes jQuery effectsA plain UpdatePanel can also have this effect

12

When should I use each library?

AJAX Control Toolkit when…You are using ASP.net & Visual StudioYou want to callback to the server implicitlyYou want a simple solution

jQuery when…You are really comfortable with JavaScriptMost interaction is client-side onlyYou need a custom solution

13

Questions?

14