Dans le framework ASP.NET Core MVC, les vues partielles et les composants de vue facilitent la réutilisation de code HTML et la séparation des responsabilités.
Utilisation des vues partielles pour afficher la date
Les vues partielles sont des fragments de code Razor qui peuvent être intégrés dans d'autres vues. Elles sont généralement nommées avec un préfixe de souligné et placées dans le dossier /Views/Shared.
Exemple d'implémentation :
Contrôleur HomeController avec une action pour afficher la date :
[Route("[controller]/[action]")]
public class HomeController : Controller
{
public IActionResult DisplayDate()
{
return View();
}
}
Fichier partiel _currentDate.cshtml dans le dossier Shared :
<div style="padding:20px; border:1px solid blue; background-color:lightcyan">
@DateTime.Now.ToString("dd/MM/yyyy, dddd")
</div>
Vue principale DisplayDate.cshtml qui inclut la vue partielle de deux manières :
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<html>
<body>
<h3>Exemple d'inclusion de vue partielle</h3>
<div>
@await Html.PartialAsync("_currentDate")
<partial name="_currentDate" />
</div>
</body>
</html>
Implémentation des composants de vue
Les composants de vue offrent une approche plus robuste que les vues partielles. Ils permettent d'encapsuler la logique métier et de retourner différents résultats de vue.
Deux méthodes pour créer un composant de vue :
- Dériver de la classe ViewComponent et implémenter la méthode InvokeAsync.
- Appliquer l'attribut [ViewComponent] à une classe personnalisée avec la méthode InvokeAsync.
Les composants de vue recherchent leurs vues dans les chemins suivants :
- Pour les composants partagés : /Views/Shared/Components/{NomComposant}/{Vue}.cshtml
- Pour les composants non partagés : /Views/{NomContrôleur}/Components/{NomComposant}/{Vue}.cshtml
Exemple d'implémentation :
Classe de composant de vue pour afficher des informations sur l'environnement :
public class EnvInfoViewComponent : ViewComponent
{
private readonly IWebHostEnvironment _hostEnv;
public EnvInfoViewComponent(IWebHostEnvironment hostEnv)
{
_hostEnv = hostEnv;
}
public async Task<IViewComponentResult> InvokeAsync()
{
return View("_environmentDetails", _hostEnv);
}
}
Contrôleur PageController :
public class PageController : Controller
{
public IActionResult Index()
{
return View();
}
}
Vue du composant _environmentDetails.cshtml dans /Views/Shared/Components/EnvInfo/ :
@model Microsoft.AspNetCore.Hosting.IWebHostEnvironment
<div style="color:darkgreen; font-size:16px">
<p>Nom de l'application : @Model.ApplicationName</p>
<p>Environnement d'exécution : @Model.EnvironmentName</p>
</div>
Vue principale Index.cshtml du contrôleur PageController :
<html>
<body>
<h2>Tableau de bord</h2>
<section>
<h4>Informations sur l'environnement</h4>
@await Component.InvokeAsync("EnvInfo")
@await Component.InvokeAsync(typeof(Page.EnvInfoViewComponent))
</section>
</body>
</html>