Webframeworkk/ASP.NET Core/Razor Views

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

Basierend auf der Analyse von start.txt enthält dieses Dokument Tutorials und Erklärungen zu den Kernkonzepten von ASP.NET Core MVC, einschließlich Architektur, Views, Razor-Syntax, Datenübergabe und der Erstellung wiederverwendbarer Komponenten.

MVC Architektur

Model-View-Controller (MVC) ist ein Entwurfsmuster, das eine Anwendung in drei logische Hauptkomponenten unterteilt:

1. Model (Modell)

Repräsentiert die Daten und die Geschäftslogik der Anwendung.

Business Model (Domänenmodell): Repräsentiert reale Entitäten (z. B. Produkt, Kunde) und die Kerngeschäftslogik/-validierung.
View Model: Ein maßgeschneidertes Modell, das speziell für eine View entworfen wurde. Es kann Daten aus mehreren Geschäftsmodellen aggregieren oder UI-spezifische Eigenschaften enthalten.

2. View (Ansicht)

Verantwortlich für das Rendern der Benutzeroberfläche (UI).

Typischerweise definiert in .cshtml-Dateien unter Verwendung der Razor-Syntax.
Generiert dynamisch HTML basierend auf den vom Controller bereitgestellten Daten.

3. Controller (Steuerung)

Arbeitet als Vermittler zwischen dem Model und der View.

Empfängt Benutzereingaben (HTTP-Anfragen).
Interagiert mit dem Model, um Operationen durchzuführen oder Daten abzurufen.
Wählt die geeignete View aus, um die Antwort zu rendern.

Ablauf der Ausführung

Routing: Die Anfrage wird an einen bestimmten Controller und eine Action-Methode weitergeleitet.
Model Binding: Daten aus der Anfrage werden extrahiert und in Parameter umgewandelt.
Model Validation: Daten werden gegen im Model definierte Regeln validiert.
Controller Action: Logik wird ausgeführt (z. B. Datenbankaufrufe).
View Selection: Der Controller wählt eine View aus und übergibt ihr Daten (oft ein Model oder ViewModel).
Rendering: Die View verarbeitet die Daten und generiert HTML.
Response: Valides HTML wird an den Client zurückgesendet.

MVC aktivieren

In Program.cs wird der MVC-Service registriert:

builder.Services.AddControllersWithViews();

Dies aktiviert die Controller-Erkennung, die Razor View Engine, Model Binding und Validierung.

Views in ASP.NET Core

Views sind die Präsentationskomponente der MVC-Anwendung.

Ort: Konventionsgemäß befinden sich Views in Views/[ControllerName]/[ActionName].cshtml.
Funktion: Sie führen Daten (vom Model/ViewData) mit HTML-Vorlagen zusammen.
ViewResult: Eine Controller-Action gibt typischerweise ein ViewResult unter Verwendung der View()-Hilfsmethode zurück.

public IActionResult Index()
{
    // Sucht standardmäßig nach Views/Home/Index.cshtml
    return View(); 
}

Razor View Engine

Razor ist die Markup-Syntax, die in ASP.NET Core Views verwendet wird, um C#-Code in HTML einzubetten.

Wichtige Syntax-Elemente

Code-Blöcke: @{ ... } für mehrzeilige C#-Ausführung.
Ausdrücke: @variable oder @(ausdruck), um Werte auszugeben.
Literale: @: oder <text>...</text>, um rohen Text innerhalb von Code-Blöcken auszugeben.

Kontrollfluss

Razor unterstützt Standard-C#-Kontrollflussstrukturen:

If/Else:

@if (Model.IsActive)
{
    <p>Aktiv</p>
}
else
{
    <p>Inaktiv</p>
}

Schleifen (Loops):

@foreach (var item in Model.Items)
{
    <li>@item.Name</li>
}

Switch:

@switch (Model.Status)
{
    case Status.Pending:
        <span>Ausstehend...</span>
        break;
    case Status.Complete:
        <span>Erledigt!</span>
        break;
}

Lokale Funktionen in Razor

Sie können wiederverwendbare C#-Funktionen direkt innerhalb einer Razor-View unter Verwendung des @functions-Blocks definieren. Dies kapselt Logik, die spezifisch für diese View ist.

Syntax:

@functions {
    public string FormatDate(DateTime date)
    {
        return date.ToString("yyyy-MM-dd");
    }
}

Verwendung:

<p>Datum: @FormatDate(DateTime.Now)</p>

Vorteile:

Hält view-spezifische Logik zusammen.
Reduziert Code-Duplizierung innerhalb einer einzelnen View.
Kann auf andere Mitglieder zugreifen, die im @functions-Block definiert sind.

Html.Raw()

Standardmäßig kodiert Razor alle String-Ausgaben, um XSS (Cross-Site Scripting)-Angriffe zu verhindern. Html.Raw() wird verwendet, um einen String ohne Kodierung zu rendern.

Verwendung:

@{
    string htmlContent = "<strong>Fetter Text</strong>";
}
@Html.Raw(htmlContent)

Warnung:

Sicherheitsrisiko: Verwenden Sie dies nur mit vertrauenswürdigen Daten. Verwenden Sie Html.Raw() niemals mit Benutzereingaben, es sei denn, diese wurden streng bereinigt (sanitized), da dies die Anwendung für XSS-Angriffe öffnet.

ViewData und ViewBag

Mechanismen, um kleine Datenmengen vom Controller an die View zu übergeben.

ViewData

Typ: ViewDataDictionary (Schlüssel-Wert-Dictionary).
Erfordert Typumwandlung (Casting) für komplexe Typen.
Verwendung:

// Controller
ViewData["Title"] = "Startseite";

// View
<h1>@ViewData["Title"]</h1>

ViewBag

Typ: dynamic.
Ein Wrapper um ViewData.
Keine Typumwandlung erforderlich (wird zur Laufzeit geprüft).
Verwendung:

// Controller
ViewBag.Title = "Startseite";

// View
<h1>@ViewBag.Title</h1>

Best Practice: Verwenden Sie Streng typisierte Views (ViewModels) für Hauptdaten. Verwenden Sie ViewData/ViewBag nur für kleine, nebensächliche Daten (wie Seitentitel).

Streng typisierte Views

Binden Sie eine View direkt an eine spezifische Model-Klasse. Dies bietet IntelliSense, Typsicherheit und Überprüfung zur Kompilierzeit.

Syntax:

Definieren Sie den Modelltyp oben in der View:

@model MyProject.Models.Person

Greifen Sie über die Model-Eigenschaft auf Daten zu:

<p>Name: @Model.Name</p>

Controller:

public IActionResult Details()
{
    var person = new Person { Name = "John" };
    return View(person);
}

View Models: Es ist üblich, spezifische Klassen (View Models) zu erstellen, die Daten aus mehreren Entitäten aggregieren oder Daten speziell für die View formatieren.

public class PersonProductViewModel
{
    public Person Person { get; set; }
    public Product Product { get; set; }
}

ViewImports.cshtml

Eine spezielle Datei, die im Views-Ordner platziert wird, um gemeinsame Direktiven für alle Views in diesem Ordner (und Unterordnern) zu behandeln.

Häufige Verwendungen:

Namespaces: @using MyProject.Models (damit Sie es nicht zu jeder View hinzufügen müssen).
Tag Helpers: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers.
Layouts: Definieren eines Standard-Layouts.

Beispielinhalt:

@using MyProject
@using MyProject.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Es beachtet die Hierarchie: Eine _ViewImports.cshtml in einem Unterordner (Views/Home/_ViewImports.cshtml) überschreibt oder ergänzt die Einstellungen der Root-Views/_ViewImports.cshtml.

Geteilte Views (Shared Views)

Views, die über mehrere Controller hinweg wiederverwendbar sind.

Ort: Views/Shared/

Häufige Typen:

Layouts (_Layout.cshtml): Definiert die gemeinsame Struktur (Header, Footer, Referenzen) für die App.
Partial Views (_PartialName.cshtml): Wiederverwendbare UI-Komponenten (z. B. eine Login-Box, ein Navigationsmenü).

Erkennung: Wenn ein Controller View("MyView") zurückgibt, sucht ASP.NET Core in:

Views/[Controller]/MyView.cshtml
Views/Shared/MyView.cshtml

Dieser Fallback-Mechanismus ermöglicht es Ihnen, globale Views im Shared-Ordner zu definieren.