Guillaume Lacasa
L’AjaxHelper de ASP.NET MVC
Nous continuons notre découverte de MVC, avec au programme cette fois une nouvelle manière de faire de l’Ajax spécifique au framework ASP.NET MVC.
Par Guillaume Lacasa publié le 21/10/2009 à 20:46, lu 1574 fois, 6 pages
commentaire(s) 0 commentaire(s) tag(s)Tags: ASP.NET MVC, Ajax
 5 | Traitement de la réponse : AjaxOptions
Téléchargez le code source - 292 Kb
Traitement de la réponse : AjaxOptions
Nous avons vu jusqu’ici comment effectuer des appels Ajax, cependant nous n’avons pas encore traité les réponses du serveur. Si vous essayez de mettre en place un lien ou formulaire Ajax, le code serveur sera bien appelé, cependant l’utilisateur n’a aucun retour et ne se rendra pas compte que quelque chose s’est passé.
Il va donc nous falloir avertir l’utilisateur qu’on a effectué un appel serveur, et en afficher la réponse. Pour cela, on va utiliser les AjaxOptions qui vont nous permettre de définir le comportement du navigateur.
Injection du HTML dans la page
Le plus simple pour afficher la réponse du serveur et d’injecter directement le code html reçu dans la page. Pour cela nous avons les options suivantes :
  • UpdateTargetId : Il s’agit de l’identifiant de l’élément HTML qui va contenir la réponse du serveur. Le fonctionnement est analogue à celui de l’UpdatePanel : le serveur va retourner du code HTML qui va directement être injecté dans notre page.
  • LoadingElementId : Si l’option UpdateTargetId permet un fonctionnement similaire à l’UpdatePanel, cette option est l’équivalent de l’UpdateProgress : un élément de notre page, non affiché au chargement, apparaitra au début de l’appel Ajax afin de faire patienter l’utilisateur.
Par exemple, on peut imaginer écrire un moteur de recherche en Ajax de la manière suivante :

< div id="searchForm">

  <% using (Ajax.BeginForm("Search",

        new AjaxOptions() {

            UpdateTargetId = "searchResult",

            LoadingElementId = "searchWait" }))

    { %>

  <input type="text" name="name" />

  <input type="submit" value="Chercher" />

  <%} %>

</ div >

< div id="searchWait" style="display: none">

  Veuillez patienter...

</ div >

< div id="searchResult">

  <%--Le résultat de la recherche apparaitra ici--%>

</ div >

Nous avons ici 3 éléments DIV : le premier qui contient le formulaire Ajax, le second est un élément masqué, qui apparaitra le temps que la recherche Ajax se fasse, le dernier affichera les résultats.
 
/content/68c6665e-1208-4073-94f0-a95e43e2f2b1/image3.png
 
Ces deux options permettent déjà de couvrir énormément de cas d’utilisation d’Ajax, et ceci de manière très simple, mais ne suffiront pas à tous les utilisateurs, nous avons donc d’autres options avancées :
  • Confirm : affiche une boite de dialogue, qui demande à l’utilisateur une confirmation avant de faire l’appel Ajax.
  • InsertionMode : permet de définir comment le code HTML récupéré depuis le serveur doit être inséré (dans l’élément défini par UpdateTargetId). Il y a 3 valeurs possibles :
  • Replace (par défaut) : remplace le contenu de l’élément HTML
  • InsertBefore : insère avant le contenu de l’élément HTML
  • InsertAfter : insère après le contenu de l’élément HTML
  • HttpMethod : permet de définir la méthode http à utiliser (GET ou POST). Il est recommandé (aussi bien en Ajax qu’avec des requêtes http classiques) d’utiliser la méthode POST lorsque la requête effectue des modifications sur le serveur (ajout d’informations, suppression, …), la méthode GET n’effectuant que de la lecture.
  • Url : Permet de spécifier l’URL à laquelle la requête Ajax doit être envoyée.
On aura besoin de ces options par exemple dans le cas d’une suppression :

< ul >

<% List<Product> result = (List<Product>)ViewData["result"];

   foreach (Product p in result)

   {

%>

    <li id="<%= p.ProductID.ToString() %>">

        <%= p.Name %>

        -

        <%= Ajax.ActionLink(

               "Supprimer",

               "Delete",

               new {id = p.ProductID},

               new AjaxOptions(){

                   HttpMethod="POST",

                   Confirm="Voulez-vous vraiment supprimer cet objet ?",

                   UpdateTargetId=p.ProductID.ToString()

               }%>

    </li>

<% } %>

</ ul >

On utilise dans cet exemple la méthode POST pour effectuer la suppression (l’utilisation de la méthode GET, par défaut, pourrait poser problème si, par exemple, un bot d’un moteur de recherche passait sur le site et suivait tous les liens). Un message de confirmation est affiché à l’utilisateur avant que la suppression ne soit effectivement envoyée.
De plus, j’ai utilisé l’identifiant du produit comme identifiant de l’élément html LI contenant le produit, afin de le définir comme élément à mettre à jour. Ainsi, le serveur lorsqu’il aura effectué la suppression enverra un texte « l’élément a été supprimé », qui prendra la place sur la page de l’élément qui n’existe plus.
 
/content/68c6665e-1208-4073-94f0-a95e43e2f2b1/image4.png
 
Appel de fonctions JavaScript
Pour aller plus loin, il est aussi possible d’appeler ses fonctions JavaScript. Pour cela il suffit de donner le nom de la fonction JavaScript à appeler aux options suivantes :
  • OnBegin : la fonction JavaScript est appelée au moment de l’envoi de la requête Ajax
  • OnComplete : la fonction est appelée lorsque la réponse du serveur est reçue, mais avant que la page ne soit mise à jour (le OnComplete est appelé avant soit le OnSuccess, soit le OnFailure). Il est possible d’annuler la mise à jour de la page, si la fonction retourne false.
  • OnFailure : la fonction JavaScript est appelée si l’appel Ajax a échoué
  • OnSuccess : la fonction est appelée après la mise à jour de la page
Cette fois, l’appel aux fonctions JavaScript nous donne une totale liberté : on n’est plus limité par ce qui est prévu par le framework, tout ce qui est possible en JavaScript est réalisable. On pourrait imaginer par exemple l’utilisation de jQuery afin d’effectuer des animations, plus agréables que des simples apparitions/disparitions des éléments HTML.
 
» Démarrer une discussion