Embed Size (px)
Citation preview
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
ASP.NET MVC und JavaScript Frameworks
JQuery, Microsoft.AJAX , ExtJS oder……und was nun?
Jörg Krause, www.joergkrause.de
Veranstalter: Partner:
Vorstellung
• Consultant & Trainer– SharePoint Server, SQL Server– .NET / ASP.NET
• Autor– Carl Hanser, Apress, Pearson
• Projekte (Auswahl)netrixcomponent.net, augmentedbooks.de,sharepointdeveloper.de, joergkrause.de
Veranstalter: Partner:
Anspruch
• Interaktiv• Schnelle Reaktion (Responsiv)• Umfassende Datenmodelle• Ansprechende UI
Veranstalter: Partner:
Angebot
• Unübersichtlicher Markt– Viele Frameworks– Viele Möglichkeiten
Veranstalter: Partner:
Server
• In der Microsoft-Welt:– ASP.NET oder ASP.NET MVC– Entity Framework (Code First)– SQL Server
Veranstalter: Partner:
Client
• Plain JavaScript• JavaScript Frameworks– ExtJS– JQuery– Knockout.js– MS AJAXLib MVC
• Weitere Themen– JavaScript Unit Testing (QUnit, Jasmine)
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
DEMODEMO
DEMO
Veranstalter: Partner:
Philosophien:Desktop UI…
Veranstalter: Partner:
+-+ Ablösung “Windows Like” Applikationen+ Komplexer Client Code beherrschbar+ Kooperation mit ASP.NET- “Fette” Bibliotheken, eher Intranet- Hoher Lernaufwand- Kooperation mit anderen Libs ???
Veranstalter: Partner:
DEMO
Veranstalter: Partner:
…oder Lightweight Effects
Veranstalter: Partner:
Server und Client
• Ein Architekturvorschlag– JavaScript Helper– JQuery Templates– Unobtrusive JavaScript + HTML 5
Veranstalter: Partner:
JavaScript Helper
• Keine Script-Fehler• Geprüfter Code• Einfach Konfigurierbar• „Auch ohne JS Kenntnisse“
Veranstalter: Partner:
JQuery Templates
• Vermeidet Mängel von @Html.xxxFor<>()• Elegant und schnell
Veranstalter: Partner:
JQuery Templates
<body><div><h1>@ViewBag.Title</h1><div id=”booksList”></div></body>
Veranstalter: Partner:
JQuery Templates
public JsonResult GetBooks(){ var ctx = new MyDbContext(); var books = ctx.Books.ToList(); return Json(books, JsonRequestBehavior.AllowGet);}
Veranstalter: Partner:
JQuery Templates
<script language="javascript" type="text/javascript">$(function () { $.getJSON("GetBooks", "", function (data) { $("#booksTemplate") .tmpl(data).appendTo("#booksList"); });});< /script>
Veranstalter: Partner:
JQuery Templates
<div id=”booksTemplate” style=”display:none”> <div id=”book”> ${title} ${authors} <div id=”publisher”>${publisher} </div> <div id=”mediaType”> {{if ebook}} <span style=”color:Green”>EBook</span> {{else}} <span style=”color:Red”>Print Only</span> {{/if}} <br /> <em> ${printMessage(state)} </em> <br /> </div> </div></div>
Veranstalter: Partner:
JQuery Templates
<script language=”javascript” type=”text/javascript”>function printMessage(s) { if (s==”EPUB”) return ”The book can be downloaded”; else return ”No download available”;}< /script>
Veranstalter: Partner:
+-+ Einfach und schnell+ Standardbibliotheken+ Spart manchmal ein ViewModel- Noch eine Markupsyntax- Tendenz zum Mixen von @ und {{}} Teilen
Veranstalter: Partner:
DEMO
Veranstalter: Partner:
Unobtrusive JavaScript
• HTML 5 rulez!!• Beachte Browserabhängigkeit– Chrome, FF, IE9+, Safari, …
• Schneller und schlanker
Veranstalter: Partner:
Ajax Helpers
• Ajax statt Html• Nutzt die Ajax MVC Lib, die auf JQuery basiert• Aktivierung in Web.config
Veranstalter: Partner:
Weniger Code…
• HTML 5 kennt “data” Attribute• Expliziter JS Code erforderlich, aber einfacher
Veranstalter: Partner:
…aber nicht ganz ohne
• AjaxOptions für Callbacks
Veranstalter: Partner:
Asynchrone Form
Veranstalter: Partner:
Response
• Plain Text = ContentResult– Einfache Meldungen, Status– Skalare Daten
• JSON = JsonResult– Komplexe Daten, evtl. Weiterverarbeitung
• HTML = PartialView– Besser als HTML bauen– Ganze Bereiche austauschen
Veranstalter: Partner:
Validation
• AJAX Roundtrip zum Server• [Remote]-Attribute
Veranstalter: Partner:
+-+ Schnell und einfach+ Weniger Client Code+ Kooperation mit MVC 3/4 - Weniger flexibel als direktes JQuery- Nicht immer ausreichend, also doch Skripte- Kooperiert nicht immer problemlos mit JQuery
Veranstalter: Partner:
DEMO
Veranstalter: Partner:
Debugging
• F12 Tools – JavaScript Debugger• Fiddler• Konfiguration der .debug. Libs• JavaScript Intellisense
Veranstalter: Partner:
F12 Tools – JavaScript Debugger
Veranstalter: Partner:
Fiddler
Veranstalter: Partner:
JavaScript IntelliSense
/// <reference path="jquery-1.5.1-vsdoc.js" />
Veranstalter: Partner:
DEMO
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
FRAGEN?
Veranstalter: Partner:
Wir sehen uns wieder!
Advanced Developers Conference C++ 3. – 4. Mai 2012, Zugspitzland Development for C++ Professionals! www.adcpp.de
SharePoint Konferenz in Wien 25. – 26. Juni 2012, Wien ppedv-Konferenz in Kooperation mit Microsoft Österreich www.SharePointKonferenz.at
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
Hat Ihnen mein Vortrag gefallen?Ich freue mich auf Ihr Feedback!
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
Vielen Dank!Jörg Krause
