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

Grösste aktive.NET User Group der Schweiz Regelmässige Treffen mit Schwerpunktthemen Nächste Events Mo, User Experience Crash Kurs Do, DotNetNuke.NET User Group Bern

ASP.NET und Ajax Frameworks ASP.NET Ajax Ajax Control Toolkit Microsoft Ajax Library jQuery Selektoren, Events, Ajax, Client Templates, jQuery UI, Plugins jQuery mit WebForms verwenden Agenda

Webentwicklung und Browser

JScript Editor Extensions Outlining Brace Matching

Webentwicklung mit JavaScript Unobtrusive Funktioniert auch ohne JavaScript Server-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.js Cross-Browser Library Scripts für UpdatePanel etc.

Server Ajax vs. reines Ajax “reines” AJAX Rendering Server AJAX Initial Request: HTML HTML / JSON Rendering

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.IsInAsyncPostback ScriptManager.AsyncPostbackSourceElementID

Server Controls Einige Ajax-fähige Controls Abstraktionen um eingebettetes JavaScript für DHTML Controls Ajax Control Toolkit

Demo

ASP.NET Ajax Library Ehemals Microsoft Ajax Library Ab 2008, Nachfolger von MicrosoftAjax.js Script Management, Templating, Data Integration 6 Previews, 1 Beta Version Mix 2010, Las Vegas Microsoft 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 dokumentiert

jQuery hat… …eine sehr kompakte Syntax «write less, do more» …auch eine mobile Variante

In VS 2010 enthalten

Microsoft Content Delivery Network (CDN) MS CDN bietet unter anderem jQuery jQuery UI Ajax Control Toolkit

NuGet

Was kann ich mit jQuery tun? Seitenelemente anzeigen oder verbergen CSS verändern Dynamisch Elemente hinzufügen Text oder Attribute verändern Events auslösen oder auf Events reagieren Ajax

jQuery Core Selektoren Attribute Traversieren im DOM DOM Manipulation CSS Events Effekte Ajax Utilities jQuery UI

jQuery jQuery();

jQuery $();

jQuery window.onload() = … vs. $(document).ready();

jQuery Demo

jQuery Selektoren $();

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

jQueryEvents Demo

jQuery Ajax

Das jQuery API kapselt die XMLHttpRequest Klasse var 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 POST Daten können im HTML, JSON, XML oder Text Format sein

jQueryAjax Demo

jQuery UI

jQueryClient 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.Templates Entwicklung durch Microsoft Wird momentan separat «ausgeliefert», später Bestandteil von jQuery Setzt jQuery voraus

jQuery Client Templates Element Client Template jQuery Script ${name} { “name“ : “John Doe“ } ${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

Wenn ein Element über die Client ID selektiert wird, muss diese genau stimmen ASP.NET 3.5 vergibt Client IDs nach eigener Logik gvCustomers_ctl11_ctl00 In ASP.NET 4 gibt es neu einen ClientIDMode Pro Applikation (web.config) Pro Seite Pro 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 sein Auf 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

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.