Post on 05-Jan-2016
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