Webentwicklung Asp.net framework Programmierung

Das MVC Pattern - ASP.NET Core Framework

Das MVC Pattern - ASP.NET Core Framework

In diesem Beitrag erfahrt ihr was das MVC-Pattern ist, weshalb es eines der am häufigsten implementierten Entwurfsmuster ist und wie ihr es in Verbindung mit dem ASP.NET Core Framework (oder vielen anderen Frameworks) einsetzen können.


MVC steht für Model View Controller und bezeichnet mit diesen Ausdrücken drei Bestandteile von Software. Die Nutzung des MVC-Patterns bedeutet, euren Code in diese drei Teile aufzuteilen und die einzelnen Bereiche voneinander sauber abzutrennen. Wendet ihr das MVC-Pattern also konkret in eurer Programmierung an, so setzt sich euer Code aus einem Bereich bestehend aus Model-Klassen, einem Bereich aus verschiedenen Views und den dazugehörigen Controller-Klassen zusammen. Welchen Zweck diese drei Bereiche besitzen und was genau ein Model, eine View und ein Controller ist, werdet ihr im folgendem lernen. Das Entwurfsmuster lässt sich am besten am Beispiel einer Webanwendung, wie z.B. einer ASP.NET Core Webapp erklären, denn hier kommen alle drei Bereiche zum Einsatz und man kann sich gut vorstellen, weshalb z.B. ein Controller gebraucht wird, um die Bereiche zu koordinieren. Jedoch lässt sich das MVC-Pattern auch bei der Programmierung nahezu aller anderen Anwendungsarten bzw. Software-Arten verwenden, vorausgesetzt, es gibt eine Benutzeroberfläche bzw. eine grafische Schnittstelle zum Nutzer.

Views

Damit wären wir auch direkt beim ersten Teilbereich der MVC-Programmierung: Die sogenannte View. Dieses Fragment ist am einfachsten zu verstehen, denn eine View ist nichts anderes als ein Teil der Benutzeroberfläche bzw. eine konkrete Ansicht der Benutzeroberfläche. Eine View kann z.B. eine einfache HTML-Seite sein, oder auch z.B. ein bestimmter Screen einer mobilen App.

Hier ist ein Beispiel einer App, die mit mehreren Views arbeitet und bei der die verschiedenen Views die Benutzeroberfläche ergeben:

Auf diesem Screenshot seht ihr eine Ansicht einer beispielhaften WebApp. Diese View zeigt den Login-Screen. image

Hier seht ihr wiederrum eine View, die dem Nutzer angezeigt wird, sobald er ein Profil ausgewählt hat. image

Im ASP.NET Core Framework arbeiten wir mit sogenannten Razor-Pages als Views. Eine Razor-Page hat die Endung „.cshtml“ und ist nichts anderes als eine HTML-Seite, die die Razor-Engine des Frameworks zur Kompilierung der Ansichts-Seiten nutzt.

Der große Unterschied zu einfachen HTML-Seiten ist, dass Razor-Seiten C#-Code enthalten können und vor der Darstellung in eurer App über die Razor SDK kompiliert werden und dadurch einige Funktionalitäten erfüllen können, die mit normalen HTML-Dateien nicht möglich wären.

Die View-Dateien bilden somit die Schnittstelle zum Nutzer eurer App und erhalten außerdem das gesamte Frontend-Design eurer Applikation. Hier werden in erster Linie Razor-Pages genutzt, jedoch könnt ihr die Prinzipien auf alle anderen Arten von UI’s anwenden.

Models

Weiter geht es mit dem Model-Teil und den verschiedenen Models eurer Webapp. In den Model-Klassen bildet ihr die Daten eurer App ab. Alle essenziellen Daten, die in eurer App verarbeitet, gespeichert oder generell dargestellt werden, können in der Regel in den Model-Klassen wiedergefunden werden. Im Punkt Darstellung können jedoch auch sogenannte ViewModels zum Einsatz kommen. Diese sind nichts anderes als Model-Klassen, die in direkter Beziehung zu einem View stehen und in diesem zur Darstellung gebracht werden. Diese Arten von Klassen würden jedoch hier zu weit führen und werden deshalb in einem separaten Tutorial zum MVVM-Pattern behandelt. Hier seht ihr zwei Beispiele zu Model-Klassen, die in einer Beispiel-App verwendet werden könnten.


public class Student{
    public int MatrikelNummer { get; set; }
    public string Vorname { get; set; }
    public string Nachname { get; set; }
    public string Geschlecht { get; set; }
}

public class Course{
    public string Kursnummer { get; set; }
    public string Name { get; set; }
    public DateTime StartDatum { get; set; }
}

Die App enthält die Models Student und Course. In der Student-Klasse sind alle Daten zu einem Studenten zu finden, der z.B. in unserer App angezeigt werden könnte in einer Übersichts-Liste aller Studenten, die an einem bestimmten Kurs oder Seminar teilnehmen. Die Daten zum Kurs werden in der Course-Klasse widergespiegelt. Wird ein neuer Student in unserer App angelegt und z.B. in einer Datenbank gespeichert, so wird ein Objekt der Student-Klasse erzeugt. Dieses Objekt könnten wir auch an eine View weitergeben und die einzelnen Attribute des Objekts darstellen lassen. Hierbei wird die Verbindung von View und Model deutlich. Im folgenden Code-Ausschnitt seht ihr wie man mit ASP.NET Core MVC ein Model in eine Ansicht integriert.

@model Course
@{
    ViewData["Title"] = "CourseView";
}
<h1>CourseView</h1>

Im Beispiel hierbei seht ihr eine einzelne Seite der Benutzeroberfläche, auf der ihr über eure App alle Daten zu einem bestimmten Kurs aus dem Student-Course-Beispiel ausgeben lasst. Hierbei würden die Daten in einem Course-Objekt enthalten seien und über das @model-Tag in eure Razor-Page eingebunden werden.

Controller

Das bringt uns zum dritten und letzten Teilbereich: Den Controller-Klassen. Diese sind genau für solche Aufgaben zuständig. Die Kommunikation zwischen View und den Model-Klassen wird durch einen Controller gesteuert. Dieser Teil unserer Webapp kontrolliert somit den Datenfluss von View zu App und von App zu View. Zum Transport von Daten, z.B. aus der Benutzeroberfläche (einer View) bei dem der Nutzer Daten in eine Eingabemaske eingeben kann, zu Klassen, die sich um die Weiterverarbeitung der Daten kümmern, wird ein Container benötigt. Hierfür könnte z.B. eine Model-Klasse dienen (oder eine ViewModel-Klasse), die ihr an eure Ansicht weitergebt (über einen Controller).

Die Controller-Klassen sind somit Verbindungsstück im MVC-Pattern und kommen z.B. zum Einsatz, wenn eine Interaktion auf der Benutzeroberfläche stattfindet (oder einer anderen Schnittstelle zum Nutzer oder anderen Apps) und durch diese Interaktion bestimmte Daten eurer App verändert/ergänzt etc. werden sollen.

Man könnte sich vorstellen, dass in einer Notiz-App verschiedene Notizen angelegt werden können. Der Nutzer klickt auf einen Button und wird auf eine weitere Ansicht mit einer Eingabe-Maske weitergeleitet. Hier gibt der Nutzer einen Text ein, der in der Notiz vorkommen soll. Sobald er auf einen Button „Erstellen“ klickt, soll eine neue Notiz in unserem System angelegt werden (z.B. in einer Datenbank eingefügt werden). Für alle wesentlichen Aufgaben aus diesem kurzen Beispiel sind Controller zuständig. Zum einen das Weiterleiten des Nutzers beim Klick auf einen Button und zum anderen zum Empfangen der eingegebenen Daten aus der Eingabe-Maske und dem darauffolgenden Weitergeben dieser Daten an eine andere Stelle eurer App.

Der Kontrollfluss eurer App wird von Controller-Instanzen gesteuert. Daher ergibt sich der Name dieses wichtigen Bereiches der Applikation.
Im ASP.NET Core Framework muss eine Controller-Instanz nicht zwangsläufig an eine View gebunden seien. Es ist z.B. auch möglich eine App über einfache HTTP-Requests anzusteuern (Stichwort WebAPI). Diese Requests würden dann in dieser Art von App auch bei einem Controller-Objekt ankommen und dort bearbeitet werden. Wen diese Art von Web-Applikation interessiert, sollte sich den Projekt-Typ „Web-API“ anschauen.\

Nun kommen wir zur letzten Frage, die uns direkt zum Fazit führen wird: Weshalb ist das MVC-Pattern so stark verbreitet und gilt als so wichtig für moderne Webapplikationen? Hierbei spielt die strikte Trennung von Daten, Darstellung und Programmlogik die entscheidende Rolle, denn dadurch lassen sich z.B. verschiedene Ansichten für die Darstellung der Daten beliebig austauschen und die einzelnen Bestandteile der App sind (zum größten Teil) unabhängig voneinander. Dieser Aspekt sorgt für eine perfekte Voraussetzung für eine hohe Skalierbarkeit in der Entwicklung euerer App.