tag(s) Tags: Ajax, ASP.NET 2
lu 8710 fois
1 pages
Laurent Duveau
Un AJAX Progress à la GMail
Comment construire un indicateur "chargement en cours" AJAX comme celui de GMail ?
Par Laurent Duveau publié le 11/08/2007 à 11:40
 
Pour vos pages aspx, voyons comment réaliser un indicateur "chargement en cours" AJAX à la façon de celui présent dans GMail. C'est à dire fixé dans le coin haut/droit, indépendamment que l'utilisateur scrolle ou redimensionne sa fenêtre de navigateur.
 
Non pas ceclui-là...

Non pas ceclui-là...

 
 
Celui-ci !

Celui-ci !

 
Le framework ASP.NET AJAX dans sa version 1 apporte quelques contrôles serveur dont le fameux UpdatePanel (qui transforme les Postback d'une zone de votre page en appels AJAX asynchrones) et son complément le UpdateProgress qui n'affiche pas comme son nom l'indique une barre de progression mais un simple indicateur visuel de traitement AJAX, ce qui reste quand même bien pratique.
Je me souviens avoir proposé à l'équipe de développement de renommer le contrôle UpdateProgress en UpdateIndicator, mais c'était probablement trop tard...
Afin d'obtenir l'effet désiré (fixé dans le coin haut/droit) une première solution est d'utiliser tout simplement un style CSS sur le contrôle UpdateProgress. Pour cela on ajoute une classe css avec la propriété position:fixed.

Fichier aspx :

<asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress1" runat="server">

    <ProgressTemplate>

        <div class="TopRightFixed">

            <img src="Images/ajax-loader.gif" alt="Loading" />

            Chargement en cours...

        </div>

    </ProgressTemplate>

</asp:UpdateProgress>

Fichier css :

.TopRightFixed 

{

  top: 0px;

  right: 0px;   

  position:fixed;

}

On complète avec une couleur pour le fond, et le tour est joué.
 
Solution avec UpdateProgress et CSS

Solution avec UpdateProgress et CSS

 
On obtient le résultat attendu et on va même améliorer la version GMail avec un petit gif animé ! (voir www.ajaxload.info)
Cette solution est rapide et simple mais pose un problème : la propriété css fixed n'est pas reconnue par IE6.
Il y a bien des solutions à base de CSS hack et expressions (beurk) mais on peut obtenir une meilleure approche plus propre avec la magie de l'AJAX Control Toolkit via le AlwaysVisibleControl!
Voici le résultat final dans IE6 :
 
Version avec un AlwaysVisibleControl

Version avec un AlwaysVisibleControl

 
Voici le code à utiliser :

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

    <ContentTemplate>

        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Async Postback" />

        Heure du serveur: <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

    </ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress2" runat="server">

    <ProgressTemplate>

        <div class="Progress">

            <img src="Images/ajax-loader.gif" alt="Loading" />

            Chargement en cours...

        </div>

    </ProgressTemplate>

</asp:UpdateProgress>

<asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"

    TargetControlID="UpdateProgress2" HorizontalSide="Right" VerticalSide="Top" HorizontalOffset="0">

</asp:AlwaysVisibleControlExtender>

et le css associé :

 .Progress

 {

   background-color:#CF4342;

   color:White;

 }

 

.Progress img {

   vertical-align:middle;

   margin:2px;

 }

Comment fonctionne le AlwaysVisibleControl ?
Il utilise JavaScript pour vérifier le navigateur et sa version :
  • Si IE<=6 alors il utilise le css position:absolute et tire avantage du Framework d'Animation pour fixer le div.
  • Sinon (IE>=7, FF2, etc...) il utilise simplement le css position:fixed.
Voici la partie intéressante du code source du AlwaysVisibleControl :

 this._animate = (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7);

if (this._animate) {

  // Initialize the animations to use the actual properties

  this._animation = new AjaxControlToolkit.Animation.MoveAnimation(

      element, this._scrollEffectDuration, 25, 0, 0, false, 'px');

 

  // Make the control use absolute positioning to hover

  // appropriately and move it to its new home

  element.style.position = 'absolute';

} else {

  // Make the control use fixed positioning to keep it from moving

  // while the content behind it slides around

  element.style.position = 'fixed';

}

Pour finir voici d'autres implémentations de AJAX Progress :
A noter également dans le MSDN de juillet 2007 Dino Esposito a écrit un excellent article pour réaliser un "vrai" AJAX UpdateProgress :
Context-Sensitive Feedback with AJAX

Par la suite dans le MSDN de aout 2007 il a complété son PMF (Progress Monitor Framework) avec un article sur un "vrai" contrôle d'annulation de traitement server side (car le cancel par défaut de l'UpdatePanel ne fait que mettre fin à la communication asynchone) :
Canceling Server Tasks with ASP.NET AJAX

2 articles hautement recommandés pour ceux qui souhaitent pallier auxfaiblesses de ASP.NET AJAX.

 Commentaire - Un AJAX Progress à la GMail 

 Dernières Publications      

Chapitre III : Sync Services for ADO.NET et WCF
   Suite des deux premiers chapitres sur la synchronisation avec Sync Services for ADO.NET, voici un nouvel article impliquant WCF dans une synchronisation déconnectée.
Requêtes dynamiques sur les IEnumerable
  A partir d'un exemple fourni avec Visual Studio 2008, initialement prévu pour tout objet Queryable, nous allons présenter comment en ajoutant très peu de code rendre disponible aux IEnumerable un requêteur dynamique.
par Frédéric Mélantois posté le 24/04/2008 à 15:03, lu 692 fois, #0
Développer une visionneuse d'images avec WPF et WCF
  Au travers de cet article, nous allons découvrir comment mettre en place une visionneuse d'images, grâce aux technologies WPF et WCF.
par Thomas Lebrun posté le 22/04/2008 à 22:46, lu 824 fois, #2
LINQRoleProvider
  L'objectif de cet article est d'implémenter un fournisseur de rôles ASP.NET personnalisé à l'aide de LINQ To Sql tout en faisant un tour d'horizons de la syntaxe des requêtes LINQ.
par Antoine Griffard posté le 13/04/2008 à 22:18, lu 405 fois, #0
WCF : Transfert de messages streamés et sécurisation personnalisée
  Je poursuis ma série d'articles sur WCF en vous présentant cette fois-ci le mode de communication Streamé. Histoire d'aller un petit peu plus loin, j'ai protégé le service de manière personnalisée et utilisé un binding très courant : BasicHttpBinding
par Frédéric Colin posté le 07/04/2008 à 08:12, lu 796 fois, #0
Appel de fonctions JavaScript depuis Silverlight 2
  Voici un exemple de code pour appeler une fonction JavaScript depuis le code behind de Silverlight 2, avec ou sans paramètres, et aussi comment appeler une fonction Js anonyme inline.
par Laurent Duveau posté le 06/04/2008 à 21:57, lu 1183 fois, #0
Tags: Silverlight
Lister les fichiers d'un répertoire sous Vista
  Obtenez très facilement la liste des fichiers d'un répertoire sous Vista, afin de la copier dans un document Word ou un email par exemple.
par Laurent Duveau posté le 02/04/2008 à 06:31, lu 1409 fois, #0
Tags: Vista
A la découverte de BizTalk Server 2006 2/3
  Développer une orchestration pour BizTalk Server 2006 R2
par Kader Yildirim posté le 31/03/2008 à 05:22, lu 412 fois, #0

 Dernières Actualités      

NDepend pour l'analyse statique de code .NET
  Pour ceux qui ne connaissent pas NDepend , il s’agit d’un outil d’analyse statique de code .NET qui permet de remonter des informations à toute une équipe de développement. NDepend aide à travailler sur...
Tags: Outils
Microsoft met à disposition son IoC Container Unity 1.0 en version finale
  Microsoft met à disposition la version 1.0 de son IoC container Unity, sur CodePlex sous la forme d'un Application Block des Enterprise Library. Si vous voulez en savoir plus sur le sujet en .NET je vous...
Tags: Application Block
Microsoft MVP (Most Valuable Professional) sur Tech Head Brothers
  Je voudrais féliciter les nouveaux Microsoft MVP (Most Valuable Professional) du mois d'Avril 2008 qui publient sur Tech Head Brothers! Sans les auteurs le site ne serait rien. Sébastien Pertus - MVP SQL...
Les Webcasts des Microsoft TechDays 2008 sont en ligne
  Si vous avez participé ou non au Microsoft TechDays 2008 vous avez certainement manqué certaines présentation qui vous intéressaient. Voilà enfin votre chance de pouvoir suivre ces présentations en ligne...
Rapide résumé de la conférence MIX08
  La conférence MIX08 s'est achevée la semaine dernière avec peu d'annonces de nouvelles technologies (DeepZoom) mais surtout des releases de produits (et c'est pas un mal...). Nous avons donc eu droit aux...
Les sessions du MIX 08
  Si malheureusement vous ne participez pas au MIX 08 à Las Vegas, vous pouvez toujours visionner les sessions avec un jour de décalage. A voir sur Sessions Visit Mix...
Tags: Expression, Windows Presentation Foundation, ASP.NET MVC, Ajax, ASP.NET 2, ASP.NET, Windows Communication Foundation , Web Services, Silverlight, WPF