AJAX jQuery avec JSON Result dans ASP.NET MVC

Version imprimable

Bonjour à vous,

Voici un extrait de code qui fonctionne très bien depuis (MVC c#)
Je me sers d'un exemple en me servant de la base de données Northwind.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <script src="~/Scripts/jquery-3.6.0.min.js"></script>
 
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $("#CategoryType").change(function () {
                var selectedItem = $(this).val();
                $("#tblProducts tbody tr").remove();
                    $.ajax({
                            type: 'get',
                            url: '@Url.Action("RetourListe")',
                        dataType: 'json',
                            data: { id: selectedItem },
                        success: function (data) {
                            var items = '';
                            $.each(data, function (i, item) {
 
                                var rows = "<tr>"
                                + "<td>" + item.ProductID + "</td>"
                                    + "<td>" + item.ProductName + "</td>"
                                + "<td>" + item.QuantityPerUnit + "</td>"
                                + "<td>" + item.UnitPrice + "</td>"
                                + "<td>" + item.UnitsInStock + "</td>"
                                + "<td>" + item.ReorderLevel + "</td>"
                                + "</tr>";
                                $('#tblProducts tbody').append(rows);
 
                             });
 
                        },
                        error: function (ex) {
                            var r = jQuery.parseJSON(response.responseText);
                            alert("Message: " + r.Message);
                            alert("StackTrace: " + r.StackTrace);
                            alert("ExceptionType: " + r.ExceptionType);
                        }
                    });
               return false;
            })
        });
 
    </script>

J'obtiens un tableau du plus belle effet, mais cependant, lorsque je vérifie le code source de la page j'ai uniquement ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
   <table id="tblProducts" class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ProductID</th>
                    <th scope="col">ProductName</th>
                    <th scope="col">QuantityPerUnit</th>
                    <th scope="col">UnitPrice</th>
                    <th scope="col">UnitsInStock</th>
                    <th scope="col">ReorderLevel</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

Il n'y à rien dans tbody !!!
Est-ce normal, y a t'il moyen de l'afficher en "dur" pour voir apparaître le résultat dans le code source ?

Merci pour votre réponse..

08/05/2022, 23h51
mathieu

dans l'affichage du code source, vous verrez seulement la réponse de la requête http.
pour voir les balises html après modification par le code javascript, vous pouvez utiliser la console de développement de votre navigateur.
09/05/2022, 08h12
BRUNO71

Bonjour,

Merci Mathieu pour ta réponse..

Je n'en vois pas plus, mais je travail en localhost depuis VisualStudio !!! Peut-être que c'est normal.

J'ai posé cette question car que je travail sur une carte cliquable avec (maphilight) et selon cette ligne de code :

Code:

$('.map').maphilight({ alwaysOn: true });

, je devrais voir directement les couleurs apparaître !
Il y a logiquement plusieurs lignes, mais je n'ai pas de résultat....donc je doute de mon code !!
Merci
09/05/2022, 10h12
NoSmoking

Bonjour,

Citation:

Envoyé par BRUNO71

Est-ce normal, y a t'il moyen de l'afficher en "dur" pour voir apparaître le résultat dans le code source ?

il te faut utiliser les outils de développement, clic droit sur la <table> et choisir Inspecter, tu verras réellement le DOM que le navigateur affiche.
09/05/2022, 11h32
BRUNO71

Bonjour,
Merci noSmoking.....:furieux:
Donc mon code map et area fonctionne bien....car effectivement je vois le résultat.

maphilight ne fonctionne pas, mais bon.....je travail dessus ça devrait aller..
Sinon je poserais une autre question...
Merci à vous

jQuery avec JSON Result dans ASP.NET MVC

Bonjour,
j'ai besoin d'explication pour ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  $("#MapWorld area").remove();
                $.ajax({
                    type: 'get',
                    url: '@Url.Action("AffichageShape")',
                    async: false,
                    dataType: "json",
                    data: { Mois: SelectMois, Temp: SelectTemp },
                    success: function (data) {
                        var items = '';
                        $.each(data, function (i, item) {
                            // row 95
                            $("#MapWorld").append('<area>' +  'shape="' + item.ShapeDest + '"' +' coords="' + item.CoordsDest + '"' + ' href="#"' + ' alt="' + item.Destination + '"' + ' title="' + item.Destination + '"' + '/>');
 
                        });
 
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(chr.responseText);
                    }
                });

L'objectif étant de recevoir plusieurs points AREA dans une balise MAP....(j'ai raccourcis les coordonnées pour l'explication)

Après vérification dans la console, j'obtiens le résultat sous forme de texte comme ceci :

Citation:

<area>
"shape="poly" coords="5088,3415,5108 blabla etc" href="#" alt="ici texte" title="ici texte">"
<area>
"shape="poly" coords="5088,3415,5108 blabla etc" href="#" alt="ici texte" title="ici texte">"

C'est à dire que la balise <AREA> est seule et que :
du mot (shape) à la balise de fin (>)....c'est entre deux quotes ... "" !

J'ai également écrit comme ceci ('<area> shape="' + etc....Mais toujours pareil.

J'ai modifié le DataType ( text, html ) mais rien ne change.

Avez-vous une explication SVP ?

Merci

Bonsoir,

Et comme ça ?

Code:

1
2
 
$('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}"/>`);

12/05/2022, 09h38
NoSmoking
Bonjour,

Citation:

Avez-vous une explication SVP ?

Tu fermes ta balise <area> trop tôt !
Code:

1 2 $("#MapWorld").append('<area>' + 'shape="' // fin balise en trop ↑ ici
regarde de près le code fourni par ASCIIDEFOND.
12/05/2022, 10h13
BRUNO71

Bonjour,
merci à vous deux.
Super ligne codée..., merci ASCIIDEFOND.
Comment ai-je pu fermer cette balise....area ...:arf:

Citation:

Super ligne codée.

pendant que l'on y est, une façon de faire, peu usitée, mais élégante et lisible, on voit tout de suite ce que l'on fait :
Code:

1 2 3 4 5 6 7 8 $("<area>", { // ! il faut mettre le balisage complet "shape": item.ShapeDest, "coords": item.CoordsDest, "href": "#", "alt": item.Destination, "title": item.Destination }) .appendTo("#MapWorld");
Voir la documentation : jQuery( html, attributes )