TOC

This article has been localized into German by the community.

Layout:

Abschnitte

Mit einem Layout können Sie gemeinsamen Inhalt auf mehreren Seiten wiederverwenden. Manchmal müssen Sie jedoch den Inhalt, der aus dem Layout gerendert wird, basierend auf der tatsächlichen Seite geringfügig ändern. Übliche Szenarien hierfür sind das Einfügen von zusätzlichem JavaScript-Code in den HEAD-Abschnitt, das Hinzufügen eines zusätzlichen Menüelements zum Menü oder das Implementieren einer benutzerdefinierten Seitenleiste basierend auf dem Teil der Website, zu dem der Benutzer navigiert hat. Hier kommen Abschnitte ins Bild - Sie können einfach einen Punkt in der Layout-Datei definieren, an dem die Seite/Ansicht benutzerdefinierte Markups einfügen kann. Lassen Sie uns direkt zu einem Beispiel springen, damit Sie sehen können, was ich meine.

Zunächst fügen wir unserer vorhandenen Layout-Datei einen RenderSection() -Aufruf hinzu. (Wenn Sie Ihrem Projekt noch kein Layout hinzugefügt haben, lesen Sie einfach einen der vorherigen Artikel, um zu erfahren, wie Sie dies tun ):

_Layout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>

    @RenderBody()
    
    <p>Lots of Layout content goes here...</p>

    @RenderSection("Footer")

</body>
</html>

Beachten Sie den Aufruf von RenderSection() - es ist ziemlich ähnlich wie RenderBody(), da es einfach den Ort definiert, an dem ein bestimmter Inhaltstyp gerendert werden soll. In diesem Fall möchten wir einen Abschnitt mit dem Namen "Footer" am unteren Rand der Ansicht rendern. Wir sollten jetzt diesen Abschnitt in den Seiten/Ansichten unter Verwendung des Layouts definieren. Hier sind zwei verschiedene Ansichten, die das Layout verwenden, von denen jede jedoch einen eigenen Inhalt für den Abschnitt "Fußzeile" hat:

About.cshtml:

@{
    ViewData["Title"] = "About";
}

@section Footer {
    Hello from the About page!
}

<h2>About</h2>

Beachten Sie den mittleren Teil, in dem wir den Inhalt für den Fußzeilenabschnitt definieren - die Syntax ist recht einfach: Das Razor-at-Zeichen, gefolgt vom Schlüsselwort section und dem Namen des Abschnitts, den wir definieren möchten. Innerhalb der geschweiften Klammern können wir dann den Inhalt des Abschnitts definieren. In diesem Fall verwenden wir nur einen einfachen Text, aber Sie können natürlich auch Markups hinzufügen. Lassen Sie uns genau das für unsere Produktansicht tun:

Products.cshtml:

@{
    ViewData["Title"] = "Products";
}

@section Footer {
    <span>
        Hello from the <b>Products</b> page!
    </span>
}

<h2>Products</h2>

Wenn Sie bereits eine _ViewStart-Datei wie oben beschrieben definiert haben, verwenden die beiden Ansichten automatisch unsere Layout-Seite, einschließlich des Abschnitts. In diesem Fall wird in diesen Ansichten der Inhalt aus der Layoutdatei wiederverwendet, jedoch mit unterschiedlichem Inhalt in unserem Abschnitt "Fußzeile".

Optionale Abschnitte

Standardmäßig sind alle Abschnitte erforderlich, genau wie der Körper. Dies bedeutet, dass, wenn Ihre Seite ein Layout mit einem oder mehreren definierten Abschnitten verwendet, Ihre Seite/Ansicht all diese Abschnitte definieren muss. Wenn dies nicht der Fall ist, erhalten Sie eine Fehlermeldung. Auf diese Weise können Sie sicherstellen, dass alle Ihre Seiten den erforderlichen Inhalt implementieren. Sie können einen erforderlichen Abschnitt jedoch sehr einfach in einen optionalen Abschnitt umwandeln, wenn Sie ihn definieren:

@RenderSection("Footer", required : false)

Beachten Sie den zusätzlichen Parameter, wenn Sie den Befehl RenderSection() aufrufen. Er besagt lediglich, dass dieser Abschnitt nicht mehr benötigt wird und dass Ihre Seiten diesen Abschnitt definieren können oder nicht. Wenn der Abschnitt nicht definiert ist, wird nichts gerendert.

Prüfen, ob ein Abschnitt definiert wurde

Wenn Sie einen Abschnitt als optional deklarieren, kann es hilfreich sein zu wissen, ob die aufrufende Seite / Ansicht diesen Abschnitt definiert oder nicht. Auf diese Weise können Sie einen bestimmten Fallback-Inhalt definieren, falls der Inhalt nicht von der Seite/Ansicht bereitgestellt wird:

@RenderSection("Footer", required : false)

@if(!IsSectionDefined("Footer"))
{
    <span>Generic footer message!</span>
}

Wenn der Fußzeilenabschnitt nicht durch die Seite/Ansicht definiert ist, wird stattdessen unsere Standard-Fallback-Nachricht gerendert.

Zusammenfassung

Mithilfe von Abschnitten können Sie bestimmte Bereiche in Ihrem Layout definieren, in die Sie mithilfe des Layouts Inhalte von der Seite/Ansicht einfügen können. Dies kann in einer Vielzahl von Szenarien verwendet werden, wie in den obigen Beispielen gezeigt.

This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!