Voir le flux RSS

oliviermartialsoro

Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale

Noter ce billet
par , 03/04/2019 à 14h16 (211 Affichages)
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:

Nom : Capture1.PNG
Affichages : 87
Taille : 14,8 Ko

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. Nom : Capture2.PNG
Affichages : 73
Taille : 11,8 Ko

Le code de la page /Projects/Index généré automatiquement est le suivant:
Nom : index.PNG
Affichages : 65
Taille : 22,2 Ko

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
Nom : Capture3.PNG
Affichages : 73
Taille : 17,5 Ko

Sans oublier de rajouter en bas de page:

Nom : Capture5.PNG
Affichages : 69
Taille : 9,1 Ko

Et voilà nous avons le resultat attendu:
Nom : Capture6.PNG
Affichages : 69
Taille : 7,5 Ko

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
Nom : Capture8.PNG
Affichages : 70
Taille : 5,1 Ko

Enfin dans la page Projects/Index, il faut afficher la vue partielle en ajoutant:
Nom : Capture9.PNG
Affichages : 70
Taille : 2,1 Ko

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
Nom : popup.PNG
Affichages : 69
Taille : 23,6 Ko

La méthode ajax pour enregistrer un sous projet:
Nom : ajax.PNG
Affichages : 69
Taille : 15,2 Ko

La méthode côté Contrôleur:
Nom : cont.PNG
Affichages : 69
Taille : 6,5 Ko

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.

Nom : col.PNG
Affichages : 69
Taille : 20,1 Ko

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

Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Viadeo Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Twitter Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Google Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Facebook Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Digg Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Delicious Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog MySpace Envoyer le billet « Comment rafraichir une vue partielle en ASP.Net MVC 5 sans recharger la page principale » dans le blog Yahoo

Mis à jour 04/04/2019 à 11h40 par oliviermartialsoro

Catégories
DotNET , Javascript , C# , ASP.NET , Développement Web

Commentaires