IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

AJAX jQuery avec JSON Result dans ASP.NET MVC [AJAX]


Sujet :

jQuery

  1. #1
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Conseiller technique ELec
    Inscrit en
    janvier 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Conseiller technique ELec
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 495
    Points : 313
    Points
    313
    Par défaut AJAX jQuery avec JSON Result dans ASP.NET MVC
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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..

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 486
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 486
    Points : 14 462
    Points
    14 462
    Par défaut
    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.

  3. #3
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Conseiller technique ELec
    Inscrit en
    janvier 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Conseiller technique ELec
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 495
    Points : 313
    Points
    313
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
       $('.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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    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.

  5. #5
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Conseiller technique ELec
    Inscrit en
    janvier 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Conseiller technique ELec
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 495
    Points : 313
    Points
    313
    Par défaut
    Bonjour,
    Merci noSmoking.....
    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

  6. #6
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Conseiller technique ELec
    Inscrit en
    janvier 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Conseiller technique ELec
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 495
    Points : 313
    Points
    313
    Par défaut jQuery avec JSON Result dans ASP.NET MVC
    Bonjour,
    j'ai besoin d'explication pour ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :

    <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

  7. #7
    Membre du Club Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    novembre 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : novembre 2002
    Messages : 39
    Points : 65
    Points
    65
    Par défaut
    Bonsoir,

    Et comme ça ?

    Code JQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}"/>`);

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    Bonjour,
    Avez-vous une explication SVP ?
    Tu fermes ta balise <area> trop tôt !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $("#MapWorld").append('<area>' +  'shape="'
    //       fin balise en trop ↑ ici
    regarde de près le code fourni par ASCIIDEFOND.

  9. #9
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Conseiller technique ELec
    Inscrit en
    janvier 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Conseiller technique ELec
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 495
    Points : 313
    Points
    313
    Par défaut
    Bonjour,
    merci à vous deux.
    Super ligne codée..., merci ASCIIDEFOND.
    Comment ai-je pu fermer cette balise....area ...

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 )

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Récupérer cookie dans asp.net mvc 4
    Par Emy1992 dans le forum ASP.NET MVC
    Réponses: 0
    Dernier message: 31/07/2013, 17h38
  2. probleme Iframe dans Asp.net MVC
    Par Loic7800 dans le forum ASP.NET
    Réponses: 1
    Dernier message: 02/05/2013, 22h14
  3. relation many to many dans ASP.Net mvc
    Par aitBaamran dans le forum ASP.NET
    Réponses: 0
    Dernier message: 14/12/2012, 23h04
  4. utilisation de ckeditor dans asp.net mvc avec razor
    Par thor76160 dans le forum ASP.NET MVC
    Réponses: 0
    Dernier message: 24/12/2011, 11h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo