Partage via

Mise en page dans ASP.NET Core

Article rédigé par Steve Smith et Dave Brock

Les pages et vues partagent fréquemment des éléments visuels et programmatiques. Cet article montre comment :

  • Utilisez des dispositions courantes.
  • Directives de partage.
  • Exécutez du code commun avant de rendre des pages ou des vues.

Ce document décrit les dispositions des deux approches différentes de ASP.NET Core MVC : Razor pages et contrôleurs avec vues. Pour cette rubrique, les différences sont minimes :

  • Razor Les pages se trouvent dans le dossier Pages .
  • Les contrôleurs avec vues utilisent un dossier Views pour les vues.

Qu’est-ce qu’une mise en page ?

La plupart des applications web ont une disposition commune qui fournit à l’utilisateur une expérience cohérente au fur et à mesure qu’il navigue d’une page à l’autre. La disposition inclut généralement des éléments d’interface utilisateur courants tels que l’en-tête de l’application, les éléments de navigation ou de menu et le pied de page.

Exemple de mise en page

Les structures HTML courantes telles que les scripts et les feuilles de style sont également fréquemment utilisées par de nombreuses pages au sein d’une application. Tous ces éléments partagés peuvent être définis dans un fichier de disposition , qui peut ensuite être référencé par n’importe quelle vue utilisée dans l’application. Les gabarits réduisent le code redondant dans les vues.

Par convention, la disposition par défaut d’une application ASP.NET Core est nommée _Layout.cshtml. Les fichiers de disposition des nouveaux projets ASP.NET Core créés avec les modèles sont les suivants :

  • Razor Pages: Pages/Shared/_Layout.cshtml

    Dossier Pages dans l’Explorateur de solutions

  • Contrôleur avec vues : Views/Shared/_Layout.cshtml

    Dossier Vues dans l’Explorateur de solutions

La disposition définit un modèle de niveau supérieur pour les vues dans l’application. Les applications n'ont pas besoin de mise en page. Les applications peuvent définir plusieurs dispositions, avec différentes vues spécifiant différentes dispositions.

Le code suivant montre le fichier de mise en page d’un projet créé à partir d’un modèle, avec un contrôleur et des vues :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - WebApplication1</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Définition d'une mise en page

Razor les vues possèdent une Layout propriété. Les vues individuelles spécifient une disposition en définissant cette propriété :

@{
    Layout = "_Layout";
}

La disposition spécifiée peut utiliser un chemin d’accès complet (par exemple, /Pages/Shared/_Layout.cshtml ou /Views/Shared/_Layout.cshtml) ou un nom partiel (exemple : _Layout). Lorsqu’un nom partiel est fourni, le Razor moteur d’affichage recherche le fichier de disposition à l’aide de son processus de découverte standard. Le dossier où existe la méthode de gestionnaire (ou contrôleur) est d’abord recherché, suivi du dossier Partagé . Ce processus de découverte est identique au processus utilisé pour découvrir des vues partielles.

Par défaut, chaque disposition doit appeler RenderBody. Peu importe où l'appel à RenderBody est placé, le contenu de la vue sera affiché.

Rubriques

Une disposition peut éventuellement référencer une ou plusieurs sections, en appelant RenderSection. Les sections permettent d’organiser l’emplacement de certains éléments de page. Chaque appel à RenderSection peut spécifier si cette section est requise ou facultative :

<script type="text/javascript" src="~/scripts/global.js"></script>

@RenderSection("Scripts", required: false)

Si aucune section requise n’est trouvée, une exception est levée. Les vues individuelles spécifient le contenu à afficher dans une section à l’aide de la @sectionRazor syntaxe. Si une page ou une vue définit une section, elle doit être rendue (ou une erreur se produit).

Exemple de @section définition dans la vue Razor Pages :

@section Scripts {
     <script type="text/javascript" src="~/scripts/main.js"></script>
}

Dans le code précédent, scripts/main.js est ajouté à la scripts section d’une page ou d’une vue. D’autres pages ou vues dans la même application peuvent ne pas nécessiter ce script et ne définiraient pas de section de scripts.

Le balisage suivant utilise le Tag Helper partiel pour rendre _ValidationScriptsPartial.cshtml :

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Le balisage précédent a été généré par l'échafaudage Identity.

Les sections définies dans une page ou un affichage sont disponibles uniquement dans sa page de mise en page immédiate. Ils ne peuvent pas être référencés à partir de composants partiels, de composants d’affichage ou d’autres parties du système d’affichage.

Ignorer les sections

Par défaut, le corps et toutes les sections d’une page de contenu doivent tous être affichés par la page de mise en page. Le Razor moteur d’affichage applique cette opération en suivant si le corps et chaque section ont été rendus.

Pour indiquer au moteur d’affichage d’ignorer le corps ou les sections, appelez les méthodes IgnoreBody et IgnoreSection.

Le corps et chaque section d'une page Razor doivent être soit rendus, soit ignorés.

Importation de directives partagées

Les vues et les pages peuvent utiliser les directives pour importer des espaces de noms et utiliser l’injection de dépendances . Les directives partagées par de nombreux affichages peuvent être spécifiées dans un fichier commun _ViewImports.cshtml . Le _ViewImports fichier prend en charge les directives suivantes :

  • @addTagHelper
  • @removeTagHelper
  • @tagHelperPrefix
  • @using
  • @model
  • @inherits
  • @inject
  • @namespace

Le fichier ne prend pas en charge d’autres Razor fonctionnalités, telles que les fonctions et les définitions de section.

_ViewImports.cshtml Exemple de fichier :

@using WebApplication1
@using WebApplication1.Models
@using WebApplication1.Models.AccountViewModels
@using WebApplication1.Models.ManageViewModels
@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Le _ViewImports.cshtml fichier d’une application ASP.NET Core MVC est généralement placé dans le dossier Pages (ou Vues). Un _ViewImports.cshtml fichier peut être placé dans n’importe quel dossier, auquel cas il ne sera appliqué qu’aux pages ou vues de ce dossier et à ses sous-dossiers. _ViewImports les fichiers sont traités à partir du niveau racine, puis pour chaque dossier menant à l’emplacement de la page ou de la vue elle-même. _ViewImports les paramètres spécifiés au niveau racine peuvent être remplacés au niveau du dossier.

Par exemple, supposons :

  • Le fichier de niveau _ViewImports.cshtml racine inclut @model MyModel1 et @addTagHelper *, MyTagHelper1.
  • Un fichier de sous-dossier _ViewImports.cshtml inclut @model MyModel2 et @addTagHelper *, MyTagHelper2.

Les pages et les vues du sous-dossier auront accès aux Tag Helpers ainsi qu'au modèle MyModel2.

Si plusieurs _ViewImports.cshtml fichiers sont trouvés dans la hiérarchie de fichiers, le comportement combiné des directives est :

  • @addTagHelper et @removeTagHelper: toutes s'exécutent, dans l'ordre
  • @tagHelperPrefix: le plus proche de la vue remplace tous les autres
  • @model: le plus proche de la vue remplace tous les autres
  • @inherits: le plus proche de la vue remplace tous les autres
  • @using: tous sont inclus ; les doublons sont ignorés
  • @inject: pour chaque propriété, celle qui est la plus proche de la vue annule toute autre sur le même nom de propriété

Exécution de code avant chaque affichage

Code à exécuter avant que chaque affichage ou page ne soit placé dans le _ViewStart.cshtml fichier. Par convention, le _ViewStart.cshtml fichier se trouve dans le dossier Pages (ou Vues). Les instructions répertoriées dans _ViewStart.cshtml sont exécutées avant chaque affichage complet (pas les dispositions et pas les vues partielles). Comme ViewImports.cshtml, _ViewStart.cshtml est hiérarchique. Si un _ViewStart.cshtml fichier est défini dans le dossier d’affichage ou de pages, il est exécuté après celui défini à la racine du dossier Pages (ou Vues) (le cas échéant).

_ViewStart.cshtml Exemple de fichier :

@{
    Layout = "_Layout";
}

Le fichier ci-dessus spécifie que toutes les vues utilisent la _Layout.cshtml disposition.

_ViewStart.cshtml et _ViewImports.cshtmlne sont généralement pas placés dans le dossier /Pages/Shared (ou /Views/Shared). Les versions au niveau de l’application de ces fichiers doivent être placées directement dans le dossier /Pages (ou /Views).

  • Last updated on