WebMatrix-Tutorial für Fortgeschrittene (4): So verwenden Sie das Layout

Microsoft hat ein erweitertes Tutorial zum Webentwicklungstool WebMatrix veröffentlicht, um Entwicklern das Verständnis zu erleichtern. WebMatrix gilt als das leistungsstärkste Webentwicklungstool in der Geschichte von Microsoft. Als Nächstes werden Sie in dieser Ausgabe weiterhin mit den folgenden Tutorials bekannt gemacht.

Einführung: Microsoft WebMatrix ist ein kostenloses Tool, mit dem Websites im Internet erstellt, angepasst und veröffentlicht werden können.
Mit WebMatrix können Sie ganz einfach Websites erstellen. Sie können mit einer Open-Source-Anwendung (wie WordPress, Joomla, DotNetNuke oder Orchard) beginnen und WebMatrix übernimmt für Sie den Download, die Installation und die Konfiguration der Anwendung. Oder Sie können den Code selbst schreiben und dabei die vielen integrierten Vorlagen verwenden, die Ihnen den schnellen Einstieg erleichtern. Was auch immer Sie wählen, WebMatrix bietet alles, was Ihre Website zum Betrieb benötigt, einschließlich Webserver, Datenbanken und Frameworks. Durch die Verwendung desselben Stacks auf Ihrem Entwicklungsdesktop, den Sie auch auf Ihrem Webhost verwenden würden, ist die Online-Schaltung Ihrer Website einfach und reibungslos.
Sie können es von http://web.ms/webmatrix herunterladen.
Jetzt können Sie in nur wenigen Stunden lernen, WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, Datenbanken usw. zu verwenden und einfache Webanwendungen zu schreiben. Der Inhalt ist wie folgt:

Bisher haben Sie gelernt, wie Sie mit WebMatrix eine sehr einfache Webseite erstellen, wie diese Webseite in vielen verschiedenen Browsern läuft und wie Sie CSS-Stile verwenden, um eine einfache Webseite zu erstellen Webseite schöner.

In diesem Kapitel gehen Sie einen Schritt weiter und beginnen mit der Serverprogrammierung. Möglicherweise sind Sie mit clientseitiger Programmierung vertraut, z. B. mit dem Erstellen von Anwendungen, die auf dem Telefon oder dem Desktop ausgeführt werden, oder sogar mit JavaScript-Anwendungen, die im Browser ausgeführt werden. Ein wichtiger Unterschied zur Serverprogrammierung besteht darin, dass ein Großteil des Anwendungscodes nicht auf dem Clientgerät ausgeführt wird. Stattdessen initiiert eine Endbenutzeraktion eine Anfrage für eine Webseite an den Server. Wenn es sich bei der Webseite um eine „aktive“ Webseite handelt, führt der Server Code aus und verwendet diesen Code, um HTML-Tags und -Werte zu generieren, die gesendet werden zum Browser. Der Browser rendert dann diesen HTML-Code und der Benutzer sieht die angezeigten Ergebnisse.

Wenn sich Ihre Fähigkeiten weiterentwickeln, werden Sie feststellen, dass es manchmal nützlich ist, Code zu kombinieren, von dem einige im Browser ausgeführt werden (häufig unter Verwendung von JavaScript oder Rich Internet Application (RIA)-Technologien wie Silverlight) und der verbleibende Code läuft auf dem Server.

WebMatrix führt die Razor-Syntax für die Webseitenprogrammierung ein. Sie bietet eine sehr leistungsstarke, aber sehr einfache Funktion, nämlich die Layout-Engine. In diesem Artikel befassen wir uns mit der Verwendung von Layoutfunktionen, um den gesamten gängigen HTML-Code (wie - und Fußzeileninhalt) an einem Ort zu platzieren und diesen Inhalt automatisch für Ihre Webseiten zu generieren, sodass beim Erstellen einer Seite (z. B. eines Films) Liste), die Datei der Seite enthält nur den Hauptinhalt der Seite, und Sie können den restlichen Inhalt hinzufügen und haben die volle Kontrolle darüber.
CSHTML-Webseiten mit Razor erstellen

Bisher haben Sie HTML-Webseiten mit der Erweiterung .HTM oder .HTML erstellt. Dabei handelt es sich um statische Webseiten. Wenn der Browser ihre Adresse aufruft, sendet der Server sie und ihren Inhalt an den Browser. Der Server wird diese Seite in keiner Weise verarbeiten.
Vielleicht haben Sie schon einmal von „dynamischen“ Webseiten gehört. Hierbei handelt es sich um Webseiten, die von einem Server basierend auf HTML und Code erstellt werden, der auf dem Server ausgeführt wird, um zu bestimmen, wie die Webseite aufgebaut werden soll und welchen Inhalt die Erstellung haben soll HTML. Dynamische Webseiten ermöglichen wirklich leistungsstarke Anwendungsfälle, und der Rest dieser Serie wird sie nutzen. Sie ermöglichen Ihnen unter anderem, Filme in einer Datenbank zu speichern und den Server die Daten in der Datenbank verwenden zu lassen, um den Inhalt für Ihre Webseite zu generieren, ohne dass Sie den Filmtitel direkt auf die HTML-Seite schreiben oder die Seite ändern müssen wenn Sie den Eintrag ändern möchten.
In diesem Abschnitt erstellen Sie Ihre erste dynamische Webseite.

In WebMatrix haben dynamische Webseiten die Erweiterung .CSHTML oder .VBHTML. Es handelt sich tatsächlich um HTML-Dateien, die Inline-Code enthalten, der in C# (CS) oder Visual Basic (VB) geschrieben ist, wie Sie an der Erweiterung erkennen können. Ich verwende CSHTML-Dateien, die es mir ermöglichen, in der Sprache C# Inline-Code auf der Webseite zu schreiben. Die Methode hierfür und die Syntax, die dies in HTML unterstützt, haben den Spitznamen „Razor“.
Wir erstellen eine dynamische Webseite.

Erstellen Sie mit WebMatrix im Arbeitsbereich „Dateien“ eine neue CSHTML-Webseite mit dem Namen „movies.cshtml“:

WebMatrix erstellt eine Webseite, die angezeigt wird Sieht aus wie eine einfache HTML-Webseite. Ersetzen Sie den Inhalt dieser Seite durch Folgendes:

<div id="movieslist">  
  <ol>  
   <li><a href="#">Its a wonderful life</a></li>  
   <li><a href="#">Lord of the Rings</a></li>  
   <li><a href="#">The Fourth World</a></li>  
   <li><a href="#">The Lion King</a></li>  
  </ol>  
 </div>

Sieht dieser Code seltsam aus? Es gibt kein -Tag im Code, keine

-Tags, aber es funktioniert trotzdem! Oder zumindest grundsätzlich wirksam. Führen Sie es aus und Sie sehen die folgende Oberfläche:

页眉和页脚
 
上面的网页非常类似于我们之前创建的网页，但是让我们将网页页眉定义为HTML中包含电影列表的

之前的所有内容，将页脚定义为 HTML中包含电影列表的

之后的所有内容。不要将此与您到目前为止一直使用的 default.html 网页的

和

标记混淆了。
创建一个名为“PageHeader.cshtml”的新网页，将 default.html 中 moviesList

上方的所有内容复制到它之中。它应该类似于：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>

类似地，创建一个名为“PageFooter.cshtml”的新网页，将 default.html中moviesList

下方的所有内容复制到它之中。它应该类似于：

 <footer>  
  This site was built using Microsoft WebMatrix.   
    <a href="Download>http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

使用Razor动态添加页眉和页脚
 
现在您创建了这两个网页，接下来使用“Razor”编写第一部分服务器代码。WebMatrix 通过使用“@”字符，突出了HTML和“Razor”代码之间的区别。将此字符放在指示服务器如何操作的任何代码行之前。
例如，以下命令：
@RenderPage("pagename")将导致服务器从“pagename”加载HTML并将它放在当前文件中的此位置。所以对于我们的示例，如果将movies.cshtml更改为：

@RenderPage("PageHeader.cshtml")  
  <div id="movieslist">  
  <ol>  
    <li><a href="#">Its a wonderful life</a></li>  
    <li><a href="#">Lord of the Rings</a></li>  
    <li><a href="#">The Fourth World</a></li>  
    <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
@RenderPage("PageFooter.cshtml")

当运行网页时，它将类似于以下界面：

它与静态 HTML 文件的外观完全一样。您不应该感到奇怪，因为它现在具有相同的页眉和页脚（包括要求网页加载 CSS 的代码）以及相同的正文文本。但是可以看到，现在对页面的处理轻松多了，因为所有页眉和页脚代码都不需要处理，您创建的任何新网页都将具有相同的页眉、页脚和样式表。
 
创建布局网页
 
使用此方法，您创建了网页，然后在页面运行时使用Razor代码将页眉和页脚代码包含在网页上。这是一种自底向上的方法。
另一种可能更有效的方法是创建一个布局，将该布局用作每个网页的模板，然后将您想要的特定内容包含在该模板中。这更像是一种自顶向下的方法。
我们看一下它的工作原理：创建一个新CSHTML网页，您将它命名为 _siteLayout.cshtml。
将创建的网页的内容替换为以下内容。您可能发现这些代码很熟悉，因为它们是您之前创建的静态 default.html 网页中的所有内容

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  
  
    
  
      
It's a wonderful life
  
      
Lord of the Rings
  
      
The Fourth World
  
      
The Lion King
  
    
  
  
  
  
This site was built using Microsoft WebMatrix.   
Download it now.  
  

现在将名为“movieslist”的 

 替换为以下代码：

@RenderBody()

请记住，前面我们说过“@”符号告诉WebMatrix此时在服务器上运行代码。RenderBody 命令只是告诉 WebMatrix 在此位置呈现网页的内容。

下面是 _sitelayout.cshtml 网页现在应该包含的内容：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
    <title>My Favorite Movies</title>  
    <link rel="stylesheet" type="text/css" href="movies.css" />  
  </head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  @RenderBody()  
  <footer>  
    This site was built using Microsoft WebMatrix.   
    <a href="http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

所以，对于您刚才创建的网页movies.cshtml，该网页的内容为 

 和 

1.  列表。因此我们的理念是，当您浏览到 CSHTML 网页时，WebMatrix 将使用布局网页确定如何绘制网页，因此它获取标题、CSS 和来自布局网页的所有内容。

   在尝试此代码之前，不要忘记从movies.cshtml 删除@RenderPage 命令。

   然后新建 _PageStart.cshtml

   把其中的内容替换为:

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

   _PageStart.cshtml告诉启动的 cshtml 页与布局文件关联
   

   
   

   现在启动movies.cshtml,便可看到效果

   
   

   备注:movies.css

   
   

   [css] view plain copy

   body {  
   font-family: Tahoma, Verdana, Geneva, sans-serif;  
   width: 85%;  
   margin: 20px auto;  
   }  
      
   header {  
   padding: 10px;  
   border-bottom: 1px solid #e5e5e5;  
   }  
      
   header h1 {  
   font-size: xx-large;  
   font-weight: normal;  
   padding: 0px;  
   margin: 0px;  
   }  
      
   #movieslist{  
   margin: 20px 0;  
   }  
      
   #movieslist ul {  
   list-style: none;  
   margin: 0;  
   padding: 0;  
   }  
      
   #movieslist li a {  
   font-size: large;  
   color: #000000;  
   display: block;  
   padding: 5px;  
   }  
      
   #movieslist li a:hover {  
   border-left: 10px solid #94c9d4;  
   padding-left: 10px;  
   background-color: #e7f5f8;  
   text-decoration: none;  
   }  
   footer {  
   font-size: smaller;  
   color: #ccc;  
   text-align: center;  
   padding: 20px 10px 10px 10px;  
   border-top: 1px solid #e5e5e5;  
   }

    以上就是WebMatrix进阶教程(4)：如何使用布局的内容，更多相关内容请关注PHP中文网（www.php.cn）！