Vous souhaitez utiliser une Web API pour fournir un service RESTful (autrement dit API REST) vers un Client ASP.NET et ce n'est pas si facile. En effet cette techno est faite pour fournir une API vers le poste de travail, la tablette, le mobile. Mais pour afficher des données en provenance d'une Web API dans une application ASP.NET, il va falloir écrire pas mal de javascript et oui ... alors allons-y.
Démarrons avec une bonne application de départ, un bon Template, je vous conseille
BookService de Mike Wasson qui s'illustre en écrivant la série d'articles suivants :
Using Web API 2 with Entity Framework 6
Voilà, on est en plein dans le vif du sujet, la plus part des sujets sont résolus dans cette série d'articles seulement maintenant, comment aller plus loin. En effet, le CRUD (Create Read Update Delete) n'est pas complet. On ne peut en définitive pas faire grand chose avec cette simple application.
Je vais adapter les codes sources de ce sample pour en faire une
Filmothèque, et vous permettre de gérer vos films favoris.
Eviter un premier écueil, le piège du cache
Il ne faut pas oublier le
cache de votre navigateur. Pour développer, ici on est en
JavaScripts et donc si vous devez modifier les scripts associés à votre projet, comme par exemple le script "
app.js" vous devrez supprimer les données du cache de votre navigateur sinon vous restez avec l'ancien script et vous ne verrez pas vos modifications :
 |
| JavaScripts de mon application ASP.NET WebAPI |
Vous trouverez pour chaque navigateur le moyen de
supprimer les données du cache :
 |
| Supprimer les données du cache de votre navigateur ! |
Plus pratique, le raccourcis :
Ctrl + F5 : démarrer et vider le cache
Qui
démarre le navigateur en supprimant les données du cache.
Gestion des données avec le Package Manager et "Code First Migrations"
Je ne connaissais pas, alors je prends des notes d'un truc assez cool. C'est l'utilisation de "
Code First Migrations" avec Entity Framework. C'est à dire d'écrire du code C# pour remplir la BD avec des données en utilisant la fonction
Configuration.Seed.
Puis simplement avec les commandes :
PM> Enable-Migrations
PM> Update-Database
Le plus difficile, c'est de trouver comment afficher la
Console du Gestionnaire de packages, c'est ici :
 |
| Outils->Gestionnaire de packages NuGet->Console du Gestionnaire de package |
Dans cet exemple :
On va apprendre à maitriser le script
app.js qui est le ViewModel de notre vue sur le service WebAPI
On fera également du
bootstrap Framework CSS
On ajoutera un bouton "
Delete" pour pouvoir supprimer une entité et ainsi réaliser le CRUD complet.
Architecture de l'application WebAPI
Il s'agit bien entendu d'une architecture MVC (Model View Controller). Avec un contrôleur sécifique dédié aux WebApi.
Model
Le Model est calqué sur la base de donnée grâce à l'utilisation de "
Code First". Le modèle peut être modifier dans le code et la base mise à jour.
Le fichier
Configuration.cs du répertoire
Migrations permet en utilisant la fonction
Seed de créer des enregistrements dans la BD.
 |
| Utilisation de Code first et création d'éléments dans la Base de Données |
Controller
Il s'agit d'une
WebAPI le contrôleur dérive donc d'un
ApiController
La fonction GetFilm de l'ApiController qui permet de retourner le film demandé par "id" :
 |
| GetFilm FilmsController : ApiController |
View
La View
Index.cshtml est posée sur un
ViewModel définit dans le JavaScript
app.js que l'on a vu au dessus. C'est à la fois la difficulté et la simplicité de de ce choix d'application.
Simplicité car l'application est fluide et toutes les opérations sur les objets découlent de ce choix d'architecture, difficulté car il faut modifier le JavaScript pour l'adapter au besoin de lapplication.
On va ajouter une
table pour nous permettre d'afficher nos données et de les manipuler : afficher la Vue détails de notre objet film.
 |
| Ajouter une légende |
Et on ajoute un href
deleteFilm qui va déclencher la fonction JavaScript :
 |
| app.js function deleteFilm |
Voici donc le CRUD de mon application FilmService
Démonstration rapide du CRUD par quelques copies d'écrans. Au démarrage de l'application nous avons dans le navigateur la page suivante :
 |
| Home/Index |
J'ajoute mon film, je choisi comme Author : Cédric clapich, je clique sur le bouton
Submit.
 |
| Add Film |
Le nouveau film apparait dans la liste des Films :
Je peux alors choisir d'afficher les détails du film ou de le supprimer. Je choisis d'afficher les détails en cliquant sur
Details :
 |
| La partie détails apparait |
Je choisis en suite de supprimer ce film, je clique sur
Delete.
 |
| Suppression du film |
Si je reclique sur "Delete" un message "Not Found" apparait...
Voilà, c'est un CRUD avec une Application ASP.NET qui utilise
knockout.js pour fabriquer le
ViewModel du pattern MVC.
Pour ajouter un film, j'ai utilisé un
POST. Il faudrait utiliser un
PUT pour effectuer une
mise à jour mais l'Update du CRUD peut toujours être vu comme une suppression suivi d'une recréation. Nous avons donc une
application complète qui résous quelques petits soucis laissés en suspend par M. Wasson.
Vous êtes intéressé par des détails supplémentaires... n'hésitez pas, faites moi signe, laissez moi un commentaire. Je vous expliquerai la partie qu'il vous manque.
Voilà on vient de débuter un vrai projet d'API REST.
To Be Continued ...
Download Source Code
Je vous livre les sources, je reviendrais les commenter de façon plus approfondi une prochaine fois. A l'intérieur du .zip il y a un petit fichier readme.txt qui vous permet d'installer la BD de l'application.
Download Source Code ASP.NET WebAPI FilmLibrary in C#
Je dois partir faire du "ASP.NET Core" multiplateforme ...
Don't forget to Have fun!
