Webentwicklung 101 - Teil 4: Die Layout-Engine von WebMatrix

Bisher haben Sie in unserer Tutorialreihe gelernt, wie Sie mit WebMatrix eine sehr einfache Webseite erstellen können und wie sich diese Webseite in verschiedenen Browsern verhält.

Mit diesem Kapitel begeben wir uns auf das nächste Level und widmen uns erstmals dem Thema Server-Programmierung. Sie werden sich bisher vielleicht auf dem Gebiet der Client-Programmierung auskennen, zum Beispiel die Erstellung von Anwendungen für mobile Geräte, Desktop-Rechner oder auch von JavaScript-Anwendungen, die im Browser laufen. Der größte Unterschied zur Server-Programmierung liegt darin, dass der meiste Code einer Anwendung nicht auf dem Gerät des Endnutzers läuft. Vereinfacht gesagt sendet der User eine Anfrage an den Server, der Server startet Code und schickt diesen in Form von HTML zurück an den Browser, welcher dem User dann als Ergebnis angezeigt wird.

Mit der Zeit werden Sie wahrscheinlich feststellen, dass es durchaus sinnvoll sein kann, sowohl Code direkt im Browser (meist JavaScript oder eine RIA-Technologie wie Silverlight) laufen zu lassen als auch serverseitigen Code auszuführen.

Mit WebMatrix wird die so genannte Razor-Syntax zur Programmierung von Webseiten mitgeliefert. Eine der Features davon ist eine Layout-Engine. Diese Folge zeigt, wie man die Layout-Features nutzen kann, um diverse HTML-Abschnitte, wie zum Beispiel den <head>-Bereich oder Footer-Content an einer Stelle zu haben und diesen automatisch für Ihre Seiten generieren zu lassen. Wenn Sie zum Beispiel eine Seite wie die Filmliste haben, wird diese Seite nur den Hauptinhalt, also die Liste an Filmen beinhalten, der Rest wird automatisch eingespielt.

Erstellung einer CSHTML-Seite, die Razor nutzt

Bisher haben Sie nur statische HTML-Seiten mit der Endung .htm oder .html erstellt. Immer wenn eine solche Seite von einem Browser aufgerufen wird, schickt der Server den Content einfach an den Browser. Vielleicht haben Sie schon von dynamischen Webseiten gehört? Das sind Seiten die der Server sowohl aus HTML wie auch aus Code, der auf dem Server läuft, zusammenstellt. Durch dynamische Seiten haben Sie deutlich mehr Möglichkeiten bei der Programmierung und Gestaltung Ihrer Webseiten. Zum Beispiel könnten Sie Ihre Lieblingsfilme in einer Datenbank speichern und den Server daraus aus diesen Daten eine Seite bauen/anzeigen lassen. Sie könnten dann jederzeit über das Browserfenster neue Filme hinzufügen und bestehende umbenennen oder löschen.

Lassen Sie uns nun Ihre erste dynamische Seite bauen: In WebMatrix haben dynamische Webseiten die Endung .cshtml oder vbhtml. Im Grunde sind das HTML-Seiten, die allerdings auch Code enthalten, der in C# (CS) oder Visual Basic (VB) geschrieben ist. Folgend werden wir nun eine CSHTML-Seite unter der Verwendung von C# erstellen. Die Syntax, die uns dies erlaubt nennt sich „Razor“.

webmatrix_101_p4_01

WebMatrix erstellt daraufhin eine Seite, die wie eine gewöhnliche Webseite aussieht. Ersetzen Sie dann bitte den vorgegebenen Inhalt durch diesen hier:

  <div id="filmliste">
    <ol>
     <li><a href="#">Waynes World</a></li>
     <li><a href="#">Sonnenallee</a></li>
     <li><a href="#">Last Boy Scout</a></li>
     <li><a href="#">Tron</a></li>
     <li><a href="#">Sissi die junge Kaiserin</a></li>
   </ol>
 </div>      
 

Obwohl Sie weder eine <HTML>-, ein <HEAD>- noch ein <BODY>-Tag verwenden wird Ihnen die Seite trotzdem korrekt angezeigt:

webmatrix_101_p4_02

Header und Footer

Die Seite, die wir im Augenblick haben, ist denen der ersten Tutorials sehr ähnlich. Als Header der neuen Seite definieren wir nun alles, was in der ursprünglichen HTML-Seite oberhalb des <div>-Tags stand. Als Footer der Seite dementsprechend alles, was unterhalb des <div>-Tags stand (nicht zu verwechseln mit dem <header>- und <footer>-Tag, das zuvor benutzt wurde).

Erstellen Sie eine neue Seite mit dem Namen PageHeader.cshtml und kopieren Sie aus der default.html alles hinein, das oberhalb des <div>-Tags stand:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Lieblingsfilme von mir</title>
   <link rel="stylesheet" type="text/css" href="filme.css" />
 </head>
 <body>
    
    <header><h1>Meine Lieblingsfilme</h1></header>
 

Alles, was unterhalb des <div>-Tags zu finden ist, kopieren Sie in eine neue Seite namens PageFooter.cshtml:

<footer>
     <p>Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
     <a href="http://web.ms/webmatrix">Jetzt herunterladen!</a></p>
   </footer>
 </body>
 </html>
 

Razor nutzen, um dynamisch Footer und Header hinzuzufügen

Nun da alles vorbereitet ist, können Sie Ihre ersten Zeilen Servercode schreiben, der die Razor-Syntax nutzt. WebMatrix kann zwischen HTML und „Razor“ durch die Nutzung des @-Zeichens unterscheiden. Platzieren Sie dieses Zeichen vor allen Anweisungen, die Sie dem Server geben.

Zum Beispiel würde @RenderPage("pagename") dazu führen, dass der Server das HTML von 'pagename' laden und an dieser Stelle einfügen würde. Für unser Beispiel (filme.cshtml) würde dies folgend aussehen:

@RenderPage("PageHeader.cshtml") 
<div id="filmliste">
    <ol>
     <li><a href="#">Waynes World</a></li>
     <li><a href="#">Sonnenallee</a></li>
     <li><a href="#">Last Boy Scout</a></li>
     <li><a href="#">Tron</a></li>
     <li><a href="#">Sissi die junge Kaiserin</a></li>
   </ol>
 </div>
 @RenderPage("PageFooter.cshtml") 

webmatrix_101_p4_03

Die Seite ist nun identisch mit der ursprünglichen HTML-Seite. Das sollte keine Überraschung sein, allerdings kann nun viel einfacher an der Seite gearbeitet werden, da Header und Footer der Seite ausgelagert wurden. Jeder neuen Seite, die Sie nun erstellen, können Sie nun denselben Header und Footer zuordnen.

Eine Layout-Seite erstellen


Andersherum kann man diese Möglichkeiten noch effektiver nutzen, so könnten Sie ein Layout entwerfen und dieses als Template für jede Seite nutzen. Und so funktioniert das Ganze: Als erstes erstellen Sie eine neue Seite mit dem Namen _siteLayout.cshtml und kopieren Sie den kompletten Quellcode Ihrer statischen Seite dort hinein:

<!DOCTYPE html> 
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Lieblingsfilme von mir</title>
   <link rel="stylesheet" type="text/css" href="filme.css" />
 </head>
 <body>
    
    <header><h1>Meine Lieblingsfilme</h1></header>
   <div id="filmliste">
    <ol>
     <li><a href="#">Waynes World</a></li>
     <li><a href="#">Sonnenallee</a></li>
     <li><a href="#">Last Boy Scout</a></li>
     <li><a href="#">Tron</a></li>
     <li><a href="#">Sissi die junge Kaiserin</a></li>
   </ol>
 </div>
   <footer>
     <p>Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
     <a href="http://web.ms/webmatrix">Jetzt herunterladen!</a></p>
   </footer>
 </body>
 </html>
 

Und nun entfernen Sie den kompletten <div>-Bereich und ersetzen diesen Teil durch den einfachen Befehl @RenderBody().

Dieser RenderBody-Befehl teilt WebMatrix mit, dass an dieser Stelle Inhalte eingefügt werden sollen. Ihre Seite sollte nun folgend aussehen:

<!DOCTYPE html> 
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Lieblingsfilme von mir</title>
   <link rel="stylesheet" type="text/css" href="filme.css" />
 </head>
 <body>
     <header><h1>Meine Lieblingsfilme</h1></header>
 @RenderBody() 
  <footer>
     <p>Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
     <a href="http://web.ms/webmatrix">Jetzt herunterladen!</a></p>
   </footer>
 </body>
 </html>
 

Wenn Sie nun zum Beispiel die Seite filme.cshtml anzeigen wollen, dann ist der Content der Seite alles innerhalb des <div>-Tags. WebMatrix wird das Layout (CSS, Header, Footer) der Seite aus _pageLayout.cshtml generieren und den Inhalt aus filme.cshtml. Bevor das getestet werden kann, müssen Sie allerdings @RenderPage("PageHeader.cshtml") und @RenderPage("PageFooter.cshtml") aus der Datei filme.cshtml entfernen.

WebMatrix mitteilen, wie die Layout-Seite angewendet werden soll

Nun werden Sie sich vielleicht fragen, wie WebMatrix weiß, dass _siteLayout.cshtml die Layout-Seite für movies.cshtml ist? Bisher weiß WebMatrix das nicht, Sie müssen es ihm mitteilen, aber das ist glücklicherweise sehr einfach:

Wenn Sie eine Seite mit dem Namen _PageStart.cshtml erstellen, wird die Seite immer dann aufgerufen, wenn WebMatrix eine CSHTML- oder VBHTML-Seite startet. Diese Seite eignet sich gut für globale Variablen und Funktionen. In unserem Fall teilen wir der Seite lediglich mit, dass das Layout für den kompletten Auftritt über _siteLayout.cshtml bestimmt wird. Legen Sie nun _PageStart.cshtml mit folgendem Quellcode an und starten Sie anschließend filme.cshtml:

     @{
       Layout = "~/_siteLayout.cshtml";
     }
 
webmatrix_101_p4_04

Wenn Sie versuchen _siteLayout.cshtml oder _PageStart.cshtml zu starten erhalten Sie eine Fehlermeldung. Wenn Sie beim Starten von filme.cshtml einen Runtime-Fehler erhalten, gehen Sie sicher, dass die Datei innerhalb Ihrer WebMatrix-Directory liegt

Was passiert da eigentlich?

Schauen wir uns einmal kurz an, was WebMatrix alles tut, um die Seite zu starten:

  1. Der Browser fragt beim Server nach filme.cshtml
  2. Der Server bemerkt, dass eine Datei _PageStart.cshtml existiert und startet diese. Die Datei enthält nur einen Befehl, der die Layout-Variable festlegt, in unserem Fall _siteLayout.cshtml
  3. Der Server startet _siteLayout.cshtml und erstellt somit das Layout der Seite
  4. Der Server kommt zum Code @RenderBody() – an diesem Punkt füllt er den Inhalt aus filme.cshtml ein
  5. Der Server baut noch den Rest der Seite (alles unter der Liste mit den Filmen) aus _siteLayout.cshtml
  6. Die komplette Seite wird an den Browser zurückgeliefert

Eine weitere Seite hinzufügen

Den Vorteil dieser Vorgehensweise sieht man, wenn man eine weitere Inhaltsseite erstellt. Erstellen wir kurz eine „Über mich“-Seite mit dem Dateinamen about.cshtml:

<h1>&Uuml;ber mich</h1>
 <h2>Ich bin der Autor dieser Seite und schreibe wahnsinnig interessante Dinge hier hinein.</h2> 
 

Wenn Sie nun about.cshtml starten, wird derselbe Prozess, wie zuvor beschrieben, gestartet und die “Über mich”-Seite im selben Layout wie die Filmliste angezeigt:

webmatrix_101_p4_05

Header und Footer der Seite sind gleich geblieben. Wenn Sie nun die „Über mich“-Seite ändern wollen, müssen Sie sich gar nicht um den Header und Footer-Bereich kümmern, sondern können schön übersichtlich direkt am Inhalt arbeiten. Und das ist nur ein kleiner Teil der Möglichkeiten, die die Layout-Engine von WebMatrix bietet.

Zusammenfassung

Dieser Artikel hat demonstriert, wie die mitgelieferte Layout Engine von WebMatrix Sie bei der Erstellung Ihrer Webseiten unterstützen kann. Somit haben Sie Ihre erste dynamische Seite erstellt. Im nächsten Teil werden wir etwas tiefer in die Razor-Syntax einsteigen und die Filmliste in eine Datenbank auslagern.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!