Sur un site web, il est naturel qu’un changement de page prenne un certain temps, qui peut varier en fonction de différents paramètres, et généralement le résultat visuel est sensiblement différent. Dans le cas d’une application web et la différence entre une page et la confirmation d’une action, potentiellement longue, le constat est différent. La différence visuelle entre ces deux états peut être très réduite et l’indicateur de chargement du navigateur peut être visuellement inadapté aux utilisateurs finaux. Nous allons voir dans cet article comment résoudre cette problématique en ASP.NET WebForm pour les échanges synchrones et asynchrones.

Cas d’exemple

Prenons l’exemple du template de base lors de la création d’un projet WebForm dans Visual Studio 2013.

projet WebForm

Ajoutons lui un bouton “Heavy loading process”.

<asp:LinkButton runat="server" ID="lbtnLoader" CssClass="btn btn-primary btn-lg"
   OnClick="lbtnLoader_Click">Heavy loading process</asp:LinkButton>

Enfin, il suffit de construire l’évènement correspondant pour que le traitement affiche un temps de chargement de disons 10 secondes.

protected void lbtnLoader_Click(object sender, EventArgs e)   
{    
   System.Threading.Thread.Sleep(10000);    
}

Si l’on clique sur le bouton en question, les non techniciens pourront légitimement demander à ce que le feedback visuel soit plus important.

feedback visuel

PostBack Synchrone

Dans le cas d’une demande synchrone, l’utilisation d’un GIF animé est impossible. En effet, le navigateur arrête d’analyser tout ce qui est visuel dés lors qu’il reçoit la demande d’un changement de page. C’est ce qui se produit lors d’une redirection vers une autre page ou lors d’un PostBack synchrone.

Il est tout de même possible, grâce à l‘évènement window.onbeforeunload, d’afficher un loader personnalisé.

window.addEventListener("beforeunload", function (e) {   
   var modal = document.createElement("div");    
   modal.className = "modal-backdrop fade in"    
   modal.innerHTML = '&nbsp;';    
   var loader = document.createElement("div");    
   loader.className = "loader"    
   loader.innerHTML = '<i class="glyphicon glyphicon-time"></i><br/>Loading in progress<br/>';    
   document.body.appendChild(modal);    
   document.body.appendChild(loader);    
   return null;    
});

Avec un peu de css voila le résultat.

.loader {   
   position: fixed;    
   z-index: 2500;    
   left: 50%;    
   width: 120px;    
   margin-left: -60px;    
   height: 150px;    
   top: 200px;    
   background-color: #ccc;    
   color: white;    
   text-align: center;    
   padding:10px 0;    
   border-radius:6px;    
} 
   .loader i {   
   font-size: 60px;    
   }
loading in progress

PostBack Asynchrone

Pour ce qui est de l’utilisation de PostBack Asynchrones, via un UpdatePanel, la solution est différente. Il faut utiliser l’objet Sys.WebForms.PageRequestManager.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);   
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
function BeginRequestHandler(sender, args) {   
   var modal = document.createElement("div");    
   modal.className = "modal-backdrop fade in"    
   modal.innerHTML = '&nbsp;';    
   var loader = document.createElement("div");    
   loader.className = "loader"    
   loader.innerHTML = '<i class="glyphicon glyphicon-time"></i><br/>Loading in progress<br/>';    
   document.body.appendChild(modal);    
   document.body.appendChild(loader);    
   return null;    
} 
function EndRequestHandler(sender, args) {   
   document.body.removeChild(document.body.getElementsByClassName("modal-backdrop")[0]);    
   document.body.removeChild(document.body.getElementsByClassName("loader")[0]);    
}

Le résultat est similaire, hormis le fait que l’indicateur de chargement du navigateur n’est plus visible du tout dans cette configuration.

loading in progress

Conclusion

Comme on peut le constater, la méthode diffère sensiblement et les contraintes ne sont pas les mêmes. Il est pourtant possible d’arriver à un résultat correspondant aux attentes des utilisateurs finaux

Ne ratez plus aucunes actualités avec la newsletter mensuelle de SoftFluent