Webframeworkk/ASP.NET Core/Layout Views
Einführung
Layout Views sind ein zentrales Konzept in ASP.NET Core MVC, um einheitliche und wiederverwendbare Strukturen für Webseiten zu schaffen. Sie ermöglichen es, gemeinsame Elemente wie Kopfzeile, Navigation, Fußzeile und Seitenleisten zentral zu definieren.
Warum Layout Views?
- Wiederverwendbarkeit: Gemeinsame HTML-, CSS- und JavaScript-Elemente müssen nicht in jeder View wiederholt werden.
- Konsistenz: Einheitliches Erscheinungsbild über alle Seiten hinweg.
- Wartbarkeit: Änderungen am Layout werden zentral vorgenommen und wirken sich auf alle Views aus.
- Organisation: Trennung von Seitenstruktur und spezifischem Inhalt.
Aufbau eines Layouts
Das Hauptlayout wird meist als _Layout.cshtml im Ordner Views/Shared abgelegt.
Beispiel: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
<link href="~/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-brand">AspNet Core App</div>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
<div class="page-content">
@RenderBody()
</div>
</div>
</body>
</html>
@RenderBody(): Platzhalter für den spezifischen Seiteninhalt.@ViewData["Title"]: Dynamischer Seitentitel.
Layout in einer View verwenden
In einer View kann das Layout explizit gesetzt werden:
@{{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewData["Title"] = "Home";
}}
<h1>Home</h1>
<p>Willkommen auf der Startseite</p>
_ViewStart.cshtml – Standardlayout festlegen
Die Datei _ViewStart.cshtml legt das Standardlayout für alle Views in einem Ordner und dessen Unterordner fest.
@{{
Layout = "_Layout";
}}
- Kann in Unterordnern überschrieben werden.
- Layout kann in einzelnen Views weiterhin explizit gesetzt werden.
Dynamische Layouts
Das Layout kann auch dynamisch innerhalb einer View gesetzt werden, z.B. abhängig von Daten:
@{{
if (ViewBag.ProductID != null) {{
Layout = "~/Views/Shared/_ProductsLayout.cshtml";
}}
}}
Sections – Flexible Platzhalter
Mit @RenderSection() können im Layout spezielle Bereiche definiert werden, die von Views befüllt werden:
Beispiel im Layout
<div class="footer-content">
@RenderSection("footer_section", false)
</div>
Beispiel in einer View
@section footer_section {{
<p>Kontakt: 01234-56789</p>
}}
required: true/false: Gibt an, ob die Section zwingend befüllt werden muss.
Verschachtelte Layouts
Layouts können von anderen Layouts erben:
Beispiel
- _MasterLayout.cshtml (Basislayout)
- _Layout.cshtml (Kindlayout, erbt von MasterLayout)
@{{
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}}
Best Practices
- DRY-Prinzip: Wiederholungen vermeiden.
- View Models: Daten typisiert an Layouts übergeben.
- Partial Views: Komplexe Layouts in Teilansichten zerlegen.
- Fehlerbehandlung: Fehlende Sections abfangen.
- Dokumentation: Bedingungen und Hierarchien klar dokumentieren.
Troubleshooting & Interview-Tipps
- Hierarchie erklären: Wie greifen Layouts, Sections und _ViewStart.cshtml ineinander?
- Codebeispiele: Snippets für Layout, Section und dynamische Auswahl.
- Fehleranalyse: Wie debuggt man Layout-Probleme?
Zusammenfassung
Layout Views sind essenziell für Struktur, Wiederverwendbarkeit und Wartbarkeit in ASP.NET Core MVC. Sie ermöglichen flexible und modulare Webanwendungen mit klarer Trennung von Design und Inhalt.
Weitere Fragen? Schreibe sie gerne in die Kommentare!