Building Rich AJAX Applications with jQuery and the ASP.NET AJAX Control Toolkit

Dan WahlinThe Wahlin Grouphttp://www.TheWahlinGroup.com

SESSION CODE: WEB311

ASP.NET ScriptManager and the CDNAJAX Control ToolkitjQuery TemplatesjQuery Data Linking

Agenda

Using the ASP.NET ScriptManager

ASP.NET ScriptManager features:Switch between debug/release mode scriptsGlobalization/LocalizationCombine Scripts (ASP.NET 3.5)Compress Scripts (ASP.NET 3.5)Cache Scripts with a Far Future header (ASP.NET 3.5)Use the Microsoft Ajax CDN (ASP.NET 4)

Using Composite Script Functionality

ScriptManager can combine and compress scriptsScripts cached with a Far Future header

Composition Script Benefits

Using the CDN with the ScriptManager

CDN = Content Delivery NetworkLoad all ASP.NET Framework scripts from the Microsoft CDN, including AJAX and Web Forms scriptsCustom controls can specify CDN locations

Content Delivery Network Benefits

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

Bandwidth reductionNo need to pay for script bandwidth, operations

We set headers for caching and compressionOne year expiration, GZIP compression

Hosts Ajax library scripts such as jQuery and jQuery Validate

Using Script Composition Features

DEMO

Ajax Control Toolkit (ACT)

Available at http://www.asp.net/ajaxlibrary/act.ashxPart of the CodePlex Foundation for open source projects

Review and accept patches from the communityLearn how to contribute at: http://www.asp.net/ajaxlibrary/act_contribute.ashx

Targets both ASP.NET 3.5 and ASP.NET 4.0Scripts available on the Content Delivery Network (CDN)Provides an Ajax Minifier tool

Controls in the Ajax Control Toolkit40 Web Forms Controls:

AccordionAlwaysVisibleControlAnimationAsyncFileUploadAutoCompleteCalendarCascadingDropDownCollapsiblePanelColorPickerComboBoxConfirmButtonDragPanelDropDownDropShadow

DynamicPopulateFilteredTextBoxHoverMenuHTMLEditorListSearchMaskedEditModalPopupMultiHandleSliderMutuallyExclusiveNoBotNumericUpDownPagingBulletedListPasswordStrength

PopupControlRatingReorderListResizableControlRoundedCornersSeadragonSliderSlideShowTabsTextBoxWatermarkToggleButtonUpdatePanelAnimationValidatorCallout

The Ajax Minifier Tool

Used to shrink JavaScript or CSS files to provide increased performanceAvailable at http://aspnet.codeplex.com/releases/view/40584

Minifying a Script:

ajaxmin test.js -o test.min.js

Minifying a CSS file:

ajaxmin test.css -o test.min.css

Using ACT Controls and the Ajax Minifier

DEMO

HTML Template Solutions

HTML templates simplify building AJAX applicationsMinimize custom JavaScriptSimplify Maintenance

Several HTML template solutions exist:Jon Resig's JavaScript Micro-TemplatingjBindChain.jsjQuery Templates (being developed)

jQuery Templates

Microsoft contributionOpen, transparent and collaborativeSpecification & Proposals on jQuery

ForumsPrototypes as Plugins in GithubProposal, Spec and Prototype online:

http://github.com/jquery/jquery-tmpl

ASP.NET Ajax Library jQuery Plugins

jQuery Core

Proposal, Specification,Prototype

Core Team

jQuery Template Syntax

<script id="MyTemplate" type="text/html"> <div id="DeliveryDiv">{{= DeliveryName}}</div></script>

Applying a Template

<script id="MyTemplate" type="text/html"> <div id="DeliveryDiv">{{= DeliveryName}}</div></script>

<div id="OutputDiv"></div>

$('#MyTemplate') .render(json) .appendTo('#OutputDiv');

Adding Conditional Logic

{{if MainItems == null }} <tr> <td>No items selected</td> </tr>{{else}} <tr> <td> {{=product.Name}: {{=product.NumberOrdered}} ordered at ${{=product.Price}} per item

</td> </tr> {{/if}}

Working with Loops{{if MainItems == null }} <tr> <td>No items selected</td> </tr>{{else}} {{each(i,mmi) MainItems}} <tr> <td> {{=mmi.Name}: {{=mmi.NumberOrdered} ordered at ${{=mmi.Price} per item

</td> </tr> {{/each}}{{/if}}

Using jQuery Templates

DEMO

Data Linking

Synchronize data and UI using jQuery Data Linking:

Data Linking

Must change data with jQuery:

Using jQuery Data Linking

DEMO

Bloghttp://weblogs.asp.net/dwahlin

Twitter@DanWahlin

Email:dwahlin@theWahlinGroup.com

Track ResourcesASP.NET – http://www.asp.net/ Silverlight – http://silverlight/ Expression – http://www.microsoft.com/expression/ Internet Explorer – http://www.microsoft.com/windows/internet-explorer/default.aspx

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

Complete an evaluation on CommNet and enter to win!

Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st

http://northamerica.msteched.com/registration

You can also register at the

North America 2011 kiosk located at registrationJoin us in Atlanta next year

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

JUNE 7-10, 2010 | NEW ORLEANS, LA