Pages Web ASP.NET - Mise en page


Avec les pages Web, il est facile de créer un site Web avec une mise en page cohérente.


Un regard cohérent

Sur Internet, vous découvrirez de nombreux sites Web avec une apparence et une convivialité cohérentes :

  • Chaque page a le même en-tête
  • Chaque page a le même pied de page
  • Chaque page a le même style et la même mise en page

Avec les pages Web, cela peut être fait très efficacement. Vous pouvez avoir des blocs de contenu réutilisables (blocs de contenu), tels que des en-têtes et des pieds de page, dans des fichiers séparés.

Vous pouvez également définir une mise en page cohérente pour toutes vos pages, à l'aide d'un modèle de mise en page (fichier de mise en page).


Blocs de contenu

De nombreux sites Web ont du contenu affiché sur chaque page (comme les en-têtes et les pieds de page).

Avec les pages Web, vous pouvez utiliser la méthode @RenderPage() pour importer du contenu à partir de fichiers séparés.

Le bloc de contenu (à partir d'un autre fichier) peut être importé n'importe où dans une page Web et peut contenir du texte, du balisage et du code, comme n'importe quelle page Web normale.

En utilisant les en-têtes et les pieds de page courants comme exemple, cela vous épargne beaucoup de travail. Vous n'êtes pas obligé d'écrire le même contenu sur chaque page, et lorsque vous modifiez les fichiers d'en-tête ou de pied de page, le contenu est mis à jour dans toutes vos pages.

Voici à quoi cela ressemble dans le code :

Exemple

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>


Utilisation d'une page de mise en page

Dans la section précédente, vous avez vu qu'il est facile d'inclure le même contenu dans plusieurs pages Web.

Une autre approche pour créer une apparence cohérente consiste à utiliser une page de mise en page. Une page de mise en page contient la structure, mais pas le contenu, d'une page Web. Lorsqu'une page Web (page de contenu) est liée à une page de mise en page, elle sera affichée en fonction de la page de mise en page (modèle).

La page de mise en page ressemble à une page Web normale, à l'exception d'un appel à la méthode @RenderBody() où la page de contenu sera incluse.

Chaque page de contenu doit commencer par une directive Layout .

Voici à quoi cela ressemble dans le code :

Mise en page :

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</body>
</html>

N'importe quelle page Web :

@{Layout="Layout.cshtml";}

<h1>Welcome to W3Schools</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>

SEC - Ne vous répétez pas

Avec deux outils ASP.NET, les blocs de contenu et les pages de disposition, vous pouvez donner à vos applications Web un aspect cohérent.

Ces outils vous épargnent également beaucoup de travail, puisque vous n'avez pas à répéter les mêmes informations sur toutes les pages. La centralisation du balisage, du style et du code rend les applications Web beaucoup plus faciles à gérer et à entretenir.


Empêcher les fichiers d'être parcourus

Avec ASP.NET, les fichiers dont le nom commence par un trait de soulignement ne peuvent pas être parcourus à partir du Web.

Si vous souhaitez empêcher vos utilisateurs de voir vos blocs de contenu ou vos fichiers de mise en page, renommez les fichiers :

_header.cshtml

_footer.cshtml

_Layout.cshtml


Masquer les informations sensibles

Avec ASP.NET, le moyen courant de masquer les informations sensibles (mots de passe de base de données, mots de passe de messagerie, etc.) consiste à conserver les informations dans un fichier séparé nommé "_AppStart".

_AppStart.cshtml

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