oliviermartialsoro

Présentation du projet

De nombreuses fois dans nos développements, nous sommes confrontés au problème de rafraîchissement de page. Bien des fois nous voulons mettre à jour une partie d’une page sans recharger toute la page. De nombreuses solutions existent certes mais dans ce cas de figure nous allons voir ensemble comment le faire à l’aide des vues partielles.

Pour ce faire nous allons créer une application permettant d’afficher une liste de projets et des sous projets qui les composent. En bas de chaque projet nous allons afficher ses sous projets à l’aide de treeview. On pourra ajouter un projet ou un sous projet sans rafraichir la page mais uniquement le treeview.

On considère que nous avons créer une mini application dans Visual Studio qui permet de créer des projets et des sous projets. La classe Project de notre modèle est:



Afficher la liste des projets dans un treeview

Lorsqu’on se rend sur la vue /Projects/Index pour consulter la liste des projets on a par défaut un affichage sous forme de tableau. Les projets 1.1 et 1.2 sont des sous-projets du projet 1. Le projet 3.1 est un sous-projet du projet 3.

Le code de la page /Projects/Index généré automatiquement est le suivant:


Cet affichage ne nous convient pas car il est difficile de percevoir les sous-projets d’un projet au 1er coup d’œil. Alors pour palier cela, nous allons opter pour un affichage des projets sous forme de treeview.
Nous allons utiliser la libraire File-export.Js qui permet d’afficher une liste sous forme de treeview (https://www.jqueryscript.net/other/F...e-explore.html).

Le petit code ci-dessous permet de convertir notre tableau en treeviiew


Sans oublier de rajouter en bas de page:



Et voilà nous avons le resultat attendu:


Utiliser une vue partielle pour afficher la liste des projets

Dans l'exemple que nous venons de faire le code qui affiche la liste des projets se trouve dans notre page Projects/Index. Imaginons que cette liste de projet soit affichée dans plusieurs pages de l’application, alors il va nous falloir recopier ce code dans chacune de ces pages. Cela n’est pas une solution optimale. Alors dans ce cas de figure, en ASP.Net il existe ce qu’on appelle les vues partielles. Ce sont des mini-pages qui peuvent être intégrées dans plusieurs pages d’une application. Selon la convention adoptée en ASP.Net le nom des vues partielles commence par le caractère « _ ».

Pour créer une vue partielle _ProjectListPartial, nous allons faire un clic droit sur le dossier « Shared » et sélectionner « MVC 5 Partial Page ».
Dans cette vue nous allons copier et coller le code qui affiche la liste des projets.
Toutefois cela ne sera pas suffisant. Dans le contrôleur ProjectsController, nous devons créer la méthode qui permet d’afficher la vue partielle. Cette méthode doit passer la liste des projets à la vue partielle


Enfin dans la page Projects/Index, il faut afficher la vue partielle en ajoutant:


Et voilà ce bout de code peut être ajouter dans n'importe quelle page pour afficher la liste de nos projets.

Ajouter des sous projets sans rafraichir la page

En face de chaque projet père, nous allons ajouter un bouton « Add Child » pour rajouter un sous-projet en dessous. En cliquant sur ce bouton une popup va s’ouvrir afiin de nous permettre la saisie du nom du sous-projet.

Le nom du sous-projet et l’identifiant du projet père vont être passés au controlleur à partir d'une méthode Ajax afin d’enregistrer le sous projet.

Le bouton « add child »
<a href="#">@project.Name</a> <a class="btn btn-xs btn-success" onclick="SetId('@project.Id','@project.Name')" data-toggle="modal" data-target="#projectModal"><i class="fa fa-plus"></i> Add child</a>

Le popup


La méthode ajax pour enregistrer un sous projet:


La méthode côté Contrôleur:


Et voilà, nous pouvons désormais enregistrer un sous projet .
Mais le seul hic c'est qu'à chaque enregistrement notre page se recharge complètement. Pour empêcher cela, nous allons mettre l'appel de notre vue partielle dans une div et nous allons recharger uniquement le contenu de cette div après l'enregistrement d'un projet.



Voilà, nous sommes arrivés à la fin de notre tutoriel. Vous pouvez obtenir les codes sources de l'exemple sur https://dev.azure.com via le lien: https://dev.azure.com/oliviermartial...=5.0-preview.1