Créer un message de chargement en ASP.Net – UpdatePanel et UpdateProgress

Pour faire suite au billet d'Ivan sur la création de message de chargement en ASP.NET, je vais également vous présenter une solution s'appuyant ici sur les fonctionnalités AJAX intégrées dans ASP.NET à l'aide des composants UpdatePanel et UpdateProgress.

Pour faire suite au billet d'Ivan sur la création de message de chargement en ASP.NET, je vais également vous présenter une solution s'appuyant ici sur les fonctionnalités AJAX intégrées dans ASP.NET à l'aide des composants UpdatePanel et UpdateProgress.

Préparation de la page ASPX

Voilà le code de la form dont nous avons besoin du côté de l'aspx:

<form id="form1" runat="server">
       <asp:ScriptManager EnablePartialRendering="true" ID="scMain" runat="server" ></asp:ScriptManager>
       <div>
           <asp:UpdatePanel runat="server" ID="upMain">
               <ContentTemplate>
                   <asp:Button runat="server" ID="btnLoad" Text="Charger!" OnClick="btnLoad_Click" />
               </ContentTemplate>
           </asp:UpdatePanel>
           <asp:UpdateProgress ID="uprMain" runat="server">
               <ProgressTemplate>
                   <div>
                       <center>
                           <asp:Image ID="Image1" runat="server" ImageUrl="App_Themes/Demo/IMG/wait-loading.gif" />
                           <asp:Label runat="server" ID="lblChargement" Text="Chargement en cours..."></asp:Label>
                       </center>
                   </div>
               </ProgressTemplate>
           </asp:UpdateProgress>
       </div>
   </form>

Détaillons ce code

  • L'objet ScriptManager est obligatoire pour permettre à la page d'exécuter les scripts de l'UpdatePanel et de l'UpdateProgress. Il ne peut y'en avoir qu'un par page, aussi je vous recommande dans un site réel de le mettre sur la page Master. Sa propriété EnablePartialRendering à True autorisera la page à ne rafraichir que l'UpdatePanel nécessaire, et pas toute la page.
  • L'objet UpdatePanel se place comme n'importe quel composant ASP.NET, et son contenu se met dans la balise ContentTemplate. Ici, nous lui avons juste placé un bouton btnLoad
  • UpdateProgress décrit le contenu qui sera affiché lors d'un chargement. Son contenu est placé dans la balise ProgressTemplate. On met ici une image de chargement en GIF pour donner un mouvement dans notre animation

Au niveau du Code-Behind

De ce côté, c'est assez simple, il n'y a rien du tout. Nous allons juste simuler un chargement dans l'évènement du clic :

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

Résultat et compléments

Voilà, nous avons fini. Dès qu'un chargement surviendra sur la page, le contenu de notre UpdateProgress s'affichera automatiquement et se masquera dès que le traitement est fini
art_messup_1.jpg

On peut ensuite définir des comportements beaucoup plus spécifique, par exemple vous pouvez lier un UpdateProgress à un UpdatePanel, pour avoir un message personnalisé sur chaque UpdatePanel que la page pourrait contenir. On peut également définir le temps de chargement nécessaire pour que l'UpdateProgress s'affiche.

Vous pouvez ensuite faire intervenir le pôle studio qui trouvera des balises HTML/ASP.NET assez classiques.
Pour verrouiller les boutons et empêcher l'utilisateur de cliquer sur un bouton lors du chargement, petite astuce CSS, on défini la taille de notre UpdateProgress à 100% et on le recouvre d'une image qu'on rend opaque par CSS.
L'utilisateur verra apparaitre notre animation et un "voile" se mettre sur le reste de la page.

Un peu de style plus tard, vous pouvez obtenir un panel qui se centre dans la page, et recouvre la page de notre voile empêchant l'utilisateur de recliquer sur les boutons (pas très visible sur les images malheureusement) :
art_messup_2.jpg

art_messup_3.jpg

Projet démo

Vous trouverez le projet démo avec la page et les CSS ici : LoadingMessage.zip

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *