Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

19 mai 2014 1 19 /05 /mai /2014 22:43

 

III jQuery et Web Api

Si on commence avec un projet vide et que l’on désire ensuite utiliser Web API, ajouter :

wb6.png

(toujours pareil)

 

       <script> 

         $(function () {

        // code ici

         });

        </script>

 

Note on peut réduire l’url « http://localhost:12681/api/persons » à  « /api/persons" si on accède au contrôleur depuis la même application

1-Get

Avec $.ajax

 

              // Méthode permettant d'afficher une liste de personnes dans la div "container"              

               function displayPersons(persons) {                 

                        var html = "<hr />";

                        $.each(persons, function (index, person) {

                            html += "<strong>" + person.PersonID + "</strong>" + person.PersonFullName + "<br/>";

                        })

                        $("#container").html(html);

                }

 

               

                $("#btGet").click(function (evt) {

                    var options = {

                        url: "http://localhost:12681/api/persons",

                        type: "GET",

                        success: function (persons) { displayPersons(persons); },

                        error: function (jqXHR, status, err) { alert(status + ", " + err); }

                    };

                    //

                    $.ajax(options);

                });

 

Avec $.getJSON

 

                $("#btGet").click(function (evt) {

                    var url = url = "http://localhost:12681/api/persons";

                    $.getJSON(url, function (persons) { displayPersons(persons) });

                });

 

2-GetOne(GET)

Avec $.ajax

 

$("#btGetOne").click(function (evt) {

 

                    var options = {

                        url: "http://localhost:12681/api/persons/" + $("#tbID").val(),

                        type: "GET",

                        success: function (person) { $("#container").html("<strong>" + person.PersonFullName + "</strong>"); },

                        error: function (jqXHR, status, err) { alert(status + ", " + err); }

                    };

                    $.ajax(options);

                   

                })

 

Avec $.getJSON

 

$("#btGetOne").click(function (evt) {

                    $.getJSON("http://localhost:12681/api/persons/" + $("#tbID").val(),function (person) {

                      $("#container").html("<strong>" + person.PersonFullName + "</strong>");

                    })

                     .fail(

                        function (xhr, textStatus, err) {

                            $("#container").html(status);

                        });

                   

                })

 

3-Add (POST)

 

$("#btAdd").click(function (evt) {

 

                var person ={

                    personID:$("#tbID").val(),

                    personFullName:$("#tbName").val()

                };

 

                var options = {

                    url: "http://localhost:12681/api/persons/",

                    type: "POST",

                    contentType: 'application/json; charset=utf-8',

                    data: JSON.stringify(person),

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            })

 

 

4-Update(PUT)

 

  $("#btUpdate").click(function (evt) {

 

                var person ={

                    personID:$("#tbID").val(),

                    personFullName:$("#tbName").val()

                };

 

                var options = {

                    url: "http://localhost:12681/api/persons/",

                    type: "PUT",

                    contentType: 'application/json; charset=utf-8',

                    data: JSON.stringify(person),

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            })

 

 

5-Delete (DELETE)

 

$("#btDelete").click(function (evt) {

                var options = {

                    url: "http://localhost:12681/api/persons/" + $("#tbID").val(),

                    type: "DELETE",

                    success: function () { displayPersons(); },

                    error: function (jqXHR, status, err) { $("#container").html(status); }

                };

 

                $.ajax(options);

            }) 

 

 

Le contrôleur « classique »

 wb7.png

Partager cet article

Repost 0
Published by Romagny13 - dans ASP.NET MVC
commenter cet article

commentaires