Hilton Giesenow - The MOSS Show Building Rich Web Applications with ASP.NET AJAX, jQuery & the ACT SESSION CODE: WUX304

3 Agenda ScriptManager – the kingpin The AJAX Control Toolkit – what’s new jQuery 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

6 Using Composite Script Functionality ScriptManager can combine & compress scripts Cached with a “Far Future” header

7 Composition Script Benefits

8 Other Cool ScriptManager Tricks Turn off / explicit Microsoft AJAX Framework Combining embedded scripts Replace Scripts “Named” scripts

9 Debug Vs. Release Mode Debug-friendly while developing Compressed scripts for live E.g. MicrosoftAjax.js MicrosoftAjax.debug.js

10 demo

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 reduction Headers for caching & compression

14 demo

15 Using the CDN with the ScriptManager All Microsoft scripts Includes jQuery scripts Custom controls can specify CDN locations

16 Ajax Control Toolkit (ACT) Long history CodePlex Foundation Scripts available on the CDN Some new controls Provides an Ajax Minifier tool (new)

17 Controls in the Ajax Control Toolkit Accordion AlwaysVisibleControl Animation AsyncFileUpload AutoComplete Calendar CascadingDropDown CollapsiblePanel ColorPicker ComboBox ConfirmButton DragPanel DropDown DropShadow 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

18 demo

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: [“…", “…"], } ]; var usersListUL = document.getElementById('usersList'); for (var i = 0; i " + user.firstName + " " + user.lastName + " "; usersListUL.innerHTML += newLI; }

22 Part 2 – More Complex Example var usersListUL = document.getElementById('usersList'); for (var i = 0; i " + user.firstName + " " + user.lastName + " "; if (user.laptops != null && user.laptops.length > 0) { newLI += " "; newLI += " Laptops: "; var counter = 0; for (var j = 0; j "; usersListUL.innerHTML += newLI; }

23 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)

24 jQuery Templates Microsoft contribution Open, transparent & collaborative Specs & Proposals on jQuery Forums Prototypes as Plugins in Github Proposal, Spec and Prototype RTM online: Proposal, Spec, Prototype Core Team github.com/jquery/jquery-tmpl

25 ${firstName} {{= lastName}} jQuery Template Syntax

26 Applying a Template ${firstName} {{= lastName}} $('#usersList').append("#MyTemplate", users);

27 Adding Conditional Logic {{if product == null }} No product selected {{else}} ${product.Name}: ${product.NumberOrdered} ordered at R${product.Price} per item {{/if}}

28 Working with Loops {{if MainItems == null }} No items selected {{else}} {{each MainItems}} ${this.Name}: ${this.NumberOrdered} ordered at R${this.Price} per item {{/each}} {{/if}}

29 demo

30 So Now You’ve Changed Some Data…

31 Part 2 – linking one way 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); }

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

34 Data Linking Name: Age: var person = { }; $().ready(function () { $("form").link(person); $("#btnSave").click(function () { alert(person.firstName + " can vote:" + person.canVote); }); });

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 - ASP.NET – Scott Guthrie (“The Gu”) - Official jQuery site - Required Slide Track PMs will supply the content for this slide, which will be inserted during the final scrub.

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 SMS [ Your Name ] and the word “Web” to Need 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.