Introduction à ASP.NET WebAPI (partie 2)

Dans mon billet précédent (accessible ICI), je vous proposais de découvrir WebAPI au travers de l'écriture d'un controller permettant d'exposer vos billets de blog en suivant le principe "REST". Aujourd'hui, nous allons voir comment utiliser ce controller dans une application web simple, en utilisant jQuery pour les appels WebService. Notez cependant que l'utilisation d'une interface web avec HTML & JavaScript n'est qu'un exemple, et que toutes les technologies en mesure d'effectuer un appel à un WebService peuvent tout simplement communiquer avec votre controller WebAPI (pour rappel, de base sont gérés plusieurs format de serialisation comme le XML, JSON et d'autres).

Interface graphique

Pour cette démonstration, je me suis basé sur une interface ultra simpliste (et complétement moche :p) en HTML :
1_Code_IHM
Le rendu graphique étant le suivant :
2_Rendu_IHM
Vous noterez que je suis resté dans le même projet (ASP.NET MVC3) que celui utilisé pour le développement du controller WebAPI, ceci afin de profiter du template par défaut pour le site. Evidemment, dans un cas d'utilisation normal, le client est distant du serveur et il vous faudra préciser l'url complète pour vos requêtes AJAX.

CRUD sur nos billets de blogs

Pour le moment, notre interface est vide et non fontionnelle, nous allons donc commencer par remplir notre "Liste des posts". Pour ceci, nous allons effectuer une requête Ajax sur le chargement de la page HTML :
3_Base_JQuery
4_Chargement_Posts
Le code JavaScript étant commenté, je vous laisse le découvrir sur les captures d'écran. Globalement, on effectue un appel à notre service avec une requête HTTP de type GET et sans paramètre, ce qui va nous retourner l'ensemble des billets de blog. On parcours ensuite la liste des billets retournés, et on génère du HTML reprenant le titre du billet, ainsi que des liens pour le détail, la suppression et l'édition de ces derniers. J'ai choisi d'afficher le détail sous la forme d'une popup, de demander confirmation lors d'une suppression, et je charge le formulaire vu précédemment dans le cas d'une édition. Vous remarquerez peut-être que nos liens n'ont pas d'URL associées, et qu'une fonction JavaScript est manquante (initializeLinkHandlers). Nous allons en fait utiliser les classes CSS de nos liens pour leur affecter des gestionnaires d'évènement sur un clic de l'utilisateur, c'est le but de la méthode initializeLinkHandlers présentée ci-dessous :
5_Event_Handlers
Il ne nous reste plus qu'a gérer notre bouton "Ajouter" / "Mettre à jour". Les champs du formulaire portent des attributs "name" correspondants au nom des propriétés d'un billet de blog (BlogPost de mon article précédent), le binding peut ainsi se faire automatiquement par WebAPI lors des requêtes POST et PUT. Nous allons donc écrire du code pour gérer le clic sur le bouton, sachant que si le champ caché contenant l'Id du billet contient une valeur, ce sera une mise à jour (et donc une requête PUT), alors que si il n'en contient pas, ce sera un ajout (et par conséquent une requête POST). Voici le code JavaScript permettant de faire ce travail :
7_JQuery_Add_Edit
Et le rendu attendu :
6_IHM_Finale

Conclusion

Vous noterez, je l'espère, à quel point il est facile et rapide de travailler avec WebAPI, et vos services sont "RESTfull", ce qui veut dire que vous utilisez les verbes du language HTTP selon votre besoin*, et non plus des GET sur différentes méthodes GetById, GetAll, Update ... comme c'est le cas avec des WebServices "classiques". Pour mémoire, voici les différents appels que nous avons utilisé dans notre démonstration :

  • GET sans paramètre : Récupération de tous les billets
  • GET avec un Id : Récupération d'un billet spécifique
  • POST avec les informations d'un billet : ajout de ce billet
  • PUT avec les informations d'un billet : modification de ce billet
  • DELETE avec l'Id d'un billet : suppression de ce billet

J'espère que cette démonstration vous permettra de bien démarrer avec les WebAPI, mais surtout vous donnera envie d'aller plus loin et de découvrir toutes les possibilités de cet API.

* REST est un concept plus large que la simple utilisation des verbes HTTP, vous trouverez plus d'informations ici : REST @ Wikipédia

Un commentaire

  1. http://www.werk030.n

    I had been questioning occasion you ever considered altering design from the website? Its really correctly created; I adore what youve obtained to convey. But possibly you are able to small far more in the form of content so males could connect with it…

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.