mvc und javascript
TRANSCRIPT
![Page 1: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/1.jpg)
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
![Page 2: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/2.jpg)
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
![Page 3: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/3.jpg)
Veranstalter: Partner:
Anspruch
• Interaktiv• Schnelle Reaktion (Responsiv)• Umfassende Datenmodelle• Ansprechende UI
![Page 4: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/4.jpg)
Veranstalter: Partner:
Angebot
• Unübersichtlicher Markt– Viele Frameworks– Viele Möglichkeiten
![Page 5: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/5.jpg)
Veranstalter: Partner:
Server
• In der Microsoft-Welt:– ASP.NET oder ASP.NET MVC– Entity Framework (Code First)– SQL Server
![Page 6: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/6.jpg)
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
![Page 7: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/7.jpg)
Veranstalter: Partner:
Philosophien:Desktop UI…
![Page 8: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/8.jpg)
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 ???
![Page 9: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/9.jpg)
Veranstalter: Partner:
DEMO
![Page 10: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/10.jpg)
Veranstalter: Partner:
…oder Lightweight Effects
![Page 11: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/11.jpg)
Veranstalter: Partner:
Server und Client
• Ein Architekturvorschlag– JavaScript Helper– JQuery Templates– Unobtrusive JavaScript + HTML 5
![Page 12: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/12.jpg)
Veranstalter: Partner:
JavaScript Helper
• Keine Script-Fehler• Geprüfter Code• Einfach Konfigurierbar• „Auch ohne JS Kenntnisse“
![Page 13: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/13.jpg)
Veranstalter: Partner:
JQuery Templates
• Vermeidet Mängel von @Html.xxxFor<>()• Elegant und schnell
![Page 14: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/14.jpg)
Veranstalter: Partner:
JQuery Templates
<body><div><h1>@ViewBag.Title</h1><div id=”booksList”></div></body>
![Page 15: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/15.jpg)
Veranstalter: Partner:
JQuery Templates
public JsonResult GetBooks(){ var ctx = new MyDbContext(); var books = ctx.Books.ToList(); return Json(books, JsonRequestBehavior.AllowGet);}
![Page 16: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/16.jpg)
Veranstalter: Partner:
JQuery Templates
<script language="javascript" type="text/javascript">$(function () { $.getJSON("GetBooks", "", function (data) { $("#booksTemplate") .tmpl(data).appendTo("#booksList"); });});< /script>
![Page 17: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/17.jpg)
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>
![Page 18: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/18.jpg)
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>
![Page 19: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/19.jpg)
Veranstalter: Partner:
+-+ Einfach und schnell+ Standardbibliotheken+ Spart manchmal ein ViewModel- Noch eine Markupsyntax- Tendenz zum Mixen von @ und {{}} Teilen
![Page 20: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/20.jpg)
Veranstalter: Partner:
DEMO
![Page 21: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/21.jpg)
Veranstalter: Partner:
Unobtrusive JavaScript
• HTML 5 rulez!!• Beachte Browserabhängigkeit– Chrome, FF, IE9+, Safari, …
• Schneller und schlanker
![Page 22: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/22.jpg)
Veranstalter: Partner:
Ajax Helpers
• Ajax statt Html• Nutzt die Ajax MVC Lib, die auf JQuery basiert• Aktivierung in Web.config
![Page 23: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/23.jpg)
Veranstalter: Partner:
Weniger Code…
• HTML 5 kennt “data” Attribute• Expliziter JS Code erforderlich, aber einfacher
![Page 24: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/24.jpg)
Veranstalter: Partner:
…aber nicht ganz ohne
• AjaxOptions für Callbacks
![Page 25: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/25.jpg)
Veranstalter: Partner:
Asynchrone Form
![Page 26: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/26.jpg)
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
![Page 27: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/27.jpg)
Veranstalter: Partner:
Validation
• AJAX Roundtrip zum Server• [Remote]-Attribute
![Page 28: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/28.jpg)
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
![Page 29: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/29.jpg)
Veranstalter: Partner:
DEMO
![Page 30: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/30.jpg)
Veranstalter: Partner:
Debugging
• F12 Tools – JavaScript Debugger• Fiddler• Konfiguration der .debug. Libs• JavaScript Intellisense
![Page 31: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/31.jpg)
Veranstalter: Partner:
F12 Tools – JavaScript Debugger
![Page 32: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/32.jpg)
Veranstalter: Partner:
Fiddler
![Page 33: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/33.jpg)
Veranstalter: Partner:
JavaScript IntelliSense
/// <reference path="jquery-1.5.1-vsdoc.js" />
![Page 34: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/34.jpg)
Veranstalter: Partner:
DEMO
![Page 35: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/35.jpg)
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
FRAGEN?
![Page 36: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/36.jpg)
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
![Page 37: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/37.jpg)
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
Hat Ihnen mein Vortrag gefallen?Ich freue mich auf Ihr Feedback!
![Page 38: MVC und JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022050922/558a689fd8b42a5f7a8b462d/html5/thumbnails/38.jpg)
Veranstalter: Partner:
ASP.NET, HTML5 UND SILVERLIGHT
30. JAN. 2012, MÜNCHEN
Vielen Dank!Jörg Krause