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)

5

demo

Using Script Composition Features

6

Using Composite Script Functionality

ScriptManager can combine & compress scriptsCached with a “Far Future” header

7

Composition Script Benefits

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

10

demo

Debug Vs. Release Mode

11

What is a Content Delivery Network (CDN)?

x.x.x.x

a.b.com

12

What is a Content Delivery Network (CDN)

13

Content Delivery Network Benefits

“Local” script loading (geo-aware)Servers located around the world

Bandwidth reductionHeaders for caching & compression

14

demo

Using the CDN

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

18

demo

Using ACT Controls and the Ajax Minifier

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}}

29

demo

Using jQuery Templates

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;    }

33

demo

Using jQuery Data Linking

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?

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.