ASP.NET Web Pages - Mise en page de page

Avec Web Pages, il est facile de créer des sites web avec une mise en page uniforme.

Aspect uniforme

Sur Internet, vous trouverez de nombreux sites web avec un aspect uniforme :

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

Avec Web Pages, vous pouvez réaliser cela de manière efficace. Vous pouvez obtenir des blocs de code réutilisables (blocs de contenu), comme les en-têtes et les pieds de page, dans des fichiers indépendants.

Vous pouvez également définir une mise en page cohérente pour toutes les pages en utilisant des modèles de mise en page (fichiers de mise en page).

Blocs de contenu

De nombreux sites web ont besoin de contenu à afficher sur chaque page (comme les en-têtes et les pieds de page).

Avec Web Pages, vous pouvez utiliser @RenderPage() Les méthodes importent du contenu à partir de fichiers différents.

Les blocs de contenu (venant d'un autre fichier) peuvent être insérés à n'importe quel endroit dans une page web et peuvent contenir du texte, des balises et du code, tout comme une page web conventionnelle.

Utiliser des en-têtes et des pieds de page génériques économise beaucoup de travail. Vous n'avez pas besoin d'écrire le même contenu sur chaque page, et lorsque vous changez les fichiers d'en-tête ou de pied de page, le contenu est mis à jour sur toutes les pages.

C'est ainsi qu'il apparaît dans le code :

Exemple

<html>
<body>
@RenderPage("header.cshtml")
<h1>Bonjour Pages Web</h1> 
<p>Ceci est un paragraphe</p>
@RenderPage("footer.cshtml")
</body>
</html>

Exécuter l'exemple

Utilisation des pages de mise en page

Dans le contenu précédent, vous avez vu que c'est très simple de référencer le même contenu dans plusieurs pages web.

Une autre méthode pour créer un aspect cohérent est d'utiliser des pages de mise en page. Les pages de mise en page contiennent la structure du site web, pas le contenu. Lorsque la page web (page de contenu) est liée à la page de mise en page, elle s'affiche selon la page de mise en page (modèle).

Les pages de mise en page sont similaires aux pages web normales, mais elles appelleront la page de contenu référencée à l'emplacement où elles sont appelées. @RenderBody() Méthode.

Chaque page de contenu doit commencer par : Instruction de mise en pageDébut.

C'est ainsi qu'il apparaît dans le code :

Mise en page web :

<html>
<body>
<p>Ceci est du texte.</p>
@RenderBody()
<p>© 2012 CodeW3C.com. Tous droits réservés.</p>
</body>
</html>

Page web quelconque :

@{Layout="Layout.cshtml";}
<h1>Bienvenue sur CodeW3C.com</h1>
<p>
Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte.
Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte.
Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte. Ceci est du texte.
</p>

Exécuter l'exemple

Ne pas se répéter

Grâce à deux outils ASP.NET, les blocs de contenu et les pages de mise en page, vous pouvez définir une apparence cohérente pour l'application web.

Ces outils vous épargneront beaucoup de travail, car vous n'avez pas besoin de répéter les mêmes informations sur toutes les pages. Concentrez les balises, les styles et le code pour rendre l'application web plus facile à gérer et à entretenir.

Prévenir les fuites de code

Dans ASP.NET, les fichiers dont le nom commence par un trait de soulignement ne peuvent pas être consultés via le web.

Si vous souhaitez interdire aux utilisateurs de visualiser des blocs de contenu ou des fichiers de mise en page, renommez les fichiers :

  • _header.cshtm
  • _footer.cshtml
  • _Layout.cshtml

Cacher des informations sensibles

Dans ASP.NET, une méthode courante pour cacher des informations sensibles (mot de passe de base de données, mot de passe de courriel, etc.) consiste à les stocker dans un fichier indépendant nommé "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}