dimanche 1 mars 2015

Passer des données à une vue partielle via le ViewDataDictionary en ASP.NET MVC 4

Le ViewDataDictionary est un conteneur permettant de faire passer des données entre un "controller" et une "view".
Lorsqu'on observe les différentes signatures du Helper "Partial", on voit qu'on peut entre autre lui passé en paramètre un model, mais également un ViewDataDictionary et c'est ce qui nous intéresse ici :




Exemple d'utilisation
Voici un scénario simple d'utilisation que j'ai choisi pour illustrer l'utilisation du ViewDataDictionary :
  • J'ai un site web avec 3 pages accessibles via 3 onglets visibles sur les 3 pages.
  • Je souhaite mettre en surbrillance l'onglet courant sur laquelle je suis.
  • J'ai une vue pour chaque page, et dans chacune d'elle je référence ma vue partielle contenant mes onglets comme le montre la figure ci-dessous  :


L'idée est donc de passer à ma vue partielle un identifiant unique indiquant l'onglet courant afin que ma vue partiel mette en évidence l'onglet de ma page consulté. Nous allons donc utilisé le ViewDataDictionary pour le faire.

Dans notre vue correspondant à l'onglet 1, nous auront une ligne permettant l'injection de notre vue partielle avec en paramètre un "ViewData" simple (clé : onglet, valeur : 1) spécifiant le numéro de l'onglet courant en valeur :

   
@Html.Partial("_PartialMenuOnglet", new ViewDataDictionary {{ "onglet", "1"}})


Nous aurons donc a répéter simplement cette ligne dans chacune de nos vue avec le numéro de l'onglet correspondant voulu.

Dans notre vue partielle nous auront donc accès à notre ViewDataDictionary sur lequel nous pourrons vérifier la valeur de "l'onglet courant" et ainsi adapter nos onglets en conséquence :

@if (ViewData["onglet"] == "1")
{
     <input type="button" value="Onglet1" class="ongletActif" />
}
else
{
     <input type="button" value="Onglet1" class="ongletInactif" />
}
<br />
@if (ViewData["onglet"] == "2")
{
     <input type="button" value="Onglet2" class="ongletActif" />
}
else
{
     <input type="button" value="Onglet2" class="ongletInactif" />
}
<br />
@if (ViewData["onglet"] == "3")
{
     <input type="button" value="Onglet3" class="ongletActif" />
}
else
{
    <input type="button" value="Onglet3"  class="ongletInactif" />
}


Dans le code ci dessous, on applique une classe CSS adapté donnée (ongletActif) à l'onglet actif et une autre (ongletInactif) correspondant aux onglets inactifs.

Conclusion
L'exemple ci-dessous est assez simple et est juste à titre illustratif mais nous laisse présager une panoplie d'utilisations possibles du ViewDataDictionary en fonction des besoins, dans l'objectif de transmettre aisément des données au travers des vues MVC.

Aucun commentaire:

Enregistrer un commentaire