La problématique

Dans cet article, je vous présente deux méthodes pour mettre à jour vos pages web de manière partielle. Ces méthodes permettent de créer des applications web plus rapides permettant d’offrir une expérience utilisateur plus agréable. Grâce à ces mécanismes, il est possible de s’approcher des performances d’une application du type Bureau.

Généralement, les applications web fonctionnent en mode « page », c’est-à-dire que chaque page est la suite d’une requête vers le serveur Web. Ceci est le fonctionnement par défaut du Web que nous connaissons tous.
Vous avez sûrement déjà essayé d’améliorer le chargement de vos pages avec différentes astuces : mise en cache, réduction du nombre d’appels, serveur pour les fichiers statiques…

Bref, les solutions sont nombreuses et pourtant, il y en a une qui fonctionne vraiment bien : il s’agit du chargement partiel de page.

L’exemple le plus frappant, que vous connaissez très certainement, est l’application Gmail. Cette application charge une page « principale » au démarrage puis met à jour différentes zones dans l’écran au fur et à mesure et vos actions. C’est ce que l’on appelle le chargement partiel.

Comment fonctionne le chargement partiel de page ?

En fait, le mécanisme est très simple, à partir du moment ou vous savez utiliser le DOM.

Le DOM (alias Document Object Model) est une représentation objet du document HTML en cours d’affichage. Ce DOM peut être modifié par Javascript : il est possible d’ajouter, de modifier ou de supprimer des nœuds.

Le DOM peut être manipulé de manière poussée jusqu’à modifier la page entière. C’est ainsi que vous pourrez modifier le contenu de la page affichée dans votre navigateur.

Pour mettre à jour une partie de votre page, voici les étapes à suivre :

• Effectuer une requête (asynchrone) vers le serveur Web pour récupérer des données,
• Dès l’arrivée du résultat, mettre à jour un nœud existant et remplacer le contenu par le contenu récupéré.

Cas pratique avec ASP.NET MVC et AJAX

Je vous propose un exemple utilisant ASP.NET MVC 4 et AJAX (jQuery) pour démontrer le fonctionnement des mises à jour partielles.

Dans cette exemple, la page principale affiche une longue liste d’éléments (pour simuler un chargement de page long). Cette page comporte également deux zones sur la droite : une zone « météo » et une zone « info trafic ».

Voici une capture de notre page principale :

Etape 1 : Création du projet

Pour démarrer, je suis parti d’un projet ASP.NET MVC du type « de base », j’ai ensuite ajouté un contrôleur « HomeController » et les actions suivantes :

• Index : elle permet de charger des utilisateurs en mémoire pour les afficher ensuite dans la page d’accueil,
• Weather : elle calcule la météo et retourne une vue partielle,
• InfoTraffic : elle calcule le traffic et retourne une vue partielle.

A ce stade du développement, nous pouvons vérifier le contenu retourné par les vues partielles avec notre navigateur.
Par exemple, en ouvrant la page « http://localhost:62199/home/weather », voici ce qui s’affiche (vue partielle) :

Etape 2: Les requêtes AJAX

Nous allons utiliser jQuery pour faire ces requêtes asynchrones (jQuery est livré par défaut dans le modèle de projet ASP.NET MVC 4).
Normalement, avec jQuery, il suffirait d’appeler la méthode $.get ou $.post pour faire des appels AJAX.

Etant donné que nos vues partielles génèrent du contenu dynamique, il va falloir spécifier à jQuery de ne pas utiliser le cache navigateur. Pour cela, nous utiliserons la méthode de bas niveau $.ajax ($.get et $.post utilisent également $.ajax en interne).

Voici comment cela s’écrit en Javascript :
[javascript] $.ajax({
url: ‘/controler/action’,
cache: false
}).done(function (data) {
// cette fonction est appelée lorsque nous avons des données
// TODO : mettre à jour le contenu
});
[/javascript]

Le paramètre ‘url’ sera calculé par Razor et le helper Url pour correspondre à la bonne action.
Lorsque la requête sera terminée, le contenu de l’évènement « done » sera exécuté : ici nous mettrons à jour le sous-noeud « content » du noeud « weather ».

Etape 3 : Intégration de l’ensemble

Pour terminer l’exemple, il ne reste plus qu’à lancer les appels Javascript pour mettre à jour les zones dans la page.

Dans l’exemple, je vous ai préparé deux fonctionnements :

• Pour la zone météo, le lien « Mettre à jour » permet de lancer une requête qui va mettre à jour la zone (le lien est crée dynamiquement en Javascript),
• Pour la zone de trafic, la requête est relancée automatiquement toutes les 3 secondes.

A vous désormais

Dans cet article, je vous ai montré rapidement, comment mettre à jour des parties d’une page, très simplement en Javascript avec ASP.NET MVC. Vous avez pu constater que le mécanisme est très simple et qu’il permet de mettre à jour des pages « par morceau ». Ce fonctionnement est idéal pour des pages qui comportent beaucoup de données provenant de sources différentes.

• Désormais, c’est à vous de passer à l’action. Pour vous aider, je vous ai préparé le projet complet, à télécharger, avec commentaires détaillés. Ce bonus est accessible par le formulaire ci-dessous.

[sociallocker] Télécharger le bonus complémentaire

[/sociallocker]