Il y a quelques semaines, je vous avais parlé d’une méthode pour appeler une méthode privée en C#. Aujourd’hui, je vous présente une méthode très souvent utilisée dans le développement web permettant d’appeler une méthode côté serveur (en C#) depuis une fonction en Javascript (côté client).
Le principe
En fait, pour appeler une méthode côté serveur depuis du code Javascript, il existe une seule méthode : il faut lancer une requête HTTP.
Pour bien comprendre le fonctionnement, il faut distinguer les deux parties de l’applications :
- Une partie de l’application est exécutée sur le serveur Web (code C#),
- Une partie est exécutée dans la navigateur (code Javascript).
Les deux parties sont séparées et ne pourront communiquer que par des requêtes HTTP (GET, POST ou d’autres actions).
Pour faire une action vers le serveur, il faut lancer une requête HTTP avec Javascript. Ceci est grandement simplifié avec des bibliothèques comme jQuery par exemple.
L’exemple concret
Pour mieux comprendre, je vous propose un exemple simple utilisant ASP.NET MVC côté serveur et Javascript avec jQuery côté client.
Côté serveur :
Nous développons un contrôleur nommé « ServiceController ». Celui-ci contient une méthode « GetStats ».
Avec le routage par défaut d’ASP.NET MVC, il est possible d’appeler la méthode directement depuis le navigateur. L’URL sera du type « /Service/GetStats ».
Il reste donc à écrire un morceau de code pour appeler cette adresse depuis Javascript.
Côté client :
Pour appeler une URL du serveur depuis Javascript, vous pouvez utiliser la méthode HTTP GET ou la méthode POST.
POST est en général utilisé lorsqu’il y a beaucoup d’éléments à transmettre (par exemple pour la soumission d’un formulaire).
Dans l’exemple, nous allons utiliser GET pour la simplicité.
En Javascript, il suffira d’écrire ce morceau de code pour faire l’appel :
$.get('/Service/GetStats', function() {
// code exécuté après la réponse du serveur
});
Vous remarquerez qu’il est possible d’exécuter du code Javascript à la réception de la réponse du serveur. Généralement, ce code permet de mettre à jour la page dans le navigateur.
Projet complet
Je vous ai préparé un projet complet à télécharger pour que vous puissiez mieux comprendre l’exemple.
Ce projet démontre comment :
- Afficher une page qui comporte un bouton d’action,
- Se greffer sur ce bouton en Javascript pour intercepter le clic,
- Lancer une requête vers le serveur depuis Javascript,
- Mettre à jour la page Web avec le résultat du serveur,
- Ecrire une action simple qui retourne une chaîne de caractères avec ASP.NET MVC.