19-7 Rétroaction utilisateur et TempData

Vous avez peut-être remarqué qu'on ne renvoie pas de rétroaction à l'utilisateur après qu'il ait posé sa question, comme quoi l'opération a bien réussi.

On peut utiliser un concept de messages "Flash" pour afficher dans n'importe quelle page un message provenant d'un contrôleur.

L'idée est qu'après avoir soumis la question, on redirige vers la page de l'événement. Or, la page de l'événement n'a pas connaissance qu'une question vient d'être créée et elle ne peut donc pas afficher un message du genre "Nous avons bien reçu votre question".

TempData

Pour passer de l'information associée à une requête, on peut utiliser le dictionnaire TempData.

TempData est un dictionnaire, c'est-à-dire qu'il permet de faire des associations clé-valeur. C'est une variable qui est partagée autant par le contrôleur que la vue, il peut donc être utilisé pour passer de l'information entre les deux. De plus, il est réinitialisé entre chaque requête, ce qui en fait un mécanisme parfait pour passer de l'information temporaire, propre à la requête!

Par exemple,

1. Lors de la création d'une question, associez à la clé success du dictionnaire TempData un message.
   Snowfall.Web.Mvc/Controllers/QuestionsController.cs

       //...
   
       await _questionService.Create(question);
       
       TempData["success"] = "Nous avons bien reçu votre question!";
       
       return RedirectToAction("Show", "Evenements", new { Id = evenementId });
   }
2. Dans le _Layout de l'application, donc gabarit utilisé par toute l'application, récupérez la valeur associée success de TempData si elle existe
   Snowfall.Web.Mvc/Views/Shared/_Layout.cshtml

   <div class="container">
       <main role="main" class="pb-3">
           @if (TempData["success"] != null)
           {
               <div>
                   @TempData["success"]
               </div>
           }
           @RenderBody()
       </main>
   </div>
3. Essayez de soumettre le formulaire de question!
   http://localhost:4200

   

Bon, ce n'est pas optimal, mais vous voyez le principe! ;)

Utiliser un Toast

Nous pourrions appliquer un style au div pour lui donner une apparence plus intéressante, mais en même temps on ne veut pas que la notification reste là éternellement.

Les Toast de Bootstrap sont parfaits pour ce genre de cas.

1. Remplacez le texte simple par un div avec les classes et la structure d'un Toast.

   <!-- ... -->
   
       <main role="main" class="pb-3">
           @if (TempData["success"] != null)
           {
             <div class="toast text-bg-success align-items-center mt-3 position-fixed top-0 start-50 translate-middle-x" id="flash-message" role="alert" aria-live="assertive" aria-atomic="true">
                   <div class="d-flex">
                       <div class="toast-body">
                           @TempData["success"]
                       </div>
                       <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                   </div>
               </div>
           }
           @RenderBody()
       </main>
   
   <!-- ... -->
   info

   Remarquez le id="flash-message". Nous utiliserons ce id pour faire référence au Toast afin de l'afficher. En effet, les toasts doivent être déclenchés par JavaScript.

2. On veut afficher le toast lorsque la page charge. Pour cela, on doit s'appuyer sur du code JavaScript. Ajoutez un fichier flash-message.js sous le dossier assets/js du projet MVC.

3. Importez Toast de Bootstrap`

   Snowfall.Web.Mvc/assets/js/flash-message.js

   import { Toast } from 'bootstrap';

4. On veut activer le toast lorsque la page est prête, c'est l'événement DOMContentLoaded.

   Snowfall.Web.Mvc/assets/js/flash-message.js

   import { Toast } from 'bootstrap';
   
   document.addEventListener("DOMContentLoaded", function () {
   
   });

5. On doit ensuite récupérer le toast, via son id par exemple.

   Snowfall.Web.Mvc/assets/js/flash-message.js

   import { Toast } from 'bootstrap';
   
   document.addEventListener("DOMContentLoaded", function () {
       let toastEl = document.getElementById("flash-message");
   });

6. Ensuite, activer le toast

   Snowfall.Web.Mvc/assets/js/flash-message.js

   import { Toast } from 'bootstrap';
   
   document.addEventListener("DOMContentLoaded", function () {
       let toastEl = document.getElementById("flash-message");
       if (toastEl) {
           let toast = new Toast(toastEl, { delay: 5000 });
           toast.show();
       }
   });

7. Finalement, importez votre nouveau fichier js dans app.js

   Snowfall.Web.Mvc/assets/js/app.js

   import 'vite/modulepreload-polyfill'
   
   // Notre Scss, contenant Bootstrap
   import '../scss/app.scss'
   
   // Importation du JavaScript de Bootstrap
   import * as bootstrap from 'bootstrap'
   import './flash-message';

Maintenant, essayez de soumettre une question et vous devriez avoir un message de confirmation! 🎉

http://localhost:4200