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

Click here to load reader

  • date post

    06-Apr-2015
  • Category

    Documents

  • view

    103
  • download

    0

Embed Size (px)

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

  • Folie 1
  • Kay Herzam @kherzam Herzam IT Consulting GmbH Webentwicklung mit ASP.NET 4, Ajax und jQuery
  • Folie 2
  • www.dnug-bern.ch Grsste aktive.NET User Group der Schweiz Regelmssige Treffen mit Schwerpunktthemen Nchste Events Mo, 30.5.2011User Experience Crash Kurs Do, 9.6.2011DotNetNuke.NET User Group Bern
  • Folie 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
  • Folie 4
  • Webentwicklung und Browser
  • Folie 5
  • JScript Editor Extensions Outlining Brace Matching
  • Folie 6
  • Webentwicklung mit JavaScript Unobtrusive Funktioniert auch ohne JavaScript Server-basiert Hijaxing 100% JavaScript All or nothing Client-basiert
  • Folie 7
  • ASP.NET Ajax ASP.NET Ajax (Atlas) Fr VS 2005 als Zusatz, seit VS 2008 Bestandteil von ASP.NET MicrosoftAjax.js Cross-Browser Library Scripts fr UpdatePanel etc.
  • Folie 8
  • Server Ajax vs. reines Ajax reines AJAX Rendering Server AJAX Initial Request: HTML HTML / JSON Rendering
  • Folie 9
  • ASP.NET Ajax UpdatePanel Demo
  • Folie 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
  • Folie 11
  • Server Controls Einige Ajax-fhige Controls Abstraktionen um eingebettetes JavaScript fr DHTML Controls Ajax Control Toolkit
  • Folie 12
  • Demo
  • Folie 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 kndigt Partnerschaft mit jQuery an!
  • Folie 14
  • jQuery
  • Folie 15
  • jQuery ist eine unabhngige Cross-Browser JavaScript Library Entworfen mit dem Ziel, das Client-seitige Scripting von HTML zu vereinfachen
  • Folie 16
  • jQuery ist von Microsoft offiziell supported die populrste JavaScript Library hervorragend dokumentiert http://docs.jquery.com http://docs.jquery.com
  • Folie 17
  • jQuery hat eine sehr kompakte Syntax write less, do more auch eine mobile Variante http://jquerymobile.com http://jquerymobile.com
  • Folie 18
  • http://jquery.com In VS 2010 enthalten
  • Folie 19
  • Microsoft Content Delivery Network (CDN) MS CDN bietet unter anderem jQuery jQuery UI Ajax Control Toolkit
  • Folie 20
  • NuGet
  • Folie 21
  • Was kann ich mit jQuery tun? Seitenelemente anzeigen oder verbergen CSS verndern Dynamisch Elemente hinzufgen Text oder Attribute verndern Events auslsen oder auf Events reagieren Ajax
  • Folie 22
  • jQuery Core Selektoren Attribute Traversieren im DOM DOM Manipulation CSS Events Effekte Ajax Utilities jQuery UI
  • Folie 23
  • jQuery jQuery();
  • Folie 24
  • jQuery $();
  • Folie 25
  • jQuery window.onload() = vs. $(document).ready();
  • Folie 26
  • jQuery Demo
  • Folie 27
  • jQuery Selektoren $();
  • Folie 28
  • jQuerySelektoren Demo
  • Folie 29
  • jQuery Events click() dblclick() mousedown() mouseenter() mouseleave() mousemove() mouseout() hover() keydown() keypress() keyup() scroll()
  • Folie 30
  • jQuery Events Wenn Seitenelemente dynamisch hinzugefgt werden, so werden bestehende Event Handler diese neuen Elemente nicht erkennen. $('.someClass').live('click', ) Live Event Handler knnen mit die() wieder entfernt werden.
  • Folie 31
  • jQueryEvents Demo
  • Folie 32
  • jQuery Ajax
  • Folie 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 knnen im HTML, JSON, XML oder Text Format sein
  • Folie 34
  • jQueryAjax Demo
  • Folie 35
  • jQuery UI
  • Folie 36
  • Folie 37
  • jQueryClient Templates jQuery
  • Folie 38
  • jQuery Client Templates Mit Client Templates knnen dynamisch neue Seitenelemente erzeugt werden Client Templates enthalten Markup mit Platzhaltern fr Datenelemente Templates werden auf Daten (via Ajax) angewendet und ins HTML DOM gerendert
  • Folie 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, spter Bestandteil von jQuery Setzt jQuery 1.4.2 voraus
  • Folie 40
  • jQuery Client Templates Element Client Template jQuery Script ${name} { name : John Doe } ${name} John Doe
  • Folie 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}}
  • Folie 42
  • jQuery Client Templates Demo
  • Folie 43
  • jQuery und ASP.NET
  • Folie 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
  • Folie 45
  • jQuery kann client-seitig keine Elemente im ViewState hinzufgen! Alle Elemente, welche nach einem Postback via Controls zur Verfgung stehen sollen, mssen 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
  • Folie 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 ermglichen dynamische und interaktive Applikationen Summary & Outlook
  • Folie 47
  • Folie 48
  • Vielen Dank!
  • Folie 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.