You are on page 1of 40

Building Rich Web

SESSION CODE: WUX304


Applications with
ASP.NET AJAX, jQuery
& the ACT
Hilton Giesenow
- The MOSS Show
Agenda
ScriptManager the kingpin
The AJAX Control Toolkit whats 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
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:

ajaxmin test.js -o test.min.js

Minifying a CSS file:

ajaxmin test.css -o test.min.css


20
So Now Youve Got Some Data
varusers=[
{firstName:",lastName:",blogAddress:",laptops:[",
"],},
{firstName:",lastName:",blogAddress:",laptops:[","
],}
<ulid="usersList"></ul>
];
varusersListUL=document.getElementById('usersList');

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

Microsoft contribution Core


Open, transparent & collaborative Team
Specs & Proposals on jQuery jQuery
Forums Core

Prototypes as Plugins in Github


Proposal, Spec and Prototype RTM
http://github.com/jquery/jquery-tmpl
online:
24
jQuery Template Syntax
<scriptid="MyTemplate"type="text/x-jquery-tmpl">
<li><ahref="${blogAddress}">${firstName}{{=
lastName}}</a></li>
</script>

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?

(WTB228) HTML5 Whats the fuss?

37
Resources
Learnin
Sessions
g
Sessions On-Demand
On-Demand &
& Community
Community Microsoft Certification & Training Resources

www.microsoft.com/teched www.microsoft.com/learning

Resources for IT Professionals Resources for Developers

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.

You might also like