Hilton Giesenow- The MOSS Show
Building Rich Web Applications with ASP.NET AJAX, jQuery & the ACT
SESSION CODE: WUX304
3
Agenda
ScriptManager – the kingpinThe AJAX Control Toolkit – what’s newjQuery Templates & Data Linking
4
ASP.NET ScriptManager – New Features
Combine Scripts (ASP.NET 3.5)Compress Scripts (ASP.NET 3.5)Cache Scripts (ASP.NET 3.5)Debug/release mode scripts (ASP.NET 3.5)Use the Microsoft Ajax CDN (ASP.NET 4)Globalization/Localization (ASP.NET 4)
6
Using Composite Script Functionality
ScriptManager can combine & compress scriptsCached with a “Far Future” header
8
Other Cool ScriptManager Tricks
Turn off / explicit Microsoft AJAX FrameworkCombining embedded scriptsReplace Scripts“Named” scripts
9
Debug Vs. Release Mode
Debug-friendly while developingCompressed scripts for liveE.g.
MicrosoftAjax.jsMicrosoftAjax.debug.js
13
Content Delivery Network Benefits
“Local” script loading (geo-aware)Servers located around the world
Bandwidth reductionHeaders for caching & compression
15
Using the CDN with the ScriptManager
All Microsoft scriptsIncludes jQuery scriptsCustom controls can specify CDN locations
16
Ajax Control Toolkit (ACT)
Long historyCodePlex FoundationScripts available on the CDNSome new controlsProvides an Ajax Minifier tool (new)
17
Controls in the Ajax Control ToolkitAccordionAlwaysVisibleControlAnimationAsyncFileUploadAutoCompleteCalendarCascadingDropDownCollapsiblePanelColorPickerComboBoxConfirmButtonDragPanelDropDownDropShadow
DynamicPopulateFilteredTextBoxHoverMenuHTMLEditorListSearchMaskedEditModalPopupMultiHandleSliderMutuallyExclusiveNoBotNumericUpDownPagingBulletedListPasswordStrengthPopupControl
RatingReorderListResizableControlRoundedCornersSeadragonSliderSlideShowTabsTextBoxWatermarkToggleButtonUpdatePanelAnimationValidatorCallout
20
The Ajax Minifier Tool
Shrink JavaScript or CSS files
Minifying a Script:
ajaxmin test.js -o test.min.js
Minifying a CSS file:
ajaxmin test.css -o test.min.css
21
So Now You’ve Got Some Data…var users = [ { firstName: “…", lastName: “…", blogAddress: “…", laptops: [“…", “…"], }, { firstName: “…", lastName: “…", blogAddress: “…", laptops: [“…", “…"], }];<ul id="usersList"></ul>
var usersListUL = document.getElementById('usersList');
for (var i = 0; i < users.length; i++) { var user = users[i]; var newLI = "<li><a href=\"" + user.blogAddress + "\">" + user.firstName +
" " + user.lastName + "</a></li>"; usersListUL.innerHTML += newLI;}
22
Part 2 – More Complex Examplevar usersListUL = document.getElementById('usersList');
for (var i = 0; i < users.length; i++) { var user = users[i]; var newLI = "<li><a href=\"" + user.blogAddress + "\">" + user.firstName + " " + user.lastName + "</a>";
if (user.laptops != null && user.laptops.length > 0) { newLI += "<br/>"; newLI += "<b>Laptops:</b> ";
var counter = 0; for (var j = 0; j < user.laptops.length; j++) { var laptop = user.laptops[j];
newLI += laptop;
if (counter < user.laptops.length - 1) { newLI += ", "; } counter += 1; }
}
newLI += "</li>"; usersListUL.innerHTML += newLI;}
23
HTML Template Solutions
Simplify building AJAX applicationsMinimize custom JavaScriptSimplify Maintenance
Several exist:Jon Resig's JavaScript Micro-TemplatingjBindChain.jsjQuery Templates (new)
24
jQuery Templates
Microsoft contributionOpen, transparent & collaborativeSpecs & Proposals on jQuery ForumsPrototypes as Plugins in GithubProposal, Spec and Prototype RTM online:
ASP.NET Ajax
Library
jQuery Plugins
jQuery Core
Proposal, Spec,Prototype
Core Team
http://github.com/jquery/jquery-tmpl
25
<script id="MyTemplate" type="text/x-jquery-tmpl"> <li><a href="${blogAddress}">${firstName} {{= lastName}}</a></li></script>
jQuery Template Syntax
26
Applying a Template
<script id="MyTemplate" type="text/x-jquery-tmpl"> <li><a href="${blogAddress}">${firstName} {{= lastName}}</a></li></script>
<ul id="usersList"></ul>
<script> $('#usersList').append("#MyTemplate", users);</script>
27
Adding Conditional Logic{{if product == null }} <tr> <td>No product selected</td> </tr>{{else}} <tr> <td> ${product.Name}: ${product.NumberOrdered} ordered at R${product.Price} per item </td> </tr> {{/if}}
28
Working with Loops{{if MainItems == null }} <tr> <td>No items selected</td> </tr>{{else}} {{each MainItems}} <tr> <td> ${this.Name}: ${this.NumberOrdered} ordered at R${this.Price} per item </td> </tr> {{/each}}{{/if}}
30
So Now You’ve Changed Some Data…<input id="nameTextbox" onchange="nameTextbox_Changed(this)" /> <br/><input id="ageTextbox" onchange="ageTextbox_Changed(this)" /> <br/>
<input type="button" id="btnSave" value="save" onclick="btnSave_Click(this)" />
31
Part 2 – linking one way<script>
var person = { firstName: "", age: 0, canVote: false };
function nameTextbox_Changed(sender) { person.firstName = sender.value; }
function ageTextbox_Changed(sender) { var adjustedAge = Math.round(sender.value); person.age = adjustedAge; person.canVote = adjustedAge >= 18; }
function btnSave_Click(sender) { alert(person.firstName + " (" + person.age + ") can vote: " +
person.canVote); }
</script>
32
Part 3 – Linking back function btnSetInCode_Click(sender) { person.firstName = "Hilton"; person.age = 120; document.getElementById("nameTextbox").value = person.firstName; document.getElementById("ageTextbox").value = person.age; }
34
Data Linking
Name: <input id="firstName" /> <br/>Age: <input id="age" /> <br/>
<input type="button" id="btnSave" value="save" /> <br/>
<script> var person = { };
$().ready(function () {
$("form").link(person);
$("#btnSave").click(function () { alert(person.firstName + " can vote:" + person.canVote); });
});</script>
http://github.com/jquery/jquery-datalink/
35
person.firstName = "Hilton"; person.age = 120;
Data Linking
Must change data with jQuery:
$(person).data("firstName", "Hilton");$(person).data("age", 120);
36
Resources
The Moss Show - http://www.TheMossShow.com ASP.NET – http://www.asp.net/Scott Guthrie (“The Gu”) - http://weblogs.asp.net/scottgu/Official jQuery site - http://jquery.com/
37
(WUX305) Microsoft ASP.NET MVC: What’s New in v2 and coming in v3?
(WTB228) HTML5 – What’s the fuss?
Related Content [TBD]
38
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
SMS [ Your Name ] and the word “Web” to 41491Need more Information?
© 2008 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.