Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

49
Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery

Transcript of Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Page 1: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Kay Herzam@kherzamHerzam IT Consulting GmbH

Webentwicklung mit ASP.NET 4, Ajax und jQuery

Page 2: Kay Herzam @kherzam Herzam 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

Page 3: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

ASP.NET und Ajax FrameworksASP.NET AjaxAjax Control ToolkitMicrosoft Ajax Library

jQuerySelektoren, Events, Ajax, Client Templates, jQuery UI, Plugins

jQuery mit WebForms verwenden

Agenda

Page 4: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Webentwicklung und Browser

Page 5: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Webentwicklung und Browser

JScript Editor ExtensionsOutliningBrace Matching

Page 6: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Webentwicklung mit JavaScript Unobtrusive

Funktioniert auch ohne JavaScriptServer-basiert«Hijaxing»

100% JavaScript

«All or nothing»Client-basiert

Page 7: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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.

Page 8: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Server Ajax vs. reines Ajax

“reines” AJAX

Renderi

ng

Server AJAX

Initial Request: HTML

HTML / JSON

Form POST

HTML

JSON

JSONRenderi

ng

Page 9: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

ASP.NET Ajax UpdatePanel

Demo

Page 10: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 11: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Server ControlsEinige Ajax-fähige ControlsAbstraktionen um eingebettetes JavaScript für DHTML Controls

Ajax Control Toolkit

Page 12: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Ajax Control Toolkit

Demo

Page 13: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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!

Page 14: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

Page 15: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery ist…

…eine unabhängige Cross-Browser JavaScript Library

Entworfen mit dem Ziel, das Client-seitige Scripting von HTML zu vereinfachen

Page 16: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery ist…

…von Microsoft offiziell supported

…die populärste JavaScript Library

…hervorragend dokumentierthttp://docs.jquery.com

Page 17: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery hat…

…eine sehr kompakte Syntax«write less, do more»

…auch eine mobile Variantehttp://jquerymobile.com

Page 18: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQueryWie kriege ich jQuery?

http://jquery.com

In VS 2010 enthalten

Page 19: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 20: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQueryWie kriege ich jQuery?

NuGet

Page 21: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 22: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

CoreSelektorenAttributeTraversieren im DOMDOM ManipulationCSS

EventsEffekteAjaxUtilitiesjQuery UI

Page 23: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

jQuery();

Page 24: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

$();

Page 25: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

window.onload() = …

vs.

$(document).ready();

Page 26: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery

$(document).ready() und Intellisense für jQuery

Demo

Page 27: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Selektoren

$();

ul

#myId

.myClass

sel1, sel2

table tbody tr

Page 28: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Selektoren

Demo

Page 29: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Events

click()dblclick()mousedown()mouseenter()mouseleave()mousemove()mouseout()

hover()keydown()keypress()keyup()scroll()…

Page 30: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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.

Page 31: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Events

Demo

Page 32: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Ajax

Page 33: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 34: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Ajax

Demo

Page 35: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery UI

Page 36: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery UI

Page 37: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Client Templates

jQuery

Page 38: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und 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

Page 39: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 40: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Client Templates< >

Element

Client Template

jQuery Script

${name}

JSON

{ “name“ : “John Doe“ }

JSON

${name}

John Doe

Page 41: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Client Templates

Anwendung:$('#myTemplate').tmpl(data).appendTo('#myDiv')

Platzhalter im Template${token}

Bedingungen{{if data.Amount > 0}}…{{/if}}

Schleifen{{each data.Customer}}…{{/each}}

Page 42: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery Client Templates

Demo

Page 43: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

jQuery und ASP.NET

Page 44: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 45: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 46: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

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

Page 47: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Q&A

Page 48: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

Vielen Dank!

Page 49: Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery.

© 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.