Dans cet article, je vais montrer comment créer une ASP.Net WEB API et la consommer dans un projet ASP.Net MVC4.

C’est quoi WEB API ?

Web Api est un Framework Microsoft qui permet aux développeurs de mettre en place des services  HTTP pouvant être consommés par  une multitude de clients (réseaux sociaux, navigateurs, mobiles, etc.). C’est la plateforme idéale pour développer des applications Restful (REpresentational State Transfer) dans le Framework .net

Etant donné qu’ASP.Net Web API  utilise un modèle de programmation proche d’ASP.NET MVC, leurs modes de fonctionnement se ressemblent :

Un client souhaite récupérer une donnée, il passe par l’URI correspondant à l’action à effectuer. Ensuite, la requête va être passée au contrôleur en question, qui va potentiellement interroger une base de données pour en récupérer les données (modèle) qui seront finalement renvoyées au client.

Le fonctionnement est donc très similaire, cependant il y a deux exceptions :

• Il n’y a pas des vues  dans ASP.NET WEB API: les données sont sérialisées (XML ou JSON) et renvoyées directement au client.
• Les actions sont par défauts implicites dans APS.Net WEB API : l’action à exécuter est déduite des paramètres passés dans la requête et du VERB HTTP( GET, POST, PUT, DELETE)

Dans ce qui suit, je vais décrire étape par étape comment créer une WEB API en utilisant le patron de classe Repository .

Etape 1:

Nous allons commencer par créer notre projet WEB API. Pour ceci, nous allons sélectionner « New Project» puis choisir « ASP.Net MVC4 Web Application »:

Nous allons par la suite, choisir la Template « Web API » et choisir de créer un projet de test qui nous servira par la suite pour les tests unitaires de notre application :

La structure de notre projet ressemblera à ceci :

Etape 2 :

Nous allons ajouter notre modèle. Pour ceci, nous allons ajouter dans le dossier Modèles, une nouvelle classe appelée « Facture ».

namespace GestionFactureWebAPI.Models
{
    public class Facture
    {
        public decimal IdFacture { get; set; }
        public string NumFacture { get; set; }
        public string NumCommande { get; set; }
        public DateTime DateCreation { get; set; }
    }
}

Etape 3 :

Dans cette étape, nous allons ajouter une interface Repository : IFactureRepository dans le même dossier « Modèles »

namespace GestionFactureWebAPI.Models
{
    public interface IFactureRepository
    {
        IEnumerable<Facture> GetAll();
        Facture Get(int idFact);
        Facture Add(Facture objFact);
    }
}

Nous allons par la suite ajouter la classe FactureRepository qui va implémenter notre interface.

   public class FactureRepository : IFactureRepository
    {
        #region properties
        private List<Facture> ListFactures = new List<Facture>();
        private int NextFactId = 1;
        #endregion

        #region Methods
        public FactureRepository()
        {
            Add(new Facture { IdFacture = 1, NumFacture = "1", NumCommande = "C100",
                LabelFacture = "FactureMicrosoft" });
            Add(new Facture { IdFacture = 1, NumFacture = "2", NumCommande = "C110", 
                LabelFacture = "FactureSodexo" });
            Add(new Facture { IdFacture = 1, NumFacture = "3", NumCommande = "C200", 
                LabelFacture = "FactureSogeres" });
        }

        public Facture Add(Facture objFact)
        {
            if (objFact == null)
            {
                throw new ArgumentNullException("objFact");
            }
            objFact.IdFacture = NextFactId++;
            ListFactures.Add(objFact);
            return objFact;
        }

        public Facture Get(int idFact)
        {
            return ListFactures.Find(x => x.IdFacture == idFact);
        }

        public IEnumerable<Facture> GetAll()
        {
            return ListFactures;
        }

        #endregion

    }

Etape 4 :

Nous allons maintenant ajouter un API contrôleur pour utiliser le modèle créé dans l’étape précédente. Dans le dossier des Contrôleurs, ajoutez un API contrôleur (appelé « FactureController ») avec des actions lecture/Ecriture comme vous pouvez le voir dans la figure suivante:

Nous allons implémenter notre contrôleur comme suit:

 public class FactureController : ApiController
    {
        static readonly IFactureRepository FactureRepository = new FactureRepository();

        [HttpGet]// GET api/Facture
        public IEnumerable<Facture> GetAllFactures()
        {
            return FactureRepository.GetAll();
        }

        // GET api/Facture/5
        public Facture GetFacture(int idFacture)
        {
            var facture = FactureRepository.Get(idFacture);
            if (facture == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return facture;
        }



        [HttpPost]// POST api/Facture
        public void Post([FromBody]Facture fact)
        {
        }

        [HttpPut]// PUT api/Facture/5
        public void Put(int idfacture, [FromBody]Facture fact)
        {
        }

        [HttpDelete]// DELETE api/Facture/5
        public void Delete(int idfacture)
        {
        }
    }

Dans cet API contrôleur, nous avons implémenté les opérations CRUD, permettant la manipulation des données de notre modèle de données. Ces opérations sont décorées par des attribues : GET, POST, PUT, DELETE.

Etape 5 :

Dans cette étape, nous allons créer une vue et un contrôleur MVC, et nous allons consommer notre service développé avec la WEB API en utilisant une simple page cshtml et jquery/ajax.
Pour ceci, nous allons ajouter notre vue appelée Facture.cshtml, notre MVC contrôleur et l’action correspondante qui appelle la vue.

namespace GestionFactureWebAPI.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Title = "Home Page";  
            return View();
        }

        public ActionResult Facture()
        {
            ViewBag.Title = "Liste des Factures";
            return View();
        }  
    }
}

Maintenant, nous allons ajouter du code Jquery/ajax pour appeler notre Web API.

• Récupération de la liste des factures :

 <script type="text/javascript">
            $(document).ready(function () {

                function AllFactures() {
                    $.ajax({
                        type: "GET",
                        url: "https://localhost:32359/api/Facture", //URI  

                        dataType: "json",
                        success: function (data) {
                            debugger;
                            var datadatavalue = data;
                            var myJsonObject = datavalue;
                            contentType: "application/json";
                            $.each(myJsonObject, function (i, mobj) {
                                $("#ListFacture").append('<tr><td width="50px">' + mobj.IdFacture +
                     '</td><td width="50px">' + mobj.NumFacture +
                     '</td><td width="50px">' + mobj.NumCommande +
                    '</td>' + '</td><td width="50px">'
                    + mobj.LabelFacture + '</td></tr>');

                            });

                        },
                        error: function (xhr) {
                            alert(xhr.responseText);
                        }
                    });

                }  


            });
            </script>

• Récupération d’une facture spécifique:

function GetFactureById() {  
        var id = 1;  
        $.ajax({  
            url: 'https://localhost:55355/api/Facture/' + id,  
            type: 'GET',  
            dataType: "json",  
            success: function (data) {  
  
                var datavalue = data;  
                var myJsonObject = datavalue;  
  
                var IdFacture = myJsonObject[0].IdFacture;  
                var NumFacture = myJsonObject[0].NumFacture;  
                var NumCommande = myJsonObject[0].NumCommande;  
                var LabelFacture = myJsonObject[0].LabelFacture;  
                  
                $('<tr><td>' + IdFacture + '</td><td>' + NumFacture +  
                '</td><td>' + NumCommande + '</td>' + '</td><td>' + LabelFacture + '</td></tr>').appendTo('#ListFacture');  
            },  
            error: function (xhr) {  
                alert(xhr.responseText);  
            }  
        });  
    }

• Suppression d’une facture:

function deleteFacture()   
    {  
            var id = 0;  
            $.ajax({  
                url: 'https://localhost:55355/api/Facture/' + id,  
                type: 'DELETE',  
                success: function (data) {  
  
                },  
                error: function (data) {  
                    alert('Echec de suppression de la facture:' + data.responseText);  
                }  
            });     
 }

Etape 6 :

Dans Facture.cshtml, nous allons ajouter le code suivant pour afficher la liste des factures dans une table et les boutons qui appelleront les scripts Jquery/ajax précédents :

   
<div id="body">  
       <table id="ListFacture" class="table">  
            <thead>  
                <tr>  
                    <th>@Html.DisplayName("Identifiant Facture")</th>  

                    <th>@Html.DisplayName("Numéro Facture")</th>  
   
                    <th>@Html.DisplayName("Numéro commande")</th>  
   
                    <th>@Html.DisplayName("Nom Facture")</th>  
                </tr>  
            </thead>  
        </table>  
        <input id="btnGetAllFact" type="button" onclick="AllFactures()" value="Get_Data"/>
        <input id="btnGetFactById" type="button" onclick="GetFactureById()" value="Get_Fact_Id"/>
</div>

Conclusion:

Comme nous avons vu dans cet article, ASP.NET Web API est un framework simple à mettre en place mais assez puissant qui s’intègre facilement aux sites ASP.NET / ASP.NET MVC existant ou qui accompagne le développement des nouveaux projets web. Sa ressemblance avec du MVC facilite son utilisation et sa compréhension par les développeurs Web MVC.
Plus important encore, ce framework se base sur le concept de programmation RESTful lui permettant ainsi d’être accessible par une multitude de clients capables de passer des requêtes HTTP (réseaux sociaux, navigateurs, mobiles, etc.)