Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Le blog technique de Loïc Bar

Nouvelles technologies Web

Award

  • mvp

J'y serai...

Mes livres

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 :

image

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) :

  1. Clic droit sur votre projet
  2. Add new item
  3. Une nouvelle fenêtre apparait, sélectionnez "AJAX-enabled WCF Service" :
    image
  4. 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 :

image

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 :
image

La classe :
image

Pour pouvoir appeler ce service web avec JavaScript il faut ajouter un "ServiceReference" à votre ScriptManager :

image

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) :

image

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) :

image  

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 :

image

La fonction exec() utilise notre service web pour réculter les informations :

image 

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 :

image

initTemplate va rechercher le template et l'utilise pour afficher les données en respectant le template à l'aide de la méthode createInstance :

image

  data est un simple div que nous avons déclaré dans notre page :

image

Résultat :

image

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 :
Posted: jeudi 24 juillet 2008 11:55 par loicbar
Classé sous : , , , ,

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01