Simon Amrein Consultant Trivadis AG What is ASP.NET 4.0 Ajax Ajax Control Toolkit Microsoft Ajax Content Delivery Network jQuery jQuery Client Templates.
Post on 24-Dec-2015
216 Views
Preview:
Transcript
Simon AmreinConsultantTrivadis AG
The 'J' in your browser: Jquery & aJax
The 'J' in your browserAgenda
What isASP.NET 4.0 AjaxAjax Control ToolkitMicrosoft Ajax Content Delivery NetworkjQuery
jQuery Client Templates und DatabindingSummary & Resources
‘J’ popularity
Ajax
But this is the football team...
Ajax c#
‘J’ popularity
‘J’ popularity
Ajax control toolkit
‘J’ popularity
jQuery
The 'J' in your browserNot in the Agenda
ASP.NET Ajax LibraryThe Beta-Version was the lastversion. Microsoft is now supporting the jQuery Project
ASP.NET 4.0 AjaxServer Controls
ScriptManager ControlThe ScriptManager control manages client script for AJAX-enabled ASP.NET Web pages.
UpdatePanel ControlEnable partial-page updates
UpdateProgress ControlTemplate to show that an asynchronus method is working
Timer Control
ASP.NET 4.0 AjaxDemo
Ajax Control Toolkit (ACT)
The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications.The Ajax Control Toolkit contains more than 40 controls
AutoCompleteCollapsiblePanelColorPickerMaskedEditCalendarAccordionWatermark…
Ajax Control Toolkit (ACT)Controls
Visual Studio 2008 Ajax Control Toolkit for .NET 3.5.
Visual Studio 2010.NET 4 or .NET 3.5 versions of the ACT
Ajax Control Toolkit (ACT)Versions
Ajax Control ToolkitDemo
Microsoft Ajax Content Delivery Network (CDN)The Microsoft Ajax Content Delivery
Network (CDN) enables you to easily add popular JavaScript libraries such as jQuery to your Web applications. For example, you can start using jQuery simply by adding a <script> tag to your page that points to Ajax.microsoft.com.
http://www.asp.net/ajaxlibrary/CDN.ashx
CDN – Why?
Improve the performance Ajax applications.
Contents of the Microsoft Ajax CDN are cached on servers located around the world.
CDN – Include…
The Microsoft Ajax CDN includes:jQuery (owned by the jQuery Team)jQuery UI (owned by the jQuery UI)jQuery Validation (jQuery team)jQuery CycleAjax Control Toolkit (owned by the CodePlex)ASP.NET AjaxASP.NET MVC JavaScript Files
http://www.asp.net/ajaxLibrary/cdn.ashx
CDNDemo
jQuery (“$”)Basics
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML
Used by over 31% of the 10,000 most visited websites
jQuery is the most popular JavaScript library in use today
Source: Wikipedia
How to get jQuery
www.jquery.com
Compressed for productionUncompressed for developing / debugging
jQueryBasics
ComponentsjQuery CoreSelectorsAttributesEvents
EffectsAjaxjQuery UI…
All Selector (“*”) Selects all elements.Class Selector (“.class”) Elements with the given class. Element Selector (“element”) Selects all elements with the given tag name.ID Selector (“#id”) Element with the given id attribute.
jQueryBasic Selectors<div id="myDiv">
Some Content</div> <script> $("#myDiv").SomeThing()</script>
.click()
.dblclick()
.mousedown()
jQueryJust a few Events
<div id="target"> Click here </div>
$('#target').click(function() {alert('Handler for .click() called.'); });
.mouseenter().mouseleave().mousemove()
.mouseout()…
.show()
.hide()
.animate()
.fadeIn()
.fadeOut()
.slideUp()
.slideDown()…
jQuerySome Effects
$('#button').click(function() { $('#target').animate( { opacity: 0.25, left: '+=50', height: 'toggle' } , 5000 , function() { //Animation completed }); });
jQuery – BasicsDemo
jQueryClient Templates
jQuery templates contain markup with binding expressions. Templates are applied to data objects or arrays, and rendered into the HTML DOMAvailable as a plugin
The plugin requires jQuery version 1.4.2.Will be included in major release 1.5
http://api.jquery.com/tmpl/
jQuery Client Templates<script id=“template" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li> </script><script type="text/javascript"> var employees = [ {Name:"Simon Amrein", Location: "Zurich"}, {Name:"Stefan Frutiger", Location: "Bern"}, {Name:"Meinrad Weiss", Location : "Zurich"}];
element $("#template").tmpl( movies ).appendTo( "#movieList" ); </script>
<ul id="movieList"></ul>
jQuery Client TemplatesDemo
jQueryData-Linking
The link API allows you to very quickly and easily link fields of a form to an object. Any changes to the form fields are automatically pushed onto the objectConverters lets you modify the format or type of the value as it flows between the two sides This plugin currently depends on jQuery version 1.4.3
var person = {};
$("form").link(person, { firstName: "first-name", lastName: "last-name", });
jQueryData Link
var person = {}; $("#age").link(person, { age: { convert: function(value) { return Math.round(Math.parseFloat(value)); } } });
$("#name").val("7.5"); alert(person.age); // 8
jQueryData Link Converter
jQuery – Data LinkDemo
jQuery & MicrosoftOutlook
In March, the jQuery Community announced at MIX 2010 that Microsoft had committed to supporting the jQuery Project via code contributions and resources.Microsoft made available for public review their first jQuery plugin which provided client-side templating capabilities to the jQuery communityThe Microsoft-contributed plugins for version 1.5 – the jQuery Templates plugin, the jQuery Data Link plugin, and the jQuery Globalization plugin
jQuery V 1.5
jQuery.require() will load a plugin2 only after plugin1
jQuery.forEach jQuery.exception (easy to hook into throw) And much more…
The 'J' in your browserSummary
The ‘J’ stands for rich and interactive Web applications
Microsoft stopped investments for client scripts
But Ajax and jQuery will be the future
You don’t have to use it, but you will love it!
The 'J' in your browserRessources
ASP.NET 4 and VS 2010 Web Development: http://www.asp.net/learn/whitepapers/aspnet4#0.2__Toc253429252
jQuery:http://jquery.com/http://api.jquery.com/
Pluginshttp://plugins.jquery.com/
SwissPDC10@TrivadisTermin: 28.10.2010Ort: Zürich - in der Trivadis Niederlassung Agenda:
16:00 h: Registrierung und Begrüssungskaffee 16:30 h: Silverlight, Azure and WP7 17:30 h: Pause mit Verpflegung18:00 h: Keynote PDC10 mit Steve Ballmer 20:00 h: Pause mit Verpflegung 20:30 h: Podiumsdiskussion: "Was bedeuten die Ankündigung für die Praxis" 21:30 h: Verlosung der Preise
Q&A
© 2010 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.
top related