ASP.NET Web Pages - Mise en page

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

Apparence cohérente

Sur Internet, vous trouverez de nombreux sites web qui ont un aspect et un style cohérents :

  • 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 Web Pages, vous pouvez faire cela très efficacement. Vous pouvez placer des blocs de contenu réutilisables (tels que les en-têtes et pieds de page) dans un fichier séparé.

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

Blocs de contenu

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

Avec Web Pages, vous pouvez utiliser la méthode@RenderPage()pour importer du contenu depuis différents fichiers.

Les blocs de contenu (d'un autre fichier) peuvent être importés n'importe où dans une page web. Les blocs de contenu peuvent contenir du texte, du balisage et du code, comme n'importe quelle page web ordinaire.

Écrire les en-têtes et pieds de page communs sous forme de fichiers séparés vous fera gagner beaucoup de travail. Vous n'avez pas à écrire le même contenu sur chaque page, et lorsque le contenu change, vous n'avez qu'à modifier le fichier d'en-tête ou de pied de page pour voir le contenu mis à jour sur chaque page du site.

Ce qui suit montre à quoi cela ressemble :

Exemple

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

Exécuter l'exemple »

Page de mise en page

Dans la section précédente, vous avez vu qu'il est très facile d'afficher le même contenu sur plusieurs pages web.

Une autre façon de créer une apparence cohérente consiste à utiliser des pages de mise en page. Une page de mise en page contient la structure d'une page web, pas le contenu. Lorsqu'une page web (page de contenu) est liée à une page de mise en page, elle est affichée selon la structure de la page de mise en page (modèle).

Une page de mise en page utilise la méthode@RenderBody()pour intégrer des pages de contenu. À part cela, elle ne diffère pas d'une page web normale.

Chaque contenu doit commencer par unedirective.

Ce qui suit montre à quoi cela ressemble :

Page de disposition :

<html>
<body>
<p>Ceci est l'en-tête</p>
@RenderBody()
<p>&copy; 2012 Example. Tous droits réservés.</p>
</body>
</html>

Toute page web :

@{Layout="Layout.cshtml";}

<h1>Bienvenue sur example</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>

Exécuter l'exemple »

D.R.Y. - Ne vous répétez pas

Avec les deux outils ASP.NET Content et Layout Pages, vous pouvez donner à votre site web une apparence cohérente.

Ces deux outils peuvent vous faire gagner beaucoup de travail ; vous n'avez plus à répéter les mêmes informations sur chaque page. Le balisage, les styles et le code centralisés rendent votre application web plus facile à gérer et à maintenir.

Empêcher la navigation dans les fichiers

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

Si vous ne voulez pas que vos blocs de contenu ou vos pages de mise en page soient vus par vos utilisateurs, vous pouvez renommer ces fichiers

_header.cshtm

_footer.cshtml

_Layout.cshtml

Masquage des informations sensibles

Dans ASP.NET, la façon la plus courante de masquer les informations sensibles (mots de passe de base de données, mots de passe de messagerie, etc.) est de stocker ces informations dans un fichier distinct nommé "_AppStart".

_AppStart.cshtml

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


Autres extensions