Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Kay Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery."—  Präsentation transkript:

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

2 www.dnug-bern.ch Grösste aktive.NET User Group der Schweiz Regelmässige Treffen mit Schwerpunktthemen Nächste Events Mo, 30.5.2011User Experience Crash Kurs Do, 9.6.2011DotNetNuke.NET User Group Bern

3 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

4 Webentwicklung und Browser

5 JScript Editor Extensions Outlining Brace Matching

6 Webentwicklung mit JavaScript Unobtrusive Funktioniert auch ohne JavaScript Server-basiert «Hijaxing» 100% JavaScript «All or nothing» Client-basiert

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

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

9 ASP.NET Ajax UpdatePanel Demo

10 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

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

12 Demo

13 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!

14 jQuery

15 jQuery ist… …eine unabhängige Cross-Browser JavaScript Library Entworfen mit dem Ziel, das Client-seitige Scripting von HTML zu vereinfachen

16 jQuery ist… …von Microsoft offiziell supported …die populärste JavaScript Library …hervorragend dokumentiert http://docs.jquery.com http://docs.jquery.com

17 jQuery hat… …eine sehr kompakte Syntax «write less, do more» …auch eine mobile Variante http://jquerymobile.com http://jquerymobile.com

18 http://jquery.com In VS 2010 enthalten

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

20 NuGet

21 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

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

23 jQuery jQuery();

24 jQuery $();

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

26 jQuery Demo

27 jQuery Selektoren $();

28 jQuerySelektoren Demo

29 jQuery Events click() dblclick() mousedown() mouseenter() mouseleave() mousemove() mouseout() hover() keydown() keypress() keyup() scroll() …

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

31 jQueryEvents Demo

32 jQuery Ajax

33 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

34 jQueryAjax Demo

35 jQuery UI

36

37 jQueryClient Templates jQuery

38 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

39 jQuery Client Templates Plugin jQuery.Templates Entwicklung durch Microsoft https://github.com/jquery/jquery-tmpl https://github.com/jquery/jquery-tmpl Wird momentan separat «ausgeliefert», später Bestandteil von jQuery Setzt jQuery 1.4.2 voraus

40 jQuery Client Templates Element Client Template jQuery Script ${name} { “name“ : “John Doe“ } ${name} John Doe

41 jQuery Client Templates Anwendung: $('#myTemplate').tmpl(data).appendTo('#myDiv') Platzhalter im Template ${token} Bedingungen {{if data.Amount > 0}}…{{/if}} Schleifen {{each data.Customer}}…{{/each}}

42 jQuery Client Templates Demo

43 jQuery und ASP.NET

44 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

45 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

46 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

47

48 Vielen Dank!

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


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

Ähnliche Präsentationen


Google-Anzeigen