Derniers tutoriels de développement web
 

ASP.NET Pages Web - Mise en page


Avec des 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:

  • Chaque page ont la même tête
  • Chaque page ont le même pied
  • Chaque page ont le même style et la mise en page

Avec des pages Web cela peut se faire de façon très efficace. Vous pouvez avoir des blocs de contenu réutilisables (content blocks) , comme les en- têtes et pieds de page, dans des fichiers séparés.

Vous pouvez également définir une mise en page cohérente pour toutes vos pages, en utilisant un modèle de mise en page (layout file) en (layout file) .


Blocs de contenu

De nombreux sites ont un contenu qui est affiché sur chaque page (like headers and footers) les en- (like headers and footers) de (like headers and footers) .

Avec des pages Web que vous pouvez utiliser le @ RenderPage() méthode pour importer le contenu des fichiers séparés.

Bloc de contenu (from another file) peut être importé ne importe où dans une page Web, et peut contenir du texte, le balisage et le code, comme toute la page Web.

En utilisant les en-têtes et pieds de page communs comme un exemple, cela vous permet d'économiser beaucoup de travail. Vous ne devez pas écrire le même contenu dans 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 comment il 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>
»Exécuter exemple

Utilisation d'une page de mise en page

Dans la section précédente, vous avez vu que le même contenu, y compris dans de nombreuses pages web est facile.

Une autre approche pour créer une apparence cohérente est d'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 (content page) de (template) (content page) est lié à une page de mise en page, il sera affiché en fonction de la page de mise en page (template) .

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

Chaque page de contenu doit commencer par une directive de mise en page.

Voici comment il ressemble dans le code:

Mise en page:

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

Toutes les pages Web:

@{Layout="Layout.cshtml";}

<h1>Welcome to w3ii</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>
»Exécuter exemple

DRY - Ne pas répéter vous-même

Avec deux outils ASP.NET, les blocs de contenu et la mise en page Pages, vous pouvez donner à vos applications Web un aspect cohérent.

Ces outils vous sauver aussi beaucoup de travail, puisque vous n'avez pas répéter les mêmes informations sur toutes les pages. balisage centralisant, le style et le code rend les applications web beaucoup plus facile à gérer et plus facile à entretenir.


La prévention des fichiers de l'Visionné

Avec ASP.NET, les fichiers avec un nom qui commence par un trait de soulignement ne peuvent pas être consultés à partir du Web.

Si vous voulez éviter que vos blocs de contenu ou des fichiers de mise en page d'être vu par vos utilisateurs, renommer les fichiers:

_header.cshtml

_footer.cshtml

_Layout.cshtml


Informations sensibles Hiding

Avec ASP.NET, la façon commune de cacher des informations sensibles (mots de passe de base de données, les mots de passe de messagerie, etc.) est de garder 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]";
}