Afficher un pop up durant le temps de traitement

Version imprimable

16/04/2012, 10h38
Naceur84

Afficher un pop up durant le temps de traitement

Bonjour,

A cause d'un temps de traitement un peu long j'aimerais bien informer l'internaute quand il valide que sa demande est en cours de traitement et à la fin du traitement il sera redirigé vers une autre page. Moi ce que je cherche c'est de tenir l'internaute informé de ce qui se passe.

J'espère que vous avez une idée comment le faire.

Merci.
17/04/2012, 21h33
Immobilis

Salut

Citation:

Envoyé par Naceur84

Moi ce que je cherche c'est de tenir l'internaute informé de ce qui se passe.

Avec quel niveau de détails?

A+
18/04/2012, 09h17
mappy

Salut,

Tu dois passer par une communication asynchrone.
Regarde côté scriptcallback
18/04/2012, 09h18
Naceur84

Bonjour,

En fait moi j'ai un bouton de validation au moment ou l'internaute clique je fais un traitement lourd, après avoir fini ce traitement il sera redirigé vers une autre page. Mon problème comme ce traitement prend un peu du temps l'internaute ne sait pas est ce que il a bien cliqué sur le bouton ou pas et du coup il va réessayer plusieurs fois(plusieurs clic). Moi ce que je voudrais c'est quand il clique un pop up s'affiche lui disant que le traitement est en cours, après la fin du traitement il sera redirigé vers une autre page. J'ai vu dans des sites parfois quand il y'on a un traitement lourd un pop up s'affiche avec le cercle qui tourne pour patienter mais je ne sais pas comment le faire.

J’espère que j'étais clair cette fois ci.

Merci.
18/04/2012, 09h30
calagan99

Bonjour,

regarde du côté des modales JQuery ou, si tu utilises l'AjaxControlToolkit, du côté du ModalPopupExtender.
18/04/2012, 09h32
mappy

mets un updatepanel ajax avec un contrôle updateprogress où tu places un gif animé.
Ton bouton doit être passé en appel asynchrone via le AsyncPostBackTrigger

Merci Mappy pour ta réponse, j'ai réussi à afficher la barre de progression. Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
                     <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                        <ContentTemplate>
                            <asp:Button ID="Button1" runat="server" Text="<%$Resources:resLabels,btnValider %>"
                               Width="80px" OnClick="Button1_Click" />
                        </ContentTemplate>
                      </asp:UpdatePanel>
                      <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                        <ProgressTemplate>
                        <div  class="UpdateProgress">
                          Traitement en cours....
                        </div>
                        </ProgressTemplate>
                        </asp:UpdateProgress>

Mais est ce que c'est possible de le mettre en premier plan de telle sorte qu'il soit affiché comme un pop up. Le but derrière c'est d’empêcher l'internaute de cliquer une deuxième fois sur le bouton Valider.

Merci.

18/04/2012, 11h28
mappy

essaie d'insérer ton updatepanel dans un modalpopupextender.
18/04/2012, 13h59
calagan99

Citation:

Envoyé par mappy

essaie d'insérer ton updatepanel dans un modalpopupextender.

Tu voulais dire UpdateProgress ?
Parce que s'il entoure son UpdatePanel d'un ModalPopupExtender, ça ne donnera rien de bon...
18/04/2012, 19h03
Immobilis

Plein de propositions intéressantes, mais il y a plus simple à mon avis

Citation:

Envoyé par Naceur84

J'ai vu dans des sites parfois quand il y'on a un traitement lourd un pop up s'affiche avec le cercle qui tourne pour patienter mais je ne sais pas comment le faire.

Dans le temps où l'AJAX était pas aussi répandu, il suffisait d'afficher un gif animé en faisant un Response.Flush avant d'entamer le traitement. Cela permet d'envoyer au client le code nécessaire pour afficher l'écran d'attente. Une fois que le traitement est terminé, une fonction javascript cache l'image.

Après c'est vrai que cela fait pas très .Net :P

Il y a ceci peut-être: http://stackoverflow.com/questions/9...en-for-asp-net

Bonjour,

Merci beaucoup Immobilis :ccool:, c'est ce que je cherche. Voici le code peut être ça peut servir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
                   <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
                        <ProgressTemplate>
                            <div id="overlay">
                                <div id="modalprogress">
                                    <div id="theprogress">
                                        <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="../Images/wait.gif" />
                                        Veuillez patienter SVP...
                                    </div>
                                </div>
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

et pour le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#overlay 
{
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}