Professional Documents
Culture Documents
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
Using Script Composition Features
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
Debug Vs. Release Mode
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
Using the CDN
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
DynamicPopulate
17
demo
Using ACT Controls and the Ajax
Minifier
18
The Ajax Minifier Tool
Shrink JavaScript or CSS files
Minifying a Script:
for(vari=0;i<users.length;i++){
varuser=users[i];
varnewLI="<li><ahref=\""+user.blogAddress+"\">"+user.firstName
""+user.lastName+"</a></li>";
usersListUL.innerHTML+=newLI;
}
21
Part 2 More Complex Example
varusersListUL=document.getElementById('usersList');
for(vari=0;i<users.length;i++){
varuser=users[i];
varnewLI="<li><ahref=\""+user.blogAddress+"\">"+user.firstName+""+user.lastName+
"</a>";
if(user.laptops!=null&&user.laptops.length>0){
newLI+="<br/>";
newLI+="<b>Laptops:</b>";
varcounter=0;
for(varj=0;j<user.laptops.length;j++){
varlaptop=user.laptops[j];
newLI+=laptop;
if(counter<user.laptops.length-1){
newLI+=",";
}
counter+=1;
}
}
newLI+="</li>";
usersListUL.innerHTML+=newLI;
}
22
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 Proposal,
Spec,
jQuery
Ajax Plugins
Prototyp
Library
e
25
Applying a Template
<scriptid="MyTemplate"type="text/x-jquery-tmpl">
<li><ahref="${blogAddress}">${firstName}{{=
lastName}}</a></li>
</script>
<ulid="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}}
28 {{/if}}
demo
Using jQuery Templates
29
So Now Youve Changed Some Data
<inputid="nameTextbox"onchange="nameTextbox_Changed(this)"/><br/>
<inputid="ageTextbox"onchange="ageTextbox_Changed(this)"/><br/>
<inputtype="button"id="btnSave"value="save"onclick="btnSave_Click(th
is)"/>
30
Part 2 linking one way
<script>
varperson={firstName:"",age:0,canVote:false};
functionnameTextbox_Changed(sender){
person.firstName=sender.value;
}
functionageTextbox_Changed(sender){
varadjustedAge=Math.round(sender.value);
person.age=adjustedAge;
person.canVote=adjustedAge>=18;
}
functionbtnSave_Click(sender){
alert(person.firstName+"("+person.age+")canvote:"+
person.canVote);
}
</script>
31
Part 3 Linking back
functionbtnSetInCode_Click(sender){
person.firstName="Hilton";
person.age=120;
document.getElementById("nameTextbox").value=person.firstNa
me;
document.getElementById("ageTextbox").value=person.age;
}
32
demo
Using jQuery Data Linking
33
Data Linking http://github.com/jquery/jquery-
datalink/
Name:<inputid="firstName"/><br/>
Age:<inputid="age"/><br/>
<inputtype="button"id="btnSave"value="save"/><br/>
<script>
varperson={};
$().ready(function(){
$("form").link(person);
$("#btnSave").click(function(){
alert(person.firstName+"canvote:"+ 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: Whats New in v2 and
coming in v3?
37
Resources
Learnin
Sessions
g
Sessions On-Demand
On-Demand &
& Community
Community Microsoft Certification & Training 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
Complete an
evaluation via
CommNet and Tag
to win amazing
prizes!
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.