Utilisation de jQuery pour consommer un Webservice ASP.NET JSON

Qu'est ce que JSON ?

JSON (Javascript Object Notation) est un format d'échange de données simple, rapide, facile à lire et à écrire pour l'humain ou la machine. L'utilisation d'un fichier JSON sert principalement à échanger des valeurs avec le serveur. Ainsi, le format d'échange de données JSON vous offre une alternative simple, rapide et efficace.

JSON est construit en deux structures :

  • Collection de nom / pair de valeur (enregistrement, objet, dictionnaire, ..)
  • Liste de valeurs (Liste, vecteur une séquence de valeur)
  • Exemple JSON:

    var jsonPersonne = { Personne: { Nom: "Billy Pépin", Genre: "Masculin", Age: 29 } };
    

    Personne : Objet avec propriété Nom, Genre et Age. jsonPersonne = Objet JSON

    Exemple Array (séquence):

    var jsonCouleur = ["Rouge", "Bleu", "Jaune", "Noir"];
    

    Exemple simple ASP.NET - JQuery

    Dans l'exemple suivant, nous allons voir comment il est simple de consommer un web service JSON à l'aide de ASP.NET.

    Premièrement, créer une nouvelle application ASP.NET 4.0 à l'aide de Visual Studio 2010 (Ou version antérieure).

    Création d'une classe simple

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace ASP.NET4_JSON
    {
        public class Employe
        {
            public string Prenom;
            public string Nom;
            public int Age;
            public string Genre;
            public string Pays;
        }
    }
    

    Dans cet exemple, j'utilise une classe "Employe". La classe permet d'afficher une liste de personne à l'aide d'un Web Service JSON.

    Création du Web Service JSON

    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using System.Web.Script.Services;
    using System.Collections.Generic;
    using System.Linq;
    using ASP.NET4_JSON;
    
    /// 
    /// Summary description for CarService
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class EmployeService : WebService
    {
        List Employes = new List
        {
            new Employe{ Prenom = "Prénom 1", Nom = "Nom 1", Age = 20, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 2", Nom = "Nom 2", Age = 22, Genre = "Féminin", Pays = "USA" },
            new Employe{ Prenom = "Prénom 3", Nom = "Nom 3", Age = 21, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 4", Nom = "Nom 4", Age = 30, Genre = "Féminin", Pays = "USA" },
            new Employe{ Prenom = "Prénom 5", Nom = "Nom 5", Age = 24, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 6", Nom = "Nom 6", Age = 22, Genre = "Masculin", Pays = "France" },
            new Employe{ Prenom = "Prénom 7", Nom = "Nom 7", Age = 50, Genre = "Féminin", Pays = "Mexique" },
            new Employe{ Prenom = "Prénom 8", Nom = "Nom 8", Age = 28, Genre = "Masculin", Pays = "France" },
            new Employe{ Prenom = "Prénom 9", Nom = "Nom 9", Age = 31, Genre = "Masculin", Pays = "Chine" },
            new Employe{ Prenom = "Prénom 10", Nom = "Nom 10", Age = 39, Genre = "Féminin", Pays = "France" },
            new Employe{ Prenom = "Prénom 11", Nom = "Nom 11", Age = 35, Genre = "Masculin", Pays = "Canada" }
        };
    
        [WebMethod]
        public List ListerTous()
        {
            return Employes;
        }
    
        [WebMethod]
        public List ListerParPays(string pays)
        {
            var employes = from e in Employes
                        where e.Pays.ToLower() == pays.ToLower()
                        select e;
    
            return employes.ToList();
        }
    }
    

    Il sera possible de questonner le Web Service selon 2 méthodes.

    • Liste de tous les employés
    • Liste des employés par pays

    Code Javascript

        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    
        <script type="text/javascript">
            $(function () 
            {
                $('#Button1').click(AfficherEmployes);
            });
    
            $(function () {
                $('#Button2').click(AfficherEmployesParPays);
            });
    
            function AfficherEmployes() {
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ListerTous",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var employes = response.d;
                        $('#contenu1').empty();
                        $.each(employes, function (index, employe) {
                            $('#contenu1').append('<p><strong>' + employe.Prenom + ' ' +
                                        employe.Nom + '</strong><br /> Age: ' +
                                        employe.Age + '<br />Genre: ' +
                                        employe.Genre + '<br />Pays: ' +
                                        employe.Pays + '</p>');
                        });
                    },
                    failure: function (msg) {
                        $('#contenu1').text(msg);
                    }
                });
            }
    
            function AfficherEmployesParPays() {
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ListerParPays",
                    data: "{pays: '" + $('#<%= tbPays.ClientID %>').val() + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var employes = response.d;
                        $('#contenu2').empty();
                        $.each(employes, function (index, employe) {
                            $('#contenu2').append('<p><strong>' + employe.Prenom + ' ' +
                                        employe.Nom + '</strong><br /> Age: ' +
                                        employe.Age + '<br />Genre: ' +
                                        employe.Genre + '<br />Pays: ' +
                                        employe.Pays + '</p>');
                        });
                    },
                    failure: function (msg) {
                        $('#contenu2').text(msg);
                    }
                });
            }
        </script>
    

    Code HTML

        <h2>Utilisation JQuery et JSON</h2>
    
        <div style="float:left; width:300px;">
            <h2>Afficher les employés</h2>
            <input type="button" id="Button1" value="Afficher" />
            <div id="contenu1"></div>
        </div>
    
        <div style="float:left; width:300px;">
            <h2>Afficher les employés par pays</h2>
            <asp:TextBox runat="server" ID="tbPays"></asp:TextBox>
            <input type="button" id="Button2" value="Afficher" />
            <div id="contenu2"></div>
        </div>
    


    Télécharger l'exemple ci-haut (Visual Studio 2010 - ASP.NET 4.0).

    ASP.NET4-JSON.zip (76,51 kb)

     

    À propos

    Je suis un développeur web. Je m'intéresse également à l'optimisation de site pour les moteurs de recherche (SEO). Sur ce site, vous trouverez des trucs, conseils, tutoriels pour vous aider à développer  des applications web à l'aide de : ASP.NET, ASP.NET MVC, jQuery, Javascript et plus. De plus, je vous tiendrai au courant des nouveautés sur le web.

    Pages