Freigeben über

Erstellen eines konsistenten Layouts in ASP.NET Web Pages Websites (Razor)

  • Artikel

von Tom FitzMacken

In diesem Artikel wird erläutert, wie Sie Layoutseiten auf einer ASP.NET Web Pages -Website (Razor) verwenden können, um wiederverwendbare Inhaltsblöcke (z. B. Kopf- und Fußzeilen) zu erstellen und ein einheitliches Aussehen für alle Seiten auf der Website zu erstellen.

Was Sie lernen werden:

  • Erstellen wiederverwendbarer Inhaltsblöcke wie Kopf- und Fußzeilen
  • Erstellen eines konsistenten Erscheinungsbilds für alle Seiten in Ihrer Website mithilfe eines Layouts.
  • So übergeben Sie Daten zur Laufzeit an eine Layoutseite.

Dies sind die ASP.NET Features, die im Artikel vorgestellt werden:

  • Inhaltsblöcke, bei denen es sich um Dateien handelt, die HTML-formatierten Inhalt enthalten, der auf mehreren Seiten eingefügt werden soll.
  • Layoutseiten, bei denen es sich um Seiten handelt, die HTML-formatierten Inhalt enthalten, der von Seiten auf der Website freigegeben werden kann.
  • Die RenderPageMethoden , RenderBodyund RenderSection , die ASP.NET angeben, wo Seitenelemente eingefügt werden sollen.
  • Das PageData Wörterbuch, mit dem Sie Daten zwischen Inhaltsblöcken und Layoutseiten freigeben können.

Im Tutorial verwendete Softwareversionen

  • ASP.NET Web Pages (Razor) 3

Dieses Tutorial funktioniert auch mit ASP.NET Web Pages 2.

Informationen zu Layoutseiten

Viele Websites enthalten Inhalte, die auf jeder Seite angezeigt werden, z. B. eine Kopf- und Fußzeile oder ein Feld, das Benutzern mitteilt, dass sie angemeldet sind. mit ASP.NET können Sie eine separate Datei mit einem Inhaltsblock erstellen, der Text, Markup und Code wie eine normale Webseite enthalten kann. Anschließend können Sie den Inhaltsblock auf anderen Seiten auf der Website einfügen, auf der die Informationen angezeigt werden sollen. Auf diese Weise müssen Sie nicht den gleichen Inhalt kopieren und in jede Seite einfügen. Das Erstellen von allgemeinen Inhalten wie dieser erleichtert auch die Aktualisierung Ihrer Website. Wenn Sie den Inhalt ändern müssen, können Sie einfach eine einzelne Datei aktualisieren, und die Änderungen werden dann überall dort angezeigt, wo der Inhalt eingefügt wurde.

Das folgende Diagramm zeigt, wie Inhaltsblöcke funktionieren. Wenn ein Browser eine Seite vom Webserver anfordert, fügt ASP.NET die Inhaltsblöcke an dem Punkt ein, an dem die RenderPage -Methode auf der seite Standard aufgerufen wird. Die fertige (zusammengeführte) Seite wird dann an den Browser gesendet.

Konzeptionelles Diagramm, das zeigt, wie die RenderPage-Methode eine Seite, auf die verwiesen wird, in die aktuelle Seite einfügt.

In diesem Verfahren erstellen Sie eine Seite, die auf zwei Inhaltsblöcke (Kopf- und Fußzeile) verweist, die sich in separaten Dateien befinden. Sie können dieselben Inhaltsblöcke auf jeder Seite ihrer Website verwenden. Wenn Sie fertig sind, erhalten Sie eine Seite wie die folgende:

Screenshot: Seite im Browser, die sich aus dem Ausführen einer Seite ergibt, die Aufrufe der RenderPage-Methode enthält.

  1. Erstellen Sie im Stammordner Ihrer Website eine Datei mit dem Namen Index.cshtml.

  2. Ersetzen Sie das vorhandene Markup durch Folgendes:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  </body>
</html>

  3. Erstellen Sie im Stammordner einen Ordner mit dem Namen Shared.

    Hinweis

    Es ist üblich, Dateien, die von Webseiten gemeinsam genutzt werden, in einem Ordner mit dem Namen Shared zu speichern.

  4. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _Header.cshtml.

  5. Ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    <div class="header">This is header text.</div>

    Beachten Sie, dass der Dateiname _Header.cshtml mit einem Unterstrich (_) als Präfix lautet. ASP.NET sendet keine Seite an den Browser, wenn ihr Name mit einem Unterstrich beginnt. Dadurch wird verhindert, dass Benutzer diese Seiten (versehentlich oder auf andere Weise) direkt anfordern. Es ist eine gute Idee, einen Unterstrich zu verwenden, um Seiten zu benennen, die Inhaltsblöcke enthalten, da Sie nicht möchten, dass Benutzer diese Seiten anfordern können – sie sind ausschließlich vorhanden, um in andere Seiten eingefügt zu werden.

  6. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _Footer.cshtml , und ersetzen Sie den Inhalt durch Folgendes:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>

  7. Fügen Sie auf der Seite Index.cshtml zwei Aufrufe der RenderPage -Methode hinzu, wie hier gezeigt:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>

    Dies zeigt, wie Sie einen Inhaltsblock in eine Webseite einfügen. Sie rufen die RenderPage -Methode auf und übergeben ihr den Namen der Datei, deren Inhalt Sie an diesem Punkt einfügen möchten. Hier fügen Sie den Inhalt der Dateien _Header.cshtml und _Footer.cshtml in die Datei Index.cshtml ein.

  8. Führen Sie die Seite Index.cshtml in einem Browser aus. (Klicken Sie in WebMatrix im Arbeitsbereich Dateien mit der rechten Maustaste auf die Datei, und wählen Sie dann Im Browser starten aus.)

  9. Zeigen Sie im Browser die Seitenquelle an. (Klicken Sie beispielsweise in Internet Explorer mit der rechten Maustaste auf die Seite, und klicken Sie dann auf Quelle anzeigen.)

    Dadurch können Sie das An den Browser gesendete Webseitenmarkup anzeigen, das das Indexseitenmarkup mit den Inhaltsblöcken kombiniert. Das folgende Beispiel zeigt die Seitenquelle, die für Index.cshtml gerendert wird. Die Aufrufe von RenderPage , die Sie in Index.cshtml eingefügt haben, wurden durch den tatsächlichen Inhalt der Kopf- und Fußzeilendateien ersetzt.

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>

Erstellen eines konsistenten Erscheinungsbilds mithilfe von Layoutseiten

Bisher haben Sie gesehen, dass es einfach ist, denselben Inhalt auf mehreren Seiten einzuschließen. Ein strukturierter Ansatz zum Erstellen eines konsistenten Erscheinungsbilds für eine Website ist die Verwendung von Layoutseiten. Eine Layoutseite definiert die Struktur einer Webseite, enthält aber keinen tatsächlichen Inhalt. Nachdem Sie eine Layoutseite erstellt haben, können Sie Webseiten erstellen, die den Inhalt enthalten, und diese dann mit der Layoutseite verknüpfen. Wenn diese Seiten angezeigt werden, werden sie entsprechend der Layoutseite formatiert. (In diesem Sinne fungiert eine Layoutseite als eine Art Vorlage für Inhalte, die auf anderen Seiten definiert sind.)

Die Layoutseite entspricht jeder HTML-Seite, mit der Ausnahme, dass sie einen Aufruf der RenderBody -Methode enthält. Die Position der RenderBody -Methode auf der Layoutseite bestimmt, wo die Informationen von der Inhaltsseite eingeschlossen werden.

Das folgende Diagramm zeigt, wie Inhaltsseiten und Layoutseiten zur Laufzeit kombiniert werden, um die fertige Webseite zu erzeugen. Der Browser fordert eine Inhaltsseite an. Die Inhaltsseite enthält Code, der die Layoutseite angibt, die für die Struktur der Seite verwendet werden soll. Auf der Layoutseite wird der Inhalt an dem Punkt eingefügt, an dem die RenderBody -Methode aufgerufen wird. Inhaltsblöcke können auch in die Layoutseite eingefügt werden, indem die RenderPage -Methode aufgerufen wird, wie im vorherigen Abschnitt. Wenn die Webseite abgeschlossen ist, wird sie an den Browser gesendet.

Screenshot: Seite im Browser, die sich aus dem Ausführen einer Seite ergibt, die Aufrufe der RenderBody-Methode enthält.

Das folgende Verfahren zeigt, wie Sie eine Layoutseite erstellen und Inhaltsseiten damit verknüpfen.

  1. Erstellen Sie im Ordner Freigegeben Ihrer Website eine Datei mit dem Namen _Layout1.cshtml.

  2. Ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    <!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Sie verwenden die RenderPage -Methode auf einer Layoutseite, um Inhaltsblöcke einzufügen. Eine Layoutseite kann nur einen Aufruf der RenderBody -Methode enthalten.

  3. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _Header2.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    <div id="header">Creating a Consistent Look</div>

  4. Erstellen Sie im Stammordner einen neuen Ordner, und nennen Sie ihn Styles.

  5. Erstellen Sie im Ordner Styles eine Datei mit dem Namen Site.css , und fügen Sie die folgenden Formatdefinitionen hinzu:

    h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}

#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

    Diese Stildefinitionen zeigen hier nur, wie Stylesheets mit Layoutseiten verwendet werden können. Wenn Sie möchten, können Sie eigene Stile für diese Elemente definieren.

  6. Erstellen Sie im Stammordner eine Datei mit dem Namen Content1.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    @{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Dies ist eine Seite, die eine Layoutseite verwendet. Der Codeblock oben auf der Seite gibt an, welche Layoutseite zum Formatieren dieses Inhalts verwendet werden soll.

  7. Führen Sie Content1.cshtml in einem Browser aus. Die gerenderte Seite verwendet das in _Layout1.cshtml definierte Format und Stylesheet sowie den in Content1.cshtml definierten Text (Inhalt).

    [Der Screenshot zeigt die Ausführung von Content 1 punkt CSHTML in einem Browser.]

    Sie können Schritt 6 wiederholen, um zusätzliche Inhaltsseiten zu erstellen, die dann dieselbe Layoutseite verwenden können.

    Hinweis

    Sie können Ihre Website so einrichten, dass Sie automatisch dieselbe Layoutseite für alle Inhaltsseiten in einem Ordner verwenden können. Weitere Informationen finden Sie unter Anpassen des Site-Wide Verhaltens für ASP.NET Web Pages.

Entwerfen von Layoutseiten mit mehreren Inhaltsabschnitten

Eine Inhaltsseite kann mehrere Abschnitte enthalten, was nützlich ist, wenn Sie Layouts verwenden möchten, die mehrere Bereiche mit ersetzbarem Inhalt enthalten. Auf der Inhaltsseite geben Sie jedem Abschnitt einen eindeutigen Namen. (Der Standardabschnitt bleibt unbenannt.) Auf der Layoutseite fügen Sie eine RenderBody Methode hinzu, um anzugeben, wo der unbenannte Abschnitt (Standard) angezeigt werden soll. Anschließend fügen Sie separate RenderSection Methoden hinzu, um benannte Abschnitte einzeln zu rendern.

Das folgende Diagramm zeigt, wie ASP.NET Inhalte behandelt, die in mehrere Abschnitte unterteilt sind. Jeder benannte Abschnitt ist in einem Abschnittsblock auf der Inhaltsseite enthalten. (Sie heißen Header und List im Beispiel.) Das Framework fügt den Inhaltsabschnitt an dem Punkt, an dem die -Methode aufgerufen wird, in die RenderSection Layoutseite ein. Der unbenannte Abschnitt (Standard) wird an dem Punkt eingefügt, an dem die RenderBody Methode aufgerufen wird, wie Sie zuvor gesehen haben.

Konzeptionelles Diagramm, das zeigt, wie die RenderSection-Methode Verweisabschnitte in die aktuelle Seite einfügt.

In diesem Verfahren wird gezeigt, wie Eine Inhaltsseite mit mehreren Inhaltsabschnitten erstellt und mithilfe einer Layoutseite gerendert wird, die mehrere Inhaltsabschnitte unterstützt.

  1. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _Layout2.cshtml.

  2. Ersetzen Sie vorhandene Inhalte durch Folgendes:

    <!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Sie verwenden die RenderSection -Methode, um sowohl den Header- als auch den Listenabschnitt zu rendern.

  3. Erstellen Sie im Stammordner eine Datei mit dem Namen Content2.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    @{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Diese Inhaltsseite enthält einen Codeblock oben auf der Seite. Jeder benannte Abschnitt ist in einem Abschnittsblock enthalten. Der Rest der Seite enthält den (unbenannten) Standardinhaltsabschnitt.

  4. Führen Sie Content2.cshtml in einem Browser aus.

    Screenshot: Seite im Browser, die sich aus der Ausführung einer Seite ergibt, die Aufrufe der RenderSection-Methode enthält.

Optionale Inhaltsabschnitte

Normalerweise müssen die Abschnitte, die Sie auf einer Inhaltsseite erstellen, mit Abschnitten übereinstimmen, die auf der Layoutseite definiert sind. Sie können Fehler erhalten, wenn eine der folgenden Aktionen auftritt:

  • Die Inhaltsseite enthält einen Abschnitt, der keinen entsprechenden Abschnitt auf der Layoutseite enthält.
  • Die Layoutseite enthält einen Abschnitt, für den es keinen Inhalt gibt.
  • Die Layoutseite enthält Methodenaufrufe, die versuchen, denselben Abschnitt mehrmals zu rendern.

Sie können dieses Verhalten jedoch für einen benannten Abschnitt überschreiben, indem Sie den Abschnitt auf der Layoutseite als optional deklarieren. Auf diese Weise können Sie mehrere Inhaltsseiten definieren, die eine Layoutseite gemeinsam nutzen können, aber möglicherweise Inhalte für einen bestimmten Abschnitt enthalten.

  1. Öffnen Sie Content2.cshtml , und entfernen Sie den folgenden Abschnitt:

    @section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

  2. Speichern Sie die Seite, und führen Sie sie dann in einem Browser aus. Es wird eine Fehlermeldung angezeigt, da die Inhaltsseite keinen Inhalt für einen auf der Layoutseite definierten Abschnitt bereitstellt, nämlich den Kopfzeilenabschnitt.

    Screenshot des Fehlers, der auftritt, wenn Sie eine Seite ausführen, die die RenderSection-Methode aufruft, aber der entsprechende Abschnitt nicht bereitgestellt wird.

  3. Öffnen Sie im Ordner Freigegeben die Seite _Layout2.cshtml , und ersetzen Sie diese Zeile:

    @RenderSection("header")

    durch den folgenden Code:

    @RenderSection("header", required: false)

    Alternativ können Sie die vorherige Codezeile durch den folgenden Codeblock ersetzen, der die gleichen Ergebnisse erzeugt:

    @if (IsSectionDefined("header")) {
    @RenderSection("header")
}

  4. Führen Sie die Seite Content2.cshtml in einem Browser erneut aus. (Wenn diese Seite im Browser noch geöffnet ist, können Sie sie einfach aktualisieren.) Dieses Mal wird die Seite ohne Fehler angezeigt, obwohl sie keinen Header hat.

Übergeben von Daten an Layoutseiten

Möglicherweise haben Sie Daten auf der Inhaltsseite definiert, auf die Sie auf einer Layoutseite verweisen müssen. Wenn ja, müssen Sie die Daten von der Inhaltsseite an die Layoutseite übergeben. Sie können beispielsweise die Anmelde-status eines Benutzers anzeigen oder Inhaltsbereiche basierend auf Benutzereingaben ein- oder ausblenden.

Um Daten von einer Inhaltsseite an eine Layoutseite zu übergeben, können Sie Werte in die PageData Eigenschaft der Inhaltsseite einfügen. Die PageData -Eigenschaft ist eine Auflistung von Name-Wert-Paaren, die die Daten enthalten, die Sie zwischen Seiten übergeben möchten. Auf der Layoutseite können Sie dann Werte aus der PageData Eigenschaft lesen.

Hier sehen Sie ein weiteres Diagramm. Hier wird gezeigt, wie ASP.NET die PageData -Eigenschaft verwenden können, um Werte von einer Inhaltsseite an die Layoutseite zu übergeben. Wenn ASP.NET mit dem Erstellen der Webseite beginnt, wird die PageData Auflistung erstellt. Auf der Inhaltsseite schreiben Sie Code, um Daten in die PageData Sammlung zu speichern. Auf Werte in der PageData Auflistung kann auch von anderen Abschnitten auf der Inhaltsseite oder von zusätzlichen Inhaltsblöcken zugegriffen werden.

Konzeptionelles Diagramm, das zeigt, wie eine Inhaltsseite ein PageData-Wörterbuch auffüllen und diese Informationen an die Layoutseite übergeben kann.

Das folgende Verfahren zeigt, wie Daten von einer Inhaltsseite an eine Layoutseite übergeben werden. Wenn die Seite ausgeführt wird, wird eine Schaltfläche angezeigt, mit der der Benutzer eine Liste ausblenden oder anzeigen kann, die auf der Layoutseite definiert ist. Wenn Benutzer auf die Schaltfläche klicken, wird ein true/false -Wert (boolescher Wert) in der PageData -Eigenschaft festgelegt. Die Layoutseite liest diesen Wert, und wenn er false ist, blendet die Liste aus. Der Wert wird auch auf der Inhaltsseite verwendet, um zu bestimmen, ob die Schaltfläche Liste ausblenden oder die Schaltfläche Liste anzeigen angezeigt werden soll.

[Screenshot: Seite

  1. Erstellen Sie im Stammordner eine Datei mit dem Namen Content3.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    @{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}

    Der Code speichert zwei Datenelemente in der PageData Eigenschaft – den Titel der Webseite und true oder false, um anzugeben, ob eine Liste angezeigt werden soll.

    Beachten Sie, dass Sie mit ASP.NET html-Markup bedingt mithilfe eines Codeblocks auf die Seite einfügen können. Der Block im Textkörper der Seite bestimmt beispielsweise, if/else welches Formular angezeigt werden soll, je nachdem, ob PageData["ShowList"] auf true festgelegt ist.

  2. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _Layout3.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    <!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

    Die Layoutseite enthält einen Ausdruck im -Element, der <title> den Titelwert aus der PageData -Eigenschaft abruft. Außerdem wird der ShowList Wert der PageData -Eigenschaft verwendet, um zu bestimmen, ob der Listeninhaltsblock angezeigt werden soll.

  3. Erstellen Sie im Ordner Freigegeben eine Datei mit dem Namen _List.cshtml , und ersetzen Sie alle vorhandenen Inhalte durch Folgendes:

    <ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

  4. Führen Sie die Seite Content3.cshtml in einem Browser aus. Die Seite wird angezeigt, wobei die Liste links auf der Seite und unten die Schaltfläche Liste ausblenden angezeigt wird.

    Screenshot der Seite mit der Liste und der Schaltfläche

  5. Klicken Sie auf Liste ausblenden. Die Liste wird ausgeblendet, und die Schaltfläche ändert sich in Liste anzeigen.

    Screenshot der Seite, die die Liste nicht enthält, und eine Schaltfläche mit der Aufschrift

  6. Klicken Sie auf die Schaltfläche Liste anzeigen , und die Liste wird erneut angezeigt.

Zusätzliche Ressourcen

Anpassen Site-Wide Verhaltens für ASP.NET Web Pages