Kurse:Täglich Razor Views: Unterschied zwischen den Versionen

Aus ahrensburg.city
Zur Navigation springen Zur Suche springen
Die Seite wurde neu angelegt: „= ASP.NET Core MVC – Speckzettel & Übungen = == MVC Architektur: Grundprinzip == * **Model:** Daten & Geschäftslogik (z.B. DB-Zugriffe, Validierung) * **View:** Darstellung der UI (Razor/HTML-Templates) * **Controller:** Vermittler – verarbeitet Anfragen, steuert Model & View === Model-Typen: === * Geschäftsmodell: Reale Entitäten (z.B. Produkt, Kunde) * View Model: Für die Darstellung optimiert (z.B. Zusammenfassung mehrerer Models) == Ablauf…“
 
(kein Unterschied)

Aktuelle Version vom 25. Juni 2025, 03:52 Uhr

ASP.NET Core MVC – Speckzettel & Übungen

MVC Architektur: Grundprinzip

  • **Model:** Daten & Geschäftslogik (z.B. DB-Zugriffe, Validierung)
  • **View:** Darstellung der UI (Razor/HTML-Templates)
  • **Controller:** Vermittler – verarbeitet Anfragen, steuert Model & View

Model-Typen:

  • Geschäftsmodell: Reale Entitäten (z.B. Produkt, Kunde)
  • View Model: Für die Darstellung optimiert (z.B. Zusammenfassung mehrerer Models)

Ablauf einer MVC-Anfrage

  1. Routing: URL → Controller/Action
  2. Model Binding: Request-Daten werden Parametern/Models zugewiesen
  3. Validierung: Daten werden geprüft, Fehler landen in ModelState
  4. Action-Logik: Daten holen/bearbeiten, ViewModel erstellen
  5. View-Auswahl: View + Model werden an die View-Engine (Razor) übergeben
  6. View-Rendering: Razor erzeugt das HTML
  7. Response: HTML wird an den Client geschickt

Beispielcode

Aktivierung in Program.cs

// Program.cs
builder.Services.AddControllersWithViews(); // MVC aktivieren

Controller Beispiel

// HomeController.cs
public class HomeController : Controller
{
    [Route("home")]
    public IActionResult Index()
    {
        return View(); // Rendert Views/Home/Index.cshtml
    }
}

View Beispiel

// Views/Home/Index.cshtml
<!DOCTYPE html>
<html>
<head>
    <title>Asp.Net Core App</title>
</head>
<body>
    Willkommen!
</body>
</html>

Razor-Grundlagen

  • **@{...}**: C#-Codeblock
  • **@variable**: Variablen-Ausgabe
  • **@if, @else, @switch, @foreach, @for**: Kontrollstrukturen
  • **@Html.Raw()**: Rohes HTML ausgeben (Achtung: XSS-Gefahr!)

Razor-Control-Flow Beispiel

@if (person.Geburtsdatum.HasValue)
{
    <p>Alter: @(Math.Round((DateTime.Now - person.Geburtsdatum.Value).TotalDays / 365.25)) Jahre</p>
}
else
{
    <p>Geburtsdatum unbekannt</p>
}

Übung: Kontrollstrukturen

Schreibe einen Razor-View, der eine Liste von Personen mit Name und Geschlecht anzeigt.

ViewData & ViewBag

  • **ViewData["key"]**: Dictionary, cast nötig
  • **ViewBag.key**: Dynamisches Objekt, kein Cast nötig

Beispiel: Übergabe im Controller

// Controller
ViewData["Titel"] = "Meine App";
ViewBag.Personen = personenListe;

Beispiel: Zugriff in View

// View
<title>@ViewData["Titel"]</title>
@foreach(var p in ViewBag.Personen) { <div>@p.Name</div> }

Übung: ViewBag

Übertrage die aktuelle Uhrzeit per ViewBag in die View und zeige sie dort an.

Starke Typisierung mit @model

  • View erhält direkt eine Model-Instanz → IntelliSense, Typ-Sicherheit

Beispiel: Übergabe einer Liste

// Controller
public IActionResult Index()
{
    List<Person> personen = new();
    // Personen füllen...
    return View(personen);
}
// Index.cshtml
@model IEnumerable<Person>
@foreach(var p in Model)
{
    <div>@p.Name - @p.Geschlecht</div>
}

Übung: Starke Typisierung

Erstelle ein ViewModel mit Person & Produkt und zeige beides in einer View an.

Lokale Funktionen im View

@functions {
    double? AlterBerechnen(DateTime? geburt)
    {
        if(geburt != null)
            return Math.Round((DateTime.Now - geburt.Value).TotalDays/365.25);
        else
            return null;
    }
}
<!-- Nutzung: -->
@AlterBerechnen(person.Geburtsdatum)

_ViewImports.cshtml

  • Gemeinsame Direktiven für alle Views eines Ordners:
@using YourProject.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Shared Views

  • In **Views/Shared** ablegen → wiederverwendbar
  • Beispiel: _Layout.cshtml, _ProductCard.cshtml (Partial Views)

Beispiel: Shared View verwenden

// Controller
public IActionResult All()
{
    return View(); // Sucht zuerst in Views/Controller, dann Views/Shared
}

---

Wichtige Best Practices

  • Trenne Präsentation (View), Logik (Controller), und Daten (Model)!
  • Nutze starke Typisierung (ViewModels)!
  • Wiederverwendbare Views in Views/Shared ablegen!
  • Html.Raw() **nur** bei vertrauenswürdigem Inhalt!
  • Konsistenz: Nutze entweder ViewBag **oder** ViewData – nicht beides wild gemischt!

Interview-Checkliste MVC

  • Razor-Syntax erklären & anwenden (inkl. Control-Flow, Html.Raw)
  • ViewModels & starke Typisierung erklären
  • Sicherheitsaspekte (keine ungesicherten Daten in Html.Raw)
  • Einsatz von _ViewImports.cshtml & Shared Views begründen

Mini-Übungsaufgaben

  1. Erstelle eine View, die alle Produkte als Tabelle darstellt.
  2. Übergebe eine Fehlermeldung per ViewBag und zeige sie prominent in der View an.
  3. Verwende ein ViewModel, um Person und deren Produktliste in einer View darzustellen.
  4. Schreibe eine lokale Funktion in einer View, die das Alter einer Person berechnet.