Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Steffen Gervin Geändert vor über 9 Jahren
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
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
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.
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.