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

1. Routing: Die Anfrage wird an einen bestimmten Controller und eine Action-Methode weitergeleitet.
2. Model Binding: Daten aus der Anfrage werden extrahiert und in Parameter umgewandelt.
3. Model Validation: Daten werden gegen im Model definierte Regeln validiert.
4. Controller Action: Logik wird ausgeführt (z. B. Datenbankaufrufe).
5. View Selection: Der Controller wählt eine View aus und übergibt ihr Daten (oft ein Model oder ViewModel).
6. Rendering: Die View verarbeitet die Daten und generiert HTML.
7. 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:

1. Definieren Sie den Modelltyp oben in der View:

@model MyProject.Models.Person

1. 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:

1. Layouts (_Layout.cshtml): Definiert die gemeinsame Struktur (Header, Footer, Referenzen) für die App.
2. 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:

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

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

---

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