ASP.NET Web Pages – Seitenlayout

Mit Web Pages ist es einfach, eine Website mit einem einheitlichen Layout zu erstellen.

Einheitliches Erscheinungsbild

Im Internet finden Sie viele Websites mit einem einheitlichen Look and Feel:

  • Jede Seite hat denselben Header
  • Jede Seite hat denselben Footer
  • Jede Seite hat denselben Stil und dasselbe Layout

Mit Web Pages können Sie dies sehr effizient tun. Sie können wiederverwendbare Inhaltsblöcke (wie Seitenheader und -footer) in einer separaten Datei ablegen.

Sie können auch Layoutvorlagen (Layout-Dateien) verwenden, um ein einheitliches Layout für alle Webseiten auf Ihrer Website zu definieren.

Inhaltsblöcke

Viele Websites enthalten Inhalte, die auf jeder Seite der Website angezeigt werden (wie Seitenheader und -footer).

Mit Web Pages können Sie die Methode@RenderPage()verwenden, um Inhalte aus verschiedenen Dateien zu importieren.

Inhaltsblöcke (aus einer anderen Datei) können an beliebiger Stelle in einer Webseite importiert werden. Inhaltsblöcke können Text, Markup und Code enthalten, genau wie jede gewöhnliche Webseite.

Das Schreiben von gemeinsamen Headern und Footern als separate Dateien erspart Ihnen viel Arbeit. Sie müssen nicht auf jeder Seite denselben Inhalt schreiben, und wenn sich der Inhalt ändert, müssen Sie nur die Header- oder Footer-Datei ändern, um zu sehen, wie der entsprechende Inhalt auf jeder Seite der Website aktualisiert wird.

Das Folgende zeigt, wie das im Code aussieht:

Beispiel

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>Dies ist ein Absatz</p>
@RenderPage("footer.cshtml")
</body>
</html>

Beispiel ausführen »

Layout-Seite

Im vorherigen Abschnitt haben Sie gesehen, dass es sehr einfach ist, denselben Inhalt auf mehreren Webseiten anzuzeigen.

Eine andere Möglichkeit, ein einheitliches Erscheinungsbild zu erzeugen, ist die Verwendung von Layout-Seiten. Eine Layout-Seite enthält die Struktur einer Webseite, nicht den Inhalt. Wenn eine Webseite (Inhaltsseite) auf eine Layout-Seite verweist, wird sie entsprechend der Struktur der Layout-Seite (Vorlage) angezeigt.

Eine Layout-Seite verwendet die Methode@RenderBody(), um Inhaltsseiten einzubinden. Ansonsten unterscheidet sie sich nicht von einer normalen Webseite.

Jede Inhaltsseite muss mit einerLayout-Direktive beginnen.

Das Folgende zeigt, wie das im Code aussieht:

Layout-Seite:

<html>
<body>
<p>Dies ist der Header-Text</p>
@RenderBody()
<p>&copy; 2012 Example. Alle Rechte vorbehalten.</p>
</body>
</html>

Beliebige Webseite:

@{Layout="Layout.cshtml";}

<h1>Willkommen auf example.com</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 laborisnisi ut aliquip ex ea commodo consequat.
</p>

Beispiel ausführen »

D.R.Y. – Don't Repeat Yourself (Wiederhole dich nicht)

Mit den beiden ASP.NET-Tools Content-Blöcke und Layout-Seiten können Sie dafür sorgen, dass Ihre Webanwendung ein einheitliches Erscheinungsbild aufweist.

Diese beiden Tools können Ihnen viel Arbeit ersparen; Sie müssen dieselben Informationen nicht mehr auf jeder Seite wiederholen. Zentralisiertes Markup, Styles und Code machen Ihre Webanwendung einfacher zu verwalten und zu pflegen.

Verhindern des Durchsuchens von Dateien

In ASP.NET wird bei Dateien, deren Name mit einem Unterstrich beginnt, verhindert, dass sie im Web durchsucht werden.

Wenn Sie nicht möchten, dass Ihre Inhaltsblöcke oder Layout-Seiten von Ihren Benutzern eingesehen werden, können Sie diese Dateien umbenennen:

_header.cshtm

_footer.cshtml

_Layout.cshtml

Verstecken von sensiblen Informationen

In ASP.NET ist die gängigste Methode zum Verstecken sensibler Informationen (Datenbankpasswörter, E-Mail-Passwörter usw.), diese Informationen in einer separaten Datei namens „_AppStart“ zu speichern.

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}


Andere Erweiterungen