Kurse:Layout Views: Unterschied zwischen den Versionen

Aus ahrensburg.city
Zur Navigation springen Zur Suche springen
Die Seite wurde neu angelegt: „== Layout Views – Spickzettel (Cheat Sheet) == '''Layout View''' ist eine Webseite (z.B. ''layout.cshtml''), die für die Präsentationslogik-Vorlage zuständig ist (typischerweise ein HTML-Template mit Header, Sidebar, Footer usw.). === Ablauf der View-Ausführung === # Die '''View''' wird zuerst ausgeführt. # Die '''Layout View''' wird danach mit dem Inhalt der View „gefüllt“. # Daten aus der View können somit auch im Layout genutzt werden.…“
 
(kein Unterschied)

Aktuelle Version vom 25. Juni 2025, 14:31 Uhr

Layout Views – Spickzettel (Cheat Sheet)

Layout View ist eine Webseite (z.B. layout.cshtml), die für die Präsentationslogik-Vorlage zuständig ist (typischerweise ein HTML-Template mit Header, Sidebar, Footer usw.).

Ablauf der View-Ausführung

  1. Die View wird zuerst ausgeführt.
  2. Die Layout View wird danach mit dem Inhalt der View „gefüllt“.
  3. Daten aus der View können somit auch im Layout genutzt werden.

Merkmale von Layout Views

  • Die Methode @RenderBody() gibt im Layout an, wo der Inhalt der jeweiligen View angezeigt wird.
  • Die Layout-Eigenschaft in einer View gibt den Pfad zur Layout-View an.
  • Diese Eigenschaft kann auch dynamisch gesetzt werden (z.B. per Code).
  • View und Layout View teilen sich das ViewData-Objekt.
  • CSS/JS-Dateien, die im Layout eingebunden sind, gelten auch für den View-Inhalt, weil die View in das Layout „hineingemischt“ wird.

Beispiel: layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/Content/site.css" />
</head>
<body>
    <header>
        <h1>Meine Webseite</h1>
    </header>
    <div>
        @RenderBody()
    </div>
    <footer>
        &copy; 2025
    </footer>
    <script src="~/Scripts/site.js"></script>
</body>
</html>

Beispiel: View (Index.cshtml)

@{
    ViewBag.Title = "Startseite";
    Layout = "~/Views/Shared/_Layout.cshtml"; // Pfad zum Layout
}

<h2>Willkommen!</h2>
<p>Dies ist der Inhalt der Startseite.</p>

Hinweise

  • Mit ViewData["xy"] oder ViewBag.Xy können Daten an das Layout übergeben werden.
  • Das Layout kann im Controller oder direkt in der View gesetzt werden.

Zusammengefasst: Das Layout ist eine zentrale Design-Schablone, die das Aussehen und die Struktur für viele Seiten vorgibt – und @RenderBody() ist die Einfüge-Markierung für den individuellen Seiteninhalt.