ASP.NET AJAX 4.0
Microsoft en avait déjà parlé dans un document qu'ils avaient mis à disposition des développeurs sur CodePlex. J'avais d'ailleurs entamé l'écriture d'un article de projection mais dans l'informatique ça va tellement vite qu'on a pas le temps de finir un article qu'il est déjà dépassé.
Ce nouveau Framework AJAX est actuellement en preview. Vous pouvez vous le procurer sur CodePlex.
Note : ce nouveau framework est actuellement fonctionnel avec les navigateurs suivants :
- Internet Explorer 7.0.5730
- Firefox 2.0.0.16 and 3.0
- Safari 3.1.2
- Opera 9.51
Installation
La première chose à faire est de télécharger les deux fichiers JavaScript sur CodePlex. Lorsque ceci est fait, nous allons devoir ajouter ces scripts à notre application web. Vous pouvez procéder de deux manières :
- Ajouter la référence à la librairie JavaScript dans des balises "script".
- Ajouter une référence dans le ScriptManager de votre page (si vous êtes en ASP.NET).
C'est la dernière solution qui a été retenue pour notre exemple :
Si vous exécutez la page dans votre navigateur (clic droit sur le fichier -> view in browser) vous verrez que la référence à bien été ajoutée :
<script src="Script/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
Vous pouvez après cela commencer à utiliser le Framework.
Un premier exemple
Dans les readme, il n'y a pas de réel exemple d'utilisation. Juste une description de toutes les fonctionnalités (que vous retrouverez dans un prochain article). Je préfére directement vous montrer un exemple pratique qui utilise cette nouvelle librarie.
Nous allons utiliser AJAX pour créer un listing d'utilisateurs. La première chose à faire est de créer un service web qui nous permettra d'aller chercher nos utilisateurs et qui nous enverra le résultat formaté en JSON.
Pour cela, nous allons utiliser WCF (Windows Communication Foundation) :
- Clic droit sur votre projet
- Add new item
- Une nouvelle fenêtre apparait, sélectionnez "AJAX-enabled WCF Service" :
- Laissez le nom par défaut (Service) et cliquez sur Add.
Visual Studio vous a normalement généré deux fichiers :
- Service.cs dans App_Code. C'est dans ce fichier que nous définirons notre service web.
- Service.svc qui est le fichier qui représente le web service et qui fait référence à Service.cs
Notez que Visual Studio à également généré toutes la configuration du service dans le Web.Config :
Vous n'avez rien besoin de toucher.
Dans Service.cs, nous allons déclarer une méthode qui ira chercher nos utilisateurs ainsi qu'une classe permettant de représenter un utilisateur.
La méthode :
La classe :
Pour pouvoir appeler ce service web avec JavaScript il faut ajouter un "ServiceReference" à votre ScriptManager :
Ensuite, nous devons définir un template qui sera utilisé pour afficher chaque élément. Cela ne devrait pas vous choquez car vous définissiez déjà des templates lorsque vous utilisiez le repeater par exemple.
Vous devez déclarer ce template dans une balise div en lui attribuant un identifiant (id) :
Vous voyez apparaître des éléments un peu étrange comme {{ Prenom }} ou encore <!--* if... *-->
Il s'agit en fait de tags qui seront compris pas le Framework ASP.NET AJAX 4.0. {{ Prenom }} est équivalent à <%# Eval("Prenom") %> que vous utilisiez dans votre reapter. Pour <!--* c'est la même chose qu'un bloc de code.
Naturellement, ce div doit être caché sur la page. C'est pour cela que nous lui avons appliqué une classe CSS (sys-template) :
Maintenant que le template est défini nous pouvons traiter le chargement des données et les afficher.
Nous allons ajouter un bouton à notre page. Sur le clic du bouton, nous irons rechercher les données à l'aide de notre service web :
La fonction exec() utilise notre service web pour réculter les informations :
Lorsqu'il a fini de charger les utilisateurs, la fonction onComplete est appelée. C'est cette fonction qui va parcourir les résultats et appelée la fonction initTemplateValues pour chaque utilisateur :
initTemplate va rechercher le template et l'utilise pour afficher les données en respectant le template à l'aide de la méthode createInstance :
data est un simple div que nous avons déclaré dans notre page :
Résultat :
Téléchargement de la solution sur mon espace skydrive :
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
