Création d’une disposition cohérente dans pages Web ASP.NET sites (Razor)

Article
07/13/2023

Cet article explique comment utiliser des pages de mise en page dans un site web pages Web ASP.NET (Razor) pour créer des blocs de contenu réutilisables (comme des en-têtes et des pieds de page) et créer une apparence cohérente pour toutes les pages du site.

Ce que vous allez apprendre :

Comment créer des blocs de contenu réutilisables tels que des en-têtes et des pieds de page.

Comment créer une apparence cohérente pour toutes les pages de votre site à l’aide d’une mise en page.

Comment passer des données au moment de l’exécution à une page de mise en page.

Voici les fonctionnalités ASP.NET introduites dans l’article :

Les blocs de contenu, qui sont des fichiers qui contiennent du contenu au format HTML à insérer dans plusieurs pages.

Pages de mise en page, qui contiennent du contenu au format HTML qui peut être partagé par les pages du site web.

Les RenderPageméthodes , RenderBodyet RenderSection , qui indiquent ASP.NET où insérer des éléments de page.

Dictionnaire PageData qui vous permet de partager des données entre des blocs de contenu et des pages de mise en page.

Versions logicielles utilisées dans le tutoriel

pages Web ASP.NET (Razor) 3

Ce tutoriel fonctionne également avec pages Web ASP.NET 2.

À propos des pages de disposition

De nombreux sites web ont du contenu qui s’affiche sur chaque page, comme un en-tête et un pied de page, ou une zone qui indique aux utilisateurs qu’ils sont connectés. ASP.NET vous permet de créer un fichier distinct avec un bloc de contenu qui peut contenir du texte, du balisage et du code, comme une page web standard. Vous pouvez ensuite insérer le bloc de contenu dans d’autres pages du site où vous souhaitez que les informations s’affichent. De cette façon, vous n’avez pas besoin de copier et coller le même contenu dans chaque page. La création de contenu commun comme celui-ci facilite également la mise à jour de votre site. Si vous devez modifier le contenu, vous pouvez simplement mettre à jour un seul fichier. Les modifications sont ensuite répercutées partout où le contenu a été inséré.

Le diagramme suivant montre comment fonctionnent les blocs de contenu. Lorsqu’un navigateur demande une page à partir du serveur web, ASP.NET insère les blocs de contenu au point où la RenderPage méthode est appelée dans la page main. La page terminée (fusionnée) est ensuite envoyée au navigateur.

Diagramme conceptuel montrant comment la méthode RenderPage insère une page référencée dans la page active.

Dans cette procédure, vous allez créer une page qui fait référence à deux blocs de contenu (un en-tête et un pied de page) qui se trouvent dans des fichiers distincts. Vous pouvez utiliser ces mêmes blocs de contenu dans n’importe quelle page de votre site. Lorsque vous avez terminé, vous obtenez une page semblable à celle-ci :

Capture d’écran montrant une page dans le navigateur qui résulte de l’exécution d’une page qui inclut des appels à la méthode RenderPage.

Dans le dossier racine de votre site web, créez un fichier nommé Index.cshtml.

Remplacez le balisage existant par ce qui suit :

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  </body>
</html>

Dans le dossier racine, créez un dossier nommé Shared.

Notes

Il est courant de stocker les fichiers partagés entre les pages web dans un dossier nommé Partagé.
Dans le dossier Partagé , créez un fichier nommé _Header.cshtml.
Remplacez tout contenu existant par ce qui suit :
```
<div class="header">This is header text.</div>
```
Notez que le nom de fichier est _Header.cshtml, avec un trait de soulignement (_) comme préfixe. ASP.NET n’enverra pas de page au navigateur si son nom commence par un trait de soulignement. Cela empêche les utilisateurs de demander (par inadvertance ou autrement) ces pages directement. Il est judicieux d’utiliser un trait de soulignement pour nommer les pages qui contiennent des blocs de contenu, car vous ne voulez pas vraiment que les utilisateurs puissent demander ces pages : elles existent strictement pour être insérées dans d’autres pages.
Dans le dossier Partagé , créez un fichier nommé _Footer.cshtml et remplacez le contenu par ce qui suit :
```
<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>
```
Dans la page Index.cshtml , ajoutez deux appels à la RenderPage méthode, comme illustré ici :
```
<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>
```
Cela montre comment insérer un bloc de contenu dans une page web. Vous appelez la RenderPage méthode et lui transmettez le nom du fichier dont vous souhaitez insérer le contenu à ce stade. Ici, vous insérez le contenu des fichiers _Header.cshtml et _Footer.cshtml dans le fichier Index.cshtml .
Exécutez la page Index.cshtml dans un navigateur. (Dans WebMatrix, dans l’espace de travail Fichiers , cliquez avec le bouton droit sur le fichier, puis sélectionnez Lancer dans le navigateur.)
Dans le navigateur, affichez la source de la page. (Par exemple, dans Internet Explorer, cliquez avec le bouton droit sur la page, puis cliquez sur Afficher la source.)

Cela vous permet de voir le balisage de page web envoyé au navigateur, qui combine le balisage de page d’index avec les blocs de contenu. L’exemple suivant montre la source de page qui est rendue pour Index.cshtml. Les appels que RenderPage vous avez insérés dans Index.cshtml ont été remplacés par le contenu réel des fichiers d’en-tête et de pied de page.
```
<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>
```

Création d’une apparence cohérente à l’aide de pages de disposition

Jusqu’à présent, vous avez vu qu’il est facile d’inclure le même contenu sur plusieurs pages. Une approche plus structurée pour créer une apparence cohérente pour un site consiste à utiliser des pages de mise en page. Une page de mise en page définit la structure d’une page web, mais ne contient pas de contenu réel. Une fois que vous avez créé une page de mise en page, vous pouvez créer des pages web qui contiennent le contenu, puis les lier à la page de mise en page. Lorsque ces pages sont affichées, elles sont mises en forme en fonction de la page de mise en page. (En ce sens, une page de mise en page agit comme un modèle pour le contenu défini dans d’autres pages.)

La page de mise en page est comme n’importe quelle page HTML, sauf qu’elle contient un appel à la RenderBody méthode . La position de la RenderBody méthode dans la page de mise en page détermine où les informations de la page de contenu seront incluses.

Le diagramme suivant montre comment les pages de contenu et les pages de mise en page sont combinées au moment de l’exécution pour produire la page web terminée. Le navigateur demande une page de contenu. La page de contenu contient un code qui spécifie la page de mise en page à utiliser pour la structure de la page. Dans la page de mise en page, le contenu est inséré au point où la RenderBody méthode est appelée. Les blocs de contenu peuvent également être insérés dans la page de mise en page en appelant la RenderPage méthode , comme vous l’avez fait dans la section précédente. Une fois la page web terminée, elle est envoyée au navigateur.

Capture d’écran montrant une page dans le navigateur qui résulte de l’exécution d’une page qui inclut des appels à la méthode RenderBody.

La procédure suivante montre comment créer une page de mise en page et y lier des pages de contenu.

Dans le dossier Partagé de votre site web, créez un fichier nommé _Layout1.cshtml.

Remplacez tout contenu existant par ce qui suit :

<!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

Vous utilisez la RenderPage méthode dans une page de mise en page pour insérer des blocs de contenu. Une page de mise en page ne peut contenir qu’un seul appel à la RenderBody méthode .

Dans le dossier Partagé , créez un fichier nommé _Header2.cshtml et remplacez tout contenu existant par ce qui suit :
```
<div id="header">Creating a Consistent Look</div>
```
Dans le dossier racine, créez un dossier et nommez-le Styles.

Dans le dossier Styles , créez un fichier nommé Site.css et ajoutez les définitions de style suivantes :

h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}

#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

Ces définitions de style sont ici uniquement pour montrer comment les feuilles de style peuvent être utilisées avec les pages de mise en page. Si vous le souhaitez, vous pouvez définir vos propres styles pour ces éléments.

Dans le dossier racine, créez un fichier nommé Content1.cshtml et remplacez tout contenu existant par ce qui suit :

@{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </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 laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

Il s’agit d’une page qui utilisera une page de mise en page. Le bloc de code en haut de la page indique la page de mise en page à utiliser pour mettre en forme ce contenu.

Exécutez Content1.cshtml dans un navigateur. La page rendue utilise le format et la feuille de style définis dans _Layout1.cshtml et le texte (contenu) défini dans Content1.cshtml.

Vous pouvez répéter l’étape 6 pour créer des pages de contenu supplémentaires qui peuvent ensuite partager la même page de mise en page.

Notes

Vous pouvez configurer votre site afin de pouvoir utiliser automatiquement la même page de mise en page pour toutes les pages de contenu d’un dossier. Pour plus d’informations, consultez Personnalisation du comportement Site-Wide pour pages Web ASP.NET.

Conception de pages de mise en page comportant plusieurs sections de contenu

Une page de contenu peut comporter plusieurs sections, ce qui est utile si vous souhaitez utiliser des dispositions comportant plusieurs zones avec du contenu remplaçable. Dans la page de contenu, vous attribuez un nom unique à chaque section. (La section par défaut n’est pas nommée.) Dans la page de mise en page, vous ajoutez une RenderBody méthode pour spécifier l’emplacement où la section sans nom (par défaut) doit apparaître. Vous ajoutez ensuite des méthodes distinctes RenderSection pour afficher les sections nommées individuellement.

Le diagramme suivant montre comment ASP.NET gère le contenu divisé en plusieurs sections. Chaque section nommée est contenue dans un bloc de section dans la page de contenu. (Ils sont nommés Header et List dans l’exemple.) L’infrastructure insère une section de contenu dans la page de mise en page au point où la RenderSection méthode est appelée. La section sans nom (par défaut) est insérée au point où la méthode est appelée, comme vous l’avez RenderBody vu précédemment.

Diagramme conceptuel montrant comment la méthode RenderSection insère des sections de référence dans la page active.

Cette procédure montre comment créer une page de contenu comportant plusieurs sections de contenu et comment la restituer à l’aide d’une page de mise en page qui prend en charge plusieurs sections de contenu.

Dans le dossier Partagé , créez un fichier nommé _Layout2.cshtml.

Remplacez tout contenu existant par les éléments suivants :

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

Vous utilisez la RenderSection méthode pour afficher les sections d’en-tête et de liste.

Dans le dossier racine, créez un fichier nommé Content2.cshtml et remplacez tout contenu existant par les éléments suivants :

@{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</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 laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

Cette page de contenu contient un bloc de code en haut de la page. Chaque section nommée est contenue dans un bloc de section. Le reste de la page contient la section de contenu par défaut (sans nom).

Exécutez Content2.cshtml dans un navigateur.

Rendre des sections de contenu facultatives

Normalement, les sections que vous créez dans une page de contenu doivent correspondre aux sections définies dans la page de mise en page. Vous pouvez obtenir des erreurs si l’une des opérations suivantes se produit :

La page de contenu contient une section qui n’a aucune section correspondante dans la page de mise en page.
La page de mise en page contient une section pour laquelle il n’y a pas de contenu.
La page de mise en page comprend des appels de méthode qui tentent de restituer la même section plusieurs fois.

Toutefois, vous pouvez remplacer ce comportement pour une section nommée en déclarant la section comme facultative dans la page de mise en page. Cela vous permet de définir plusieurs pages de contenu qui peuvent partager une page de mise en page, mais qui peuvent ou non avoir du contenu pour une section spécifique.

Ouvrez Content2.cshtml et supprimez la section suivante :

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

Enregistrez la page, puis exécutez-la dans un navigateur. Un message d’erreur s’affiche, car la page de contenu ne fournit pas de contenu pour une section définie dans la page de mise en page, à savoir la section d’en-tête.
Dans le dossier Partagé , ouvrez la page _Layout2.cshtml et remplacez cette ligne :
```
@RenderSection("header")
```
par le code suivant :
```
@RenderSection("header", required: false)
```
Vous pouvez également remplacer la ligne de code précédente par le bloc de code suivant, qui produit les mêmes résultats :
```
@if (IsSectionDefined("header")) {
    @RenderSection("header")
}
```
Réexécutez la page Content2.cshtml dans un navigateur. (Si cette page est toujours ouverte dans le navigateur, vous pouvez simplement l’actualiser.) Cette fois, la page s’affiche sans erreur, même si elle n’a pas d’en-tête.

Passage de données aux pages de mise en page

Vous pouvez avoir des données définies dans la page de contenu à laquelle vous devez faire référence dans une page de mise en page. Si c’est le cas, vous devez passer les données de la page de contenu à la page de mise en page. Par exemple, vous pouvez afficher le status de connexion d’un utilisateur ou afficher ou masquer des zones de contenu en fonction de l’entrée de l’utilisateur.

Pour passer des données d’une page de contenu à une page de mise en page, vous pouvez placer des valeurs dans la PageData propriété de la page de contenu. La PageData propriété est une collection de paires nom/valeur qui contiennent les données que vous souhaitez passer entre les pages. Dans la page de mise en page, vous pouvez ensuite lire les valeurs de la PageData propriété .

Voici un autre diagramme. Celui-ci montre comment ASP.NET pouvez utiliser la PageData propriété pour passer des valeurs d’une page de contenu à la page de mise en page. Lorsque ASP.NET commence à générer la page web, il crée la PageData collection. Dans la page de contenu, vous écrivez du code pour placer des données dans la PageData collection. Les valeurs de la PageData collection sont également accessibles par d’autres sections de la page de contenu ou par des blocs de contenu supplémentaires.

Diagramme conceptuel qui montre comment une page de contenu peut remplir un dictionnaire PageData et transmettre ces informations à la page de mise en page.

La procédure suivante montre comment passer des données d’une page de contenu à une page de mise en page. Lorsque la page s’exécute, un bouton permet à l’utilisateur de masquer ou d’afficher une liste définie dans la page de mise en page. Lorsque les utilisateurs cliquent sur le bouton, il définit une valeur true/false (Boolean) dans la PageData propriété. La page de mise en page lit cette valeur et, si elle est false, masque la liste. La valeur est également utilisée dans la page de contenu pour déterminer s’il faut afficher le bouton Masquer la liste ou afficher la liste .

[Capture d’écran montrant la page Passage de données.]

Dans le dossier racine, créez un fichier nommé Content3.cshtml et remplacez tout contenu existant par les éléments suivants :

@{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</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 laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}

Le code stocke deux éléments de données dans la PageData propriété : le titre de la page web et true ou false pour spécifier s’il faut afficher une liste.

Notez que ASP.NET vous permet de placer du balisage HTML dans la page de manière conditionnelle à l’aide d’un bloc de code. Par exemple, le if/else bloc dans le corps de la page détermine le formulaire à afficher en fonction de la valeur true ou non PageData["ShowList"] .

Dans le dossier Partagé , créez un fichier nommé _Layout3.cshtml et remplacez tout contenu existant par les éléments suivants :

<!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

La page de mise en page inclut une expression dans l’élément <title> qui obtient la valeur de titre de la PageData propriété . Il utilise également la ShowList valeur de la PageData propriété pour déterminer s’il faut afficher le bloc de contenu de liste.

Dans le dossier Partagé , créez un fichier nommé _List.cshtml et remplacez tout contenu existant par les éléments suivants :

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

Exécutez la page Content3.cshtml dans un navigateur. La page s’affiche avec la liste visible sur le côté gauche de la page et un bouton Masquer la liste en bas.
Cliquez sur Masquer la liste. La liste disparaît et le bouton devient Afficher la liste.
Cliquez sur le bouton Afficher la liste et la liste s’affiche à nouveau.

Ressources supplémentaires

Personnalisation du comportement des Site-Wide pour pages Web ASP.NET

Création d’une disposition cohérente dans pages Web ASP.NET sites (Razor)

Versions logicielles utilisées dans le tutoriel

À propos des pages de disposition

Création d’une apparence cohérente à l’aide de pages de disposition

Conception de pages de mise en page comportant plusieurs sections de contenu

Rendre des sections de contenu facultatives

Passage de données aux pages de mise en page

Ressources supplémentaires

Commentaires

Commentaires

Ressources supplémentaires