Webframeworkk/ASP.NET Core/Layout Views: Unterschied zwischen den Versionen

Aus Dokument
Zur Navigation springen Zur Suche springen

Thorsten (Diskussion | Beiträge)

3 Benutzergruppen
69 Bearbeitungen
VisuellWikitext
imported>Import
Version 186
 
Die Seite wurde neu angelegt: „ == 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:''' Einhei…“
 
Zeile 1: Zeile 1:
''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''
''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''
----
----


== Einführung ==
== 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.
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? ==
== Warum Layout Views? ==
* '''Wiederverwendbarkeit:''' Gemeinsame HTML-, CSS- und JavaScript-Elemente müssen nicht in jeder View wiederholt werden.
* '''Wiederverwendbarkeit:''' Gemeinsame HTML-, CSS- und JavaScript-Elemente müssen nicht in jeder View wiederholt werden.
* '''Konsistenz:''' Einheitliches Erscheinungsbild über alle Seiten hinweg.
* '''Konsistenz:''' Einheitliches Erscheinungsbild über alle Seiten hinweg.
Zeile 16: Zeile 14:
* '''Organisation:''' Trennung von Seitenstruktur und spezifischem Inhalt.
* '''Organisation:''' Trennung von Seitenstruktur und spezifischem Inhalt.


 
----
-----


== Aufbau eines Layouts ==
== Aufbau eines Layouts ==
Das Hauptlayout wird meist als _Layout.cshtml im Ordner Views/Shared abgelegt.
Das Hauptlayout wird meist als _Layout.cshtml im Ordner Views/Shared abgelegt.


=== Beispiel: _Layout.cshtml ===
=== Beispiel: _Layout.cshtml ===
<pre>
<!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>
</pre>


<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;@ViewData[&quot;Title&quot;]&lt;/title&gt;
    &lt;link href=&quot;~/StyleSheet.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;navbar&quot;&gt;
            &lt;div class=&quot;navbar-brand&quot;&gt;AspNet Core App&lt;/div&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;page-content&quot;&gt;
            @RenderBody()
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
* <code>@RenderBody()</code>: Platzhalter für den spezifischen Seiteninhalt.
* <code>@RenderBody()</code>: Platzhalter für den spezifischen Seiteninhalt.
* <code>@ViewData[&quot;Title&quot;]</code>: Dynamischer Seitentitel.
* <code>@ViewData["Title"]</code>: Dynamischer Seitentitel.
 


-----
----


== Layout in einer View verwenden ==
== Layout in einer View verwenden ==
In einer View kann das Layout explizit gesetzt werden:
In einer View kann das Layout explizit gesetzt werden:


<pre>@{{
<pre>
     Layout = &quot;~/Views/Shared/_Layout.cshtml&quot;;
@{{
     ViewData[&quot;Title&quot;] = &quot;Home&quot;;
     Layout = "~/Views/Shared/_Layout.cshtml";
     ViewData["Title"] = "Home";
}}
}}
&lt;h1&gt;Home&lt;/h1&gt;
<h1>Home</h1>
&lt;p&gt;Willkommen auf der Startseite&lt;/p&gt;</pre>
<p>Willkommen auf der Startseite</p>
</pre>


-----
----


== _ViewStart.cshtml – Standardlayout festlegen ==
== _ViewStart.cshtml – Standardlayout festlegen ==
Die Datei _ViewStart.cshtml legt das Standardlayout für alle Views in einem Ordner und dessen Unterordner fest.


Die Datei _ViewStart.cshtml legt das Standardlayout für alle Views in einem Ordner und dessen Unterordner fest.
<pre>
@{{
    Layout = "_Layout";
}}
</pre>


<pre>@{{
    Layout = &quot;_Layout&quot;;
}}</pre>
* Kann in Unterordnern überschrieben werden.
* Kann in Unterordnern überschrieben werden.
* Layout kann in einzelnen Views weiterhin explizit gesetzt werden.
* Layout kann in einzelnen Views weiterhin explizit gesetzt werden.


 
----
-----


== Dynamische Layouts ==
== Dynamische Layouts ==
Das Layout kann auch dynamisch innerhalb einer View gesetzt werden, z.B. abhängig von Daten:
Das Layout kann auch dynamisch innerhalb einer View gesetzt werden, z.B. abhängig von Daten:


<pre>@{{
<pre>
@{{
     if (ViewBag.ProductID != null) {{
     if (ViewBag.ProductID != null) {{
         Layout = &quot;~/Views/Shared/_ProductsLayout.cshtml&quot;;
         Layout = "~/Views/Shared/_ProductsLayout.cshtml";
     }}
     }}
}}</pre>
}}
</pre>


-----
----


== Sections – Flexible Platzhalter ==
== Sections – Flexible Platzhalter ==
Mit <code>@RenderSection()</code> können im Layout spezielle Bereiche definiert werden, die von Views befüllt werden:
Mit <code>@RenderSection()</code> können im Layout spezielle Bereiche definiert werden, die von Views befüllt werden:


=== Beispiel im Layout ===
=== Beispiel im Layout ===
<pre>
<div class="footer-content">
    @RenderSection("footer_section", false)
</div>
</pre>


<pre>&lt;div class=&quot;footer-content&quot;&gt;
    @RenderSection(&quot;footer_section&quot;, false)
&lt;/div&gt;</pre>
=== Beispiel in einer View ===
=== Beispiel in einer View ===
<pre>
@section footer_section {{
    <p>Kontakt: 01234-56789</p>
}}
</pre>


<pre>@section footer_section {{
    &lt;p&gt;Kontakt: 01234-56789&lt;/p&gt;
}}</pre>
* <code>required: true/false</code>: Gibt an, ob die Section zwingend befüllt werden muss.
* <code>required: true/false</code>: Gibt an, ob die Section zwingend befüllt werden muss.


 
----
-----


== Verschachtelte Layouts ==
== Verschachtelte Layouts ==
Layouts können von anderen Layouts erben:
Layouts können von anderen Layouts erben:


=== Beispiel ===
=== Beispiel ===
* _MasterLayout.cshtml (Basislayout)
* _MasterLayout.cshtml (Basislayout)
* _Layout.cshtml (Kindlayout, erbt von MasterLayout)
* _Layout.cshtml (Kindlayout, erbt von MasterLayout)


<!-- -->
<pre>
<pre>@{{
@{{
     Layout = &quot;~/Views/Shared/_MasterLayout.cshtml&quot;;
     Layout = "~/Views/Shared/_MasterLayout.cshtml";
}}</pre>
}}
</pre>


-----
----


== Best Practices ==
== Best Practices ==
* '''DRY-Prinzip:''' Wiederholungen vermeiden.
* '''DRY-Prinzip:''' Wiederholungen vermeiden.
* '''View Models:''' Daten typisiert an Layouts übergeben.
* '''View Models:''' Daten typisiert an Layouts übergeben.
Zeile 132: Zeile 132:
* '''Dokumentation:''' Bedingungen und Hierarchien klar dokumentieren.
* '''Dokumentation:''' Bedingungen und Hierarchien klar dokumentieren.


----


-----
== Troubleshooting & Interview-Tipps ==
 
== Troubleshooting &amp; Interview-Tipps ==
 
* '''Hierarchie erklären:''' Wie greifen Layouts, Sections und _ViewStart.cshtml ineinander?
* '''Hierarchie erklären:''' Wie greifen Layouts, Sections und _ViewStart.cshtml ineinander?
* '''Codebeispiele:''' Snippets für Layout, Section und dynamische Auswahl.
* '''Codebeispiele:''' Snippets für Layout, Section und dynamische Auswahl.
* '''Fehleranalyse:''' Wie debuggt man Layout-Probleme?
* '''Fehleranalyse:''' Wie debuggt man Layout-Probleme?


 
----
-----


== Zusammenfassung ==
== 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.
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!
'''Weitere Fragen?''' Schreibe sie gerne in die Kommentare!

Aktuelle Version vom 18. Februar 2026, 02:30 Uhr

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


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!

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

Abgerufen von „https://mediawiki.wissen-ahrensburg.de/index.php?title=Webframeworkk/ASP.NET_Core/Layout_Views&oldid=3202“