Moderne Web-Anwendungen mit ASP.NET MVC und JavaScript

ASP.NET MVC im Zusammenspiel mit Web APIs und JavaScript-Frameworks

Manfred Steyer, Holger Schwichtenberg

• Publisher: O'Reilly
• Year: 2014
• eBook ISBN: 9783955617424
• Topic: Computer Science
• Subtopic: Web Services & APIs
• Index: Computer Science

Wer sich die Erstellung moderner Webanwendungen auf die Fahnen geheftet hat, muss eine Vielzahl an client- und serverseitigen Technologien kombinieren. Dieses Buch hilft Ihnen dabei, indem es auf die Technologien ASP.NET MVC, ASP.NET Web API, ASP.NET SignalR, Entity Framework sowie auf JavaScript-Frameworks, wie AngularJS, eingeht und deren Zusammenspiel erläutert. Daneben bespricht es ausgewählte, für die Entwicklung von Anwendungen interessante HTML-5-APIs, darunter die Browser-Datenbank IndexedDb und den Application Cache zur Bereitstellung offlinefähiger Web-Anwendungen. Auch die Themen Authentifizierung und Autorisierung kommen nicht zu kurz: Neben klassischen Möglichkeiten zum Umgang mit Benutzern werden zeitgemäße, auf OAuth 2.0 und OpenId Connect basierende Security-Szenarien ausführlich behandelt. In diesem Zusammenhang beschreiben die Autoren auch die Umsetzung von Single-Sign-On-Szenarien mit firmeninternen sowie öffentlichen Login-in-Providern wie Google, Facebook oder Twitter.

Kapitel 1. ASP.NET MVC

ASP.NET MVC ist ein Framework aus der ASP.NET-Familie, welches zum einen das weit verbreitete MVC-Muster implementiert und dem Entwickler zum anderen die volle Kontrolle über die gerenderten Webseiten gibt. Es erlaubt das dynamische Rendern von Ressourcen wie z.B. HTML-Seiten auf der Serverseite. Dieses Kapitel zeigt, wie dieses Framework eingesetzt wird.

Architektur

Bevor die ersten Codebeispiele folgen, beschäftigt sich dieser Abschnitt mit verschiedenen Überlegungen zum MVC-Muster. Darüber hinaus wird auf das MVVM-Muster (Model-View-ViewModel, auch als Model-View-Presenter bekannt) eingegangen, da dieses heutzutage häufig in Kombination mit MVC eingesetzt wird.

Model-View-Controller (MVC)

Die Abkürzung MVC steht für Model-View-Controller, ein Pattern, das ursprünglich bei Xerox für die Trennung von Logik und Präsentation entwickelt wurde. Es sieht vor, dass eine Applikation in drei Teile aufgeteilt wird: Model, View und Controller (Abbildung 1.1).

Das Modell entsprach dabei ursprünglich den fachlichen Daten sowie den darauf operierenden Routinen. Da diese beiden Aspekte heutzutage in der Regel voneinander getrennt werden, wird das Modell häufig lediglich mit den Daten der Applikation assoziiert und die Operationen für diese Daten, wie Laden, Speichern oder das Durchführen von Berechnungen, in eigene Klassen ausgelagert. Die Aufgabe der View ist das Anzeigen von Models sowie das Entgegennehmen von Benutzereingaben. Der Controller stellt das Bindeglied zwischen Modell und View dar: Er nimmt Anfragen sowie Benutzereingaben entgegen und wählt zur Abarbeitung der Anfrage eine passende Routine aus. Anschließend wird eine View ausgewählt sowie die anzuzeigenden Daten in Form eines Models an diese übergeben.

Abbildung 1.1 Das MVC-Muster

Durch diese Trennung können die einzelnen Teile separat wiederverwendet werden. Beispielsweise müssten bei einem Produkt, welches an das Design verschiedener Kunden anzupassen ist, lediglich die Views ausgetauscht bzw. modifiziert werden. Daneben erleichtert es das gleichzeitige Unterstützen verschiedener Benutzerschnittstellen – zum Beispiel eine für Mitarbeiter, eine weitere für Kunden und eine für mobile Endgeräte. Durch die Verteilung der einzelnen Aufgaben auf die Komponenten Modell, View und Controller wird auch eine eventuell gewünschte Arbeitsteilung vereinfacht. Webdesigner könnten sich beispielsweise um die View kümmern, Entwickler um den Controller sowie um die von ihm angestoßenen Routinen und Datenbankexperten um das Modell, welches sich ggf. auf einen O/R-Mapper, wie das ADO.NET Entity Framework, stützt. Da die gesamte Logik durch den Controller widergespiegelt wird, wird auch das Testen sowie das Automatisieren von Tests erleichtert.

Überblick über MVVM (Model-View-ViewModel)

Da dieselben fachlichen Daten in unterschiedlichen Views häufig unterschiedlich angezeigt werden, sieht das Muster MVVM (Model-View-ViewModel) vor, dass jede View ein eigenes Modell erhält, welches als ViewModel bezeichnet wird. Dieses basiert auf einem oder mehreren Models und bereitet deren Daten für die Verwendung innerhalb der View auf. Zusätzlich kann es auch Berechnungen durchführen oder benachbarte Objekte in einer »flachen« Struktur anbieten.

Beispielsweise könnte so für eine Rechnung auch die Anzahl der stattgefundenen Mahnungen über eine Eigenschaft angeboten oder die von der View zu verwendende Hintergrundfarbe in Hinblick auf das Hervorheben mehrfach gemahnter Rechnungen ermittelt werden. Darüber hinaus ist es auch nicht unüblich, im ViewModel Methoden zu hinterlegen, welche sich um die Verarbeitung der Daten (Validieren, Speichern, Laden, Berechnungen) kümmern oder die damit verbundenen Verarbeitungsvorgänge zumindest anstoßen, indem sie an die entsprechenden Klassen weiterdelegieren.

Abbildung 1.2 Das Muster MVVM (Model-View-ViewModel)

Beim Modell im Sinne von MVC handelt es sich somit, zumindest bei größeren Anwendungen, häufig um ein View-Modell, welches Daten für eine bestimmte View oder eine Gruppe von Views zur Verfügung stellt.

Erste Schritte mit ASP.NET MVC

Zur Einführung in ASP.NET MVC zeigt dieser Abschnitt, wie damit eine einfache Webanwendung zur Verwaltung von Hotels erstellt werden kann. Damit Sie einen guten Überblick erhalten, werden viele Themen, die in den folgenden Abschnitten detailliert erläutert werden, an dieser Stelle nur gestreift. Zur Vereinfachung kommt keine Datenbank, sondern lediglich eine statische Liste zum Einsatz. Diese erlaubt es Ihnen, sich an dieser Stelle voll und ganz auf ASP.NET MVC zu konzentrieren.

ASP.NET MVC-Projekt anlegen

Um eine ASP.NET-MVC-Anwendung zu erzeugen, wählt der Entwickler in Visual Studio 2013 die Projektvorlage Web | ASP.NET Web Application. Daraufhin wird er aufgefordert, sich für ein Framework aus der ASP.NET-Familie zu entscheiden. Die Wahl fällt dabei auf MVC. Im unteren Bereich kan...

Table of contents

• Cover
• Titel
• Inhalt
• Vorwort
• 1. ASP.NET MVC
• 2. ASP.NET Web API
• 3. JavaScript-Frameworks
• 4. AngularJS
• 5. ASP.NET SignalR
• 6. Datenzugriff mit Entity Framework
• 7. Basisdienste im ASP.NET-Umfeld
• 8. Sicherheit
• 9. ASP.NET MVC und ASP.NET Web API erweitern
• 10. Testbare Systeme mit Dependency-Injection
• Stichwortverzeichnis
• Impressum