Kay Herzam@kherzamHerzam IT Consulting GmbH
Webentwicklung mit ASP.NET 4, Ajax und jQuery
www.dnug-bern.ch Grösste aktive .NET User Group der SchweizRegelmässige Treffen mit Schwerpunktthemen
Nächste EventsMo, 30.5.2011User Experience Crash KursDo, 9.6.2011 DotNetNuke
.NET User Group Bern
ASP.NET und Ajax FrameworksASP.NET AjaxAjax Control ToolkitMicrosoft Ajax Library
jQuerySelektoren, Events, Ajax, Client Templates, jQuery UI, Plugins
jQuery mit WebForms verwenden
Agenda
Webentwicklung und Browser
Webentwicklung und Browser
JScript Editor ExtensionsOutliningBrace Matching
Webentwicklung mit JavaScript Unobtrusive
Funktioniert auch ohne JavaScriptServer-basiert«Hijaxing»
100% JavaScript
«All or nothing»Client-basiert
ASP.NET Ajax
ASP.NET Ajax (Atlas)Für VS 2005 als Zusatz, seit VS 2008 Bestandteil von ASP.NET
MicrosoftAjax.jsCross-Browser LibraryScripts für UpdatePanel etc.
Server Ajax vs. reines Ajax
“reines” AJAX
Renderi
ng
Server AJAX
Initial Request: HTML
HTML / JSON
Form POST
HTML
JSON
JSONRenderi
ng
ASP.NET Ajax UpdatePanel
Demo
ASP.NET Ajax UpdatePanel
Bei einem Update werden per Default immer alle Panels aktualisiert
UpdateMode = Conditional macht fast immer Sinn
Bei einem Update wird immer der ganze Page Lifecycle durchlaufen
ScriptManager.IsInAsyncPostbackScriptManager.AsyncPostbackSourceElementID
Server ControlsEinige Ajax-fähige ControlsAbstraktionen um eingebettetes JavaScript für DHTML Controls
Ajax Control Toolkit
Ajax Control Toolkit
Demo
ASP.NET Ajax Library
Ehemals Microsoft Ajax LibraryAb 2008, Nachfolger von MicrosoftAjax.jsScript Management, Templating, Data Integration6 Previews, 1 Beta VersionMix 2010, Las VegasMicrosoft kündigt Partnerschaft mit jQuery an!
jQuery
jQuery ist…
…eine unabhängige Cross-Browser JavaScript Library
Entworfen mit dem Ziel, das Client-seitige Scripting von HTML zu vereinfachen
jQuery ist…
…von Microsoft offiziell supported
…die populärste JavaScript Library
…hervorragend dokumentierthttp://docs.jquery.com
jQuery hat…
…eine sehr kompakte Syntax«write less, do more»
…auch eine mobile Variantehttp://jquerymobile.com
jQueryWie kriege ich jQuery?
http://jquery.com
In VS 2010 enthalten
jQueryWie kriege ich jQuery?
Microsoft Content Delivery Network (CDN)<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
MS CDN bietet unter anderemjQueryjQuery UIAjax Control Toolkit
jQueryWie kriege ich jQuery?
NuGet
Was kann ich mit jQuery tun?
Seitenelemente anzeigen oder verbergenCSS verändernDynamisch Elemente hinzufügenText oder Attribute verändernEvents auslösen oder auf Events reagierenAjax
jQuery
CoreSelektorenAttributeTraversieren im DOMDOM ManipulationCSS
EventsEffekteAjaxUtilitiesjQuery UI
jQuery
jQuery();
jQuery
$();
jQuery
window.onload() = …
vs.
$(document).ready();
jQuery
$(document).ready() und Intellisense für jQuery
Demo
jQuery Selektoren
$();
ul
#myId
.myClass
sel1, sel2
table tbody tr
jQuery Selektoren
Demo
jQuery Events
click()dblclick()mousedown()mouseenter()mouseleave()mousemove()mouseout()
hover()keydown()keypress()keyup()scroll()…
jQuery Events
Wenn Seitenelemente dynamisch hinzugefügt werden, so werden bestehende Event Handler diese neuen Elemente nicht erkennen.
$('.someClass').live('click', …)
Live Event Handler können mit die() wieder entfernt werden.
jQuery Events
Demo
jQuery Ajax
jQuery Ajax
Das jQuery API kapselt die XMLHttpRequest Klassevar xhr;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); // Mozilla/Webkit/Opera} else if (window.ActiveXObject) { xhr = new ActiveXObject('Msxml2.XMLHTTP'); // IE} else { throw new Error('Ajax likely not supported');}
Asynchrone Aufrufe via HTTP GET oder POSTDaten können im HTML, JSON, XML oder Text Format sein
jQuery Ajax
Demo
jQuery UI
jQuery UI
jQuery Client Templates
jQuery
jQuery Client Templates
Mit Client Templates können dynamisch neue Seitenelemente erzeugt werden
Client Templates enthalten Markup mit Platzhaltern für Datenelemente
Templates werden auf Daten (via Ajax) angewendet und ins HTML DOM gerendert
jQuery Client Templates
Plugin jQuery.TemplatesEntwicklung durch Microsofthttps://github.com/jquery/jquery-tmpl
Wird momentan separat «ausgeliefert», später Bestandteil von jQuery
Setzt jQuery 1.4.2 voraus
jQuery Client Templates< >
Element
Client Template
jQuery Script
${name}
JSON
{ “name“ : “John Doe“ }
JSON
${name}
John Doe
jQuery Client Templates
Anwendung:$('#myTemplate').tmpl(data).appendTo('#myDiv')
Platzhalter im Template${token}
Bedingungen{{if data.Amount > 0}}…{{/if}}
Schleifen{{each data.Customer}}…{{/each}}
jQuery Client Templates
Demo
jQuery und ASP.NET
jQuery und ASP.NETClient IDs
Wenn ein Element über die Client ID selektiert wird, muss diese genau stimmenASP.NET 3.5 vergibt Client IDs nach eigener LogikgvCustomers_ctl11_ctl00
In ASP.NET 4 gibt es neu einen ClientIDModePro Applikation (web.config)Pro SeitePro Control
Alternativ kann man eine CSS Klasse verwenden
jQuery kann client-seitig keine Elemente im ViewState hinzufügen!Alle Elemente, welche nach einem Postback via Controls zur Verfügung stehen sollen, müssen auch schon beim Rendern der Page (ggf. unsichtbar) vorhanden seinAuf neue Form-Elemente kann aber notfalls immer via Request zugegriffen werden
jQuery und ASP.NET
jQuery ist die beliebteste JavaScript Library
Microsoft setzt voll auf jQuery
Tooling und Integration von jQuery in Visual Studio wird wahrscheinlich verbessert WebForms, Ajax und jQuery ermöglichen dynamische und interaktive Applikationen
Summary & Outlook
Q&A
Vielen Dank!
© 2011 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.