Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir ASP.NET Core 1.0

Utiliser l'API web avec Ajax

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à récupérer des données à la volée, grâce à des appels asynchrones, vers l'API créée précédemment.
04:38

Transcription

Nous disposons maintenant d'une API pour accéder aux informations d'un sorcier à tout moment. On va utiliser cette API pour faire un appel AJAX et voir comment on le fait en ASP.NET Core depuis notre page, pour consulter la fiche, pour avoir une fiche qui apparait lorsque l'on passe par dessus un article. Donc la fiche du sorcier qui est l'auteur d'une formule apparaitra lorsqu'on passe sur la formule. Alors, pour ça donc on va revenir sur notre feuille cshtml. C'est sur notre vue que va se faire tout le travail. Nous allons d'abord rajouter une fiche qui va s'afficher en absolu. Alors, on la pose ici. Elle a un style qui est caché au début. Absolu, pour qu'elle puisse être positionnée n'importe où. Couleur de fond blanche, pour effacer ce qu'il y a dessous. et avec une ombre, pour donner l'impression qu'elle est un peu au dessus du reste. Le z-index justement pour la faire passer au dessus. Et puis un identifiant fiche pour pouvoir la récupérer facilement dans notre code Javascript. Et puis nos articles, ici, doivent être marqués avec l'identifiant de l'auteur de l'article pour qu'on puisse facilement en trouver l'identifiant, et faire la requête auprès de notre API pour avoir la fiche de l'auteur correspondant. Donc on a maintenant tous les éléments dans le HTML pour faire notre code Javascript. Donc on va rajouter ici ce code. Première étape, récupérer les objets dont on a besoin pour travailler. Ici on récupère donc les articles qui ont un data-sorcier. Data tiret est une préconisation du W3C en HTML5. Toutes les données dont on a besoin en Javascript peuvent être signalées en attribut avec un data-. C'est ce que nous faisons, donc. Et puis on récupère la fiche. Pour chaque sortilège ici récupéré on va capter l'événement d'entrée de la souris sur le sortilège en question, sur l'article du sortilège. Et lorsque on a la souris qui rentre, qu'est-ce qu'on fait ? Première chose, on récupère l'attribut data-sorcier pour savoir sur quel sorcier requêter une fiche. Ensuite on fait la requête à notre API, l'URL de l'API, slash l'identifiant du sorcier. Et lorsque je reçois la réponse, à ce moment-là, je remplis la fiche. Alors, pour l'instant, on a que le nom, mais ça pourrait être une fiche bien plus fournie, avec pourquoi pas la photo même du sorcier. En tout cas, une référence vers la photo qu'on pourrait télécharger ensuite. Tout ça en Javascript, assez facilement. Et puis, le positionnement de notre fiche au dessus de l'article. Alors, pas en plein milieu, c'est juste à l'endroit du curseur. Alors ce clientX, c'est pas idéal, puisque sur certains navigateurs c'est pageX qui est définie. Ici voilà, pour des raisons de simplicité, on a pris le plus générique. Et puis on rend visible la fiche une fois que tout est établi. Il ne faut pas oublier aussi, lorsqu'on a terminé ça, de rendre invisible la fiche lorsque on quitte ce sortilège. C'est pour ça que l'on définit un événement leave. Voilà, on a défini notre requête AJAX ici avec le getJSON. Donc, $. ici on utilisait jquery mais on aurait pu aussi utiliser l'objet standard XML HTTP request. Sa récupération est un peu laborieuse. Donc comme de toute façon jquery est nécessaire à bootstrap et que Microsoft l'inclut de base dans le template qu'on a utilisé, on a utilisé l'objet $ qui est de jquery. Maintenant on peut tester. Donc maintenant, en passant sur notre fiche, on a bien la fiche Merlin qui apparait, et Circé sur la deuxième fiche. Et ici, voilà, clientX, clientY, n'aime pas trop le défilement. Donc on a bien notre fiche qui apparait, qui s'adapte à l'auteur de l'article. Les API web de façon plus générale sont bien sûr utiles pour, pourquoi pas, faire de l'AJAX, mais elles standardisent vraiment l'utilisation. Il y a aussi des moyens plus structurés de faire des applications entières, et notamment au travers de frameworks côté client, que sont AngularJS notamment, basés sur un modèle MVVM. Ici on a fait quelque chose de rapide, pour pouvoir exploiter notre API.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !