Tutoriel avancé WebMatrix (4) : Comment utiliser la mise en page

Microsoft a publié un didacticiel avancé sur l'outil de développement Web WebMatrix pour aider les développeurs à comprendre cela, connu comme l'outil de développement Web le plus puissant de l'histoire de Microsoft. Dans ce numéro, nous continuerons à vous présenter les tutoriels suivants.

Introduction : Microsoft WebMatrix est un outil gratuit qui peut être utilisé pour créer, personnaliser et publier des sites Web sur Internet.
WebMatrix vous permet de créer facilement des sites Web. Vous pouvez commencer avec une application open source (telle que WordPress, Joomla, DotNetNuke ou Orchard) et WebMatrix se chargera de télécharger, d'installer et de configurer l'application pour vous. Ou vous pouvez écrire le code vous-même à l'aide des nombreux modèles intégrés qui vous aideront à démarrer rapidement. Quel que soit votre choix, WebMatrix fournit tout ce dont votre site Web a besoin pour fonctionner, y compris des serveurs Web, des bases de données et des frameworks. En utilisant la même pile sur votre bureau de développement que celle que vous utiliseriez sur votre hébergeur Web, le processus de mise en ligne de votre site Web est simple et fluide.
Vous pouvez le télécharger depuis http://web.ms/webmatrix.
Vous pouvez désormais apprendre à utiliser WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, bases de données, etc. et à écrire des applications Web simples en quelques heures seulement. Le contenu est le suivant :

Jusqu'à présent, vous avez appris comment utiliser WebMatrix pour créer une page Web très simple, comment cette page Web s'exécute dans de nombreux navigateurs différents et comment utiliser les styles CSS pour créer une page Web de base. page Web plus belle.

Dans ce chapitre, vous irez plus loin et commencerez à utiliser la programmation serveur. Vous êtes peut-être habitué à la programmation côté client, comme la création d'applications qui s'exécutent sur le téléphone, le bureau ou même des applications JavaScript qui s'exécutent dans le navigateur. Une différence importante avec la programmation serveur est qu’une grande partie du code d’application ne s’exécute pas sur la machine cliente. Au lieu de cela, une action de l'utilisateur final lance une demande de page Web au serveur, et si la page Web est une page Web « active », le serveur exécute du code et utilise ce code pour générer des balises HTML et des valeurs qui sont envoyées. au navigateur. Le navigateur restitue ensuite ce code HTML et l'utilisateur voit les résultats affichés.

Au fur et à mesure que vos compétences se développent, vous constaterez qu'il est parfois utile de mélanger et faire correspondre le code, certains s'exécutant dans le navigateur (souvent en utilisant les technologies JavaScript ou Rich Internet Application (RIA) telles que Silverlight) et le code restant s'exécute sur le serveur.

WebMatrix introduit la syntaxe Razor pour la programmation de pages Web. Elle fournit une fonction très puissante mais très simple, qui est le moteur de mise en page. Dans cet article, nous examinerons l'utilisation des fonctionnalités de mise en page pour regrouper tout le contenu HTML courant (comme le contenu et pied de page) en un seul endroit et générer automatiquement ce contenu pour vos pages Web, de sorte que lors de la création d'une page (comme un film list), le fichier de la page n'aura que le contenu principal de la page, et vous pourrez ajouter et avoir un contrôle total sur le contenu restant.
Création de pages Web CSHTML à l'aide de Razor

Jusqu'à présent, vous avez créé des pages Web HTML à l'aide de l'extension .HTM ou .HTML. Ce sont des pages Web statiques, donc lorsque le navigateur appelle leur adresse, le serveur les envoie ainsi que leur contenu au navigateur. Le serveur ne traitera en aucun cas cette page.
Vous avez peut-être entendu parler des pages Web « dynamiques », qui sont des pages Web construites par un serveur basé sur HTML et du code qui s'exécute sur le serveur pour déterminer comment la page Web doit être construite, et le contenu de la construction sera HTML. Les pages Web dynamiques permettent des cas d'utilisation vraiment puissants, et le reste de cette série les utilisera. Entre autres choses, ils vous permettront de stocker des films dans une base de données et de laisser le serveur utiliser les données de la base de données pour générer le contenu de votre page Web, sans que vous ayez à écrire le titre du film directement sur la page HTML ou à modifier la page. lorsque vous souhaitez modifier la liste.
Dans cette section, vous créerez votre première page Web dynamique.

Dans WebMatrix, les pages Web dynamiques ont l'extension .CSHTML ou .VBHTML. Il s'agit en fait de fichiers HTML contenant du code en ligne écrit en C# (CS) ou Visual Basic (VB), comme vous pouvez le constater grâce à l'extension. J'utiliserai des fichiers CSHTML, qui me permettront d'écrire du code en ligne sur la page Web en utilisant le langage C#. La méthode pour ce faire, et la syntaxe qui prend en charge cela dans HTML, porte le surnom de "Razor".
Nous créons une page web dynamique.

À l'aide de WebMatrix, dans l'espace de travail Fichiers, créez une nouvelle page Web CSHTML appelée movies.cshtml :

WebMatrix créera une page Web qu'il consultera Cela ressemble à une page Web HTML de base. Remplacez le contenu de cette page par ce qui suit :

<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>

Ce code vous semble-t-il bizarre ? Il n'y a pas de balise dans le code, pas de balise

ou , mais cela fonctionne toujours ! Ou du moins fondamentalement efficace. Exécutez-le et vous verrez l'interface suivante :

页眉和页脚
 
上面的网页非常类似于我们之前创建的网页，但是让我们将网页页眉定义为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）！