Tag Helper Partial dans ASP.NET Core
Par Scott Addie
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" />
}