Blog de Hinault Romaric (.NET Core, ASP.NET Core, Azure, DevOps)

Démystifier le modèle MVC des applications ASP.NET Core, partie 2 : transfert de données entre le contrôleur et la vue

Dans la partie précédente, nous avons mis en place le pattern MVC dans notre application en utilisant le framework ASP.NET MVC Core. Nous nous sommes familiarisés avec des concepts clés comme le routage, les middlewares, etc.

Toutefois, dans notre page d’Index, nous n’affichons aucun contenu provenant du contrôleur. Dans cette partie, nous verrons quelques mécanismes pour passer des données du contrôleur vers la vue.

Transferts des données du contrôleur vers la vue

ASP.NET MVC Core nous offre plusieurs options pour gérer l’interaction entre le contrôleur et la vue. Il s’agit notamment de :

• ViewData ;
• ViewBag ;
• TempData.

L’adoption d’une option doit se faire en fonction de vos besoins. Voyons chacune de ces possibilités de près.

ViewData

ViewData offre un dictionnaire pouvant contenir les données qui sont passées à la vue par le contrôleur. Le dictionnaire est accessible via un système clé valeur.

Modifions la méthode d’action Index du contrôleur Home comme suit :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
public IActionResult Index()
        {
             ViewData["Message"] = "Date du jour : " + DateTime.Now.Date;
            return View();
        }

Cette instruction va ajouter au dictionnaire ViewData la clé « Message » avec pour valeur « Date du jour xxxxx ».

Pour afficher cette information dans la vue, vous devez simplement ajouter la ligne de code suivante :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3>@ViewData["Message"]</h3>

Ce qui donne le résultat suivant à l’exécution :

ViewBag

ViewBag est assez similaire au ViewData, à la différence que le ViewBag offre des propriétés pouvant être créées dynamiquement. Vous pouvez l’utiliser comme suit dans le contrôleur :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

ViewBag.Message = "Date du jour : " + DateTime.Now.Date;

Et dans la vue :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3>@ViewBag.Message</h3>

Comme vous pouvez le constater, le ViewBag est simple d’utilisation et vous pouvez ajouter et modifier dynamiquement de nouveaux champs. Il ne nécessite pas le typage des données (conversion) et est moins performant que le ViewData.

TempData

TempData offre le stockage dans un dictionnaire tout comme le ViewData, à la différence que les données sont stockées le temps d’une session. TempData va conserver l’information le temps d’une requête HTTP.

Il est pratique lorsque vous voulez passer une information entre la requête HTTP courante et la suivante.

Il s’utilise de façon similaire à ViewData.

Dans le contrôleur :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

TempData["Message"] = "Date du jour : " + DateTime.Now.Date;

Et dans la vue :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3>@TempData["Message"]</h3>

C’est tout pour cette partie. Dans la prochaine partie, nous verrons comment améliorer l’aspect esthétique de notre application. Pour cela, nous allons utiliser Bower pour l’installation des packages front-end et nous allons mettre en place le Layout.

Bon coding 😉