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.