Cas d’exemple

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

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.

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 = ' ';    
   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;    
   }

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 = ' ';    
   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.

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