Tag Helper Partial dans ASP.NET Core

Article
11/30/2023

Pour obtenir une vue d’ensemble des Tag Helpers, consultez Tag Helpers dans ASP.NET Core.

Affichez ou téléchargez l’exemple de code (procédure de téléchargement)

Vue d’ensemble

Le Tag Helper Partial est utilisé dans le cadre du rendu d’un affichage partiel dans les pages Razor et les applications modèle-vue-contrôleur. Tenez compte des points suivants :

Il nécessite ASP.NET Core 2.1 ou ultérieur.
Il constitue une alternative à la syntaxe HTML Helper.
Il affiche la vue partielle de façon asynchrone.

Parmi les options HTML Helper utilisées pour le rendu d’une vue partielle, citons les suivantes :

Le modèle Product est utilisé dans les exemples tout au long de ce document :

namespace TagHelpersBuiltIn.Models
{
    public class Product
    {
        public int Number { get; set; }

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

Voici l’inventaire des attributs du Tag Helper Partial.

name

L'attribut name est obligatoire. Il indique le nom ou le chemin de la vue partielle à afficher. Quand un nom de vue partielle est fourni, le processus de découverte de vue est lancé. Ce processus est ignoré quand un chemin explicite est fourni. Pour connaître toutes les valeurs name acceptables, consultez Découverte des vues partielles.

La balise suivante utilise un chemin explicite indiquant que le fichier _ProductPartial.cshtml doit être chargé depuis le dossier Partagé. À l’aide de l’attribut for, un modèle est passé à la vue partielle pour liaison.

<partial name="Shared/_ProductPartial.cshtml" for="Product">

pour

L’attribut for affecte un ModelExpression à évaluer par rapport au modèle actif. ModelExpression déduit la syntaxe @Model.. Par exemple, for="Product" peut être utilisé à la place de for="@Model.Product". Pour substituer ce comportement d’inférence par défaut, utilisez le symbole @ pour définir une expression inline.

La balise suivante charge _ProductPartial.cshtml :

<partial name="_ProductPartial" for="Product">

La vue partielle est liée à la propriété Product du modèle de page associé :

using Microsoft.AspNetCore.Mvc.RazorPages;
using TagHelpersBuiltIn.Models;

namespace TagHelpersBuiltIn.Pages
{
    public class ProductModel : PageModel
    {
        public Product Product { get; set; }

        public void OnGet()
        {
            Product = new Product
            {
                Number = 1,
                Name = "Test product",
                Description = "This is a test product"
            };
        }
    }
}

model

L’attribut model affecte une instance de modèle à passer à la vue partielle. L’attribut model ne peut pas être utilisé avec l’attribut for.

Dans le balisage suivant, un nouvel objet Product est instancié et passé à l’attribut model pour liaison :

<partial name="_ProductPartial"
         model='new Product { Number = 1, Name = "Test product", Description = "This is a test" }'>

view-data

L’attribut view-data affecte une ViewDataDictionary afin de passer à la vue partielle. Le balisage suivant rend l’ensemble de la collection ViewData accessible à la vue partielle :

@{
    ViewData["IsNumberReadOnly"] = true;
}

<partial name="_ProductViewDataPartial" for="Product" view-data="ViewData">

Dans le code précédent, la valeur de clé IsNumberReadOnly est true et ajoutée à la collection ViewData. ViewData["IsNumberReadOnly"] est donc accessible au sein de la vue partielle suivante :

@model TagHelpersBuiltIn.Models.Product

<div class="form-group">
    <label asp-for="Number"></label>
    @if ((bool)ViewData["IsNumberReadOnly"])
    {
        <input asp-for="Number" type="number" class="form-control" readonly />
    }
    else
    {
        <input asp-for="Number" type="number" class="form-control" />
    }
</div>
<div class="form-group">
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" class="form-control" />
</div>
<div class="form-group">
    <label asp-for="Description"></label>
    <textarea asp-for="Description" rows="4" cols="50" class="form-control"></textarea>
</div>

Dans cet exemple, la valeur de ViewData["IsNumberReadOnly"] détermine si le champ Number s’affiche en lecture seule.

Migrer à partir d’une assistance HTML

Prenons l’exemple d’assistance HTML asynchrone suivante. Une collection de produits est parcourue et affichée. Conformément au premier paramètre de la méthode PartialAsync, la vue partielle _ProductPartial.cshtml est chargée. Une instance du modèle Product est passée à la vue partielle pour la liaison.

@foreach (var product in Model.Products)
{
    @await Html.PartialAsync("_ProductPartial", product)
}

Le Tag Helper Partial suivant permet d’obtenir le même comportement de rendu asynchrone que l’assistance HTML PartialAsync. Une instance de modèle Product est assignée à l’attribut model pour la liaison à la vue partielle.

@foreach (var product in Model.Products)
{
    <partial name="_ProductPartial" model="@product" />
}