Lire en anglais

Partager via

Modèles d’affichage et d’éditeur dans ASP.NET Core

  • Article

Par Alexander Wicht

Les modèles d’affichage et d’éditeur spécifient la disposition des types personnalisés dans l’interface utilisateur. Considérez le modèle Address suivant :

C# 
public class Address
{
    public int Id { get; set; }
    public string FirstName { get; set; } = null!;
    public string MiddleName { get; set; } = null!;
    public string LastName { get; set; } = null!;
    public string Street { get; set; } = null!;
    public string City { get; set; } = null!;
    public string State { get; set; } = null!;
    public string Zipcode { get; set; } = null!;
}

Un projet qui génère automatiquement le Address modèle affiche Address dans le formulaire suivant :

view of default scaffolding layout of model

Un site web peut utiliser un modèle d’affichage pour présenter Address dans le format standard :

view of default scaffolding layout using Address template

Les modèles d’affichage et d’éditeur peuvent également réduire les coûts de duplication et de maintenance de code. Prenons l’exemple d’un site web qui affiche le modèle Address sur 20 pages différentes. Si le modèle Address change, les 20 pages devront toutes être mises à jour. Si un modèle d’affichage est utilisé pour le modèle Address, seul le modèle d’affichage devra être mis à jour. Par exemple, le modèle Address peut être mis à jour pour inclure le pays ou la région.

Les Tag Helpers constituent une solution de remplacement qui permet au code côté serveur de participer à la création et au rendu des éléments HTML dans les fichiers Razor. Pour plus d’informations, consultez Comparaison des Tag Helpers aux HTML Helpers.

Modèles d’affichage

Les modèles DisplayTemplates personnalisent l’affichage des champs de modèle ou créent une couche d’abstraction entre les valeurs de modèle et leur affichage.

Un DisplayTemplate est un fichier Razor placé dans le dossier DisplayTemplates :

  • Pour les applications Razor Pages, dans le dossier Pages/Shared/DisplayTemplates.
  • Pour les applications MVC, dans le dossier Views/Shared/DisplayTemplates ou le dossier Views/ControllerName/DisplayTemplates. Les modèles d’affichage contenus dans Views/Shared/DisplayTemplates sont utilisés par tous les contrôleurs de l’application. Les modèles d’affichage contenus dans le dossier Views/ControllerName/DisplayTemplates sont résolus uniquement par le contrôleur ControllerName.

Par convention, le fichier DisplayTemplate prend le nom du type à afficher. Le modèle Address.cshtml utilisé dans cet exemple :

CSHTML 
@model Address

<dl>
    <dd>@Model.FirstName @Model.MiddleName @Model.LastName</dd>
    <dd>@Model.Street</dd>
    <dd>@Model.City @Model.State @Model.Zipcode</dd>
</dl>

Le moteur d’affichage recherche automatiquement un fichier dans le dossier DisplayTemplates qui correspond au nom du type. S’il ne trouve pas de modèle correspondant, il a recours aux modèles intégrés.

Le code suivant montre la vue Details du projet généré automatiquement :

CSHTML 
@page
@model WebAddress.Pages.Adr.DetailsModel

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Address</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.FirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.FirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.MiddleName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.MiddleName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.LastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.LastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.Street)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.Street)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.City)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.City)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.State)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.State)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Address.Zipcode)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Address.Zipcode)
        </dd>
    </dl>
</div>
<div>
    <a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
    <a asp-page="./Index">Back to List</a>
</div>

Le code suivant montre la vue Details utilisant le modèle d’affichage Address :

CSHTML 
@page
@model WebAddress.Pages.Adr2.DetailsModel

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Address DM</h4>
    <hr />
    <dl class="row">
        <dd class="col-sm-10">
           @Html.DisplayFor(model => model.Address)
        </dd>
    </dl>
</div>
<div>
    <a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
    <a asp-page="./Index">Back to List</a>
</div>

Pour référencer un modèle dont le nom ne correspond pas au nom du type, utilisez le paramètre templateName dans la méthode DisplayFor. Par exemple, le balisage suivant affiche le modèle Address avec le modèle AddressShort :

CSHTML 
@page
@model WebAddress.Pages.Adr2.DetailsCCModel

@{
    ViewData["Title"] = "Details Short";
}

<h1>Details Short</h1>

<div>
    <h4>Address Short</h4>
    <hr />
    <dl class="row">
        <dd class="col-sm-10">
           @Html.DisplayFor(model => model.Address,"AddressShort")
        </dd>
    </dl>
</div>

Utilisez l’une des surcharges DisplayFor disponibles qui exposent le paramètre additionalViewData pour passer des données d’affichage supplémentaires qui sont fusionnées dans l’instance de Dictionnaire de données d’affichage créée pour le modèle.

Modèles de l’éditeur

Les modèles d’éditeur sont utilisés dans les contrôles de formulaire lorsque le modèle est modifié ou mis à jour.

Un EditorTemplate est un fichier Razor placé dans le dossier EditorTemplates :

  • Pour les applications Razor Pages, dans le dossier Pages/Shared/EditorTemplates.
  • Pour les applications MVC, dans le dossier Views/Shared/EditorTemplates ou le dossier Views/ControllerName/EditorTemplates.

Le balisage suivant montre le Pages/Shared/EditorTemplates/Address.cshtml utilisé dans l’exemple :

CSHTML 
@model Address

<dl>
    <dd>    Name:
        <input asp-for="FirstName" /> <input asp-for="MiddleName" /> <input asp-for="LastName" /> 
    </dd>
        <dd>    Street:
        <input asp-for="Street" /> 
    </dd>

        <dd>    city/state/zip:
        <input asp-for="City" /> <input asp-for="State" /> <input asp-for="Zipcode" /> 
    </dd>

</dl>

Le balisage suivant montre la page Edit.cshtml qui utilise le modèle Pages/Shared/EditorTemplates/Address.cshtml :

CSHTML 
@page
@model WebAddress.Pages.Adr.EditModel

@{
    ViewData["Title"] = "Edit";
}

<h1>Edit</h1>

<h4>Address</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Address.Id" />
             @Html.EditorFor(model => model.Address)
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="./Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Ressources supplémentaires