SESSION CODE: WUX304
Building Rich Web
Applications with ASP.NET
AJAX, jQuery & the ACT
Hilton Giesenow
- The MOSS Show
Agenda
ScriptManager – the kingpin
The AJAX Control Toolkit – what’s new
jQuery Templates & Data Linking
3
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)
4
demo
5
Using Composite Script Functionality
ScriptManager can combine & compress scripts
Cached with a “Far Future” header
6
Composition Script Benefits
7
Other Cool ScriptManager Tricks
Turn off / explicit Microsoft AJAX Framework
Combining embedded scripts
Replace Scripts
“Named” scripts
8
Debug Vs. Release Mode
Debug-friendly while developing
Compressed scripts for live
E.g.
MicrosoftAjax.js
MicrosoftAjax.debug.js
9
demo
10
What is a Content Delivery Network (CDN)?
x.x.x.x
a.b.com
11
What is a Content Delivery Network (CDN)
12
Content Delivery Network Benefits
“Local” script loading (geo-aware)
Servers located around the world
Bandwidth reduction
Headers for caching & compression
13
demo
14
Using the CDN with the ScriptManager
All Microsoft scripts
Includes jQuery scripts
Custom controls can specify CDN locations
15
Ajax Control Toolkit (ACT)
Long history
CodePlex Foundation
Scripts available on the CDN
Some new controls
Provides an Ajax Minifier tool (new)
16
Controls in the Ajax Control Toolkit
Accordion
AlwaysVisibleControl
Animation
AsyncFileUpload
AutoComplete
Calendar
CascadingDropDown
CollapsiblePanel
ColorPicker
ComboBox
ConfirmButton
DragPanel
DropDown
DropShadow
17
DynamicPopulate
FilteredTextBox
HoverMenu
HTMLEditor
ListSearch
MaskedEdit
ModalPopup
MultiHandleSlider
MutuallyExclusive
NoBot
NumericUpDown
PagingBulletedList
PasswordStrength
PopupControl
Rating
ReorderList
ResizableControl
RoundedCorners
Seadragon
Slider
SlideShow
Tabs
TextBoxWatermark
ToggleButton
UpdatePanelAnimation
ValidatorCallout
demo
18
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
20
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;
}
21
Part 2 – More Complex Example
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>";
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;
}
}
22
newLI += "</li>";
usersListUL.innerHTML += newLI;
HTML Template Solutions
Simplify building AJAX applications
Minimize custom JavaScript
Simplify Maintenance
Several exist:
Jon Resig's JavaScript Micro-Templating
jBind
Chain.js
jQuery Templates (new)
23
jQuery Templates
ASP.NET
Ajax
Library
Proposal,
Spec,
Prototype
Microsoft contribution
Open, transparent & collaborative
Specs & Proposals on jQuery Forums
Prototypes as Plugins in Github
Proposal, Spec and Prototype RTM online:
http://github.com/jquery/jquery-tmpl
24
jQuery
Plugins
Core Team
jQuery
Core
jQuery Template Syntax
<script id="MyTemplate" type="text/x-jquery-tmpl">
<li><a href="${blogAddress}">${firstName} {{= lastName}}</a></li>
</script>
25
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>
26
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}}
27
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}}
28
demo
29
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)" />
30
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>
31
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;
}
32
demo
33
Data Linking
http://github.com/jquery/jquery-datalink/
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>
34
Data Linking
Must change data with jQuery:
person.firstName = "Hilton";
person.age = 120;
$(person).data("firstName", "Hilton");
$(person).data("age", 120);
35
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/
36
Related Content [TBD]
(WUX305) Microsoft ASP.NET MVC: What’s New in v2 and coming in v3?
(WTB228) HTML5 – What’s the fuss?
37
Resources
www.microsoft.com/teched
www.microsoft.com/learning
http://microsoft.com/technet
http://microsoft.com/msdn
Need more Information?
SMS [ Your Name ] and the word “Web” to 41491
38
© 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.