Discussion :

[zooffy]

Bonjour

Je voudrais savoir comment on peut mettre une image d'attente sur un UpdatePanel.

Je m'explique : lorsqu'on clique sur un bouton (par exemple) qui déclenche une Procédure qui mets à jour le Content d'un UpdatePanel, cela peut prendre un certains temps.

Sur pas mal de site on voit une petite image (genre un truc qui tourne) qui disparait une fois que le Content est complètement mis en palce. Pendant que cette image tourne, on ne peut rien faire d'autre sur la page.

L'ennui c'est que je n'ai aucun idée de comment on peut mettre en aplce cela et le fruit de mes recherches actuelles ne donne rien. Je pense que je n'utilise pas les bon mots clés car je n'ai aucun idée de comment ça s'appelle.

Pouvez m'aider ?

[predalpha]

Salut Zoofy,

je ne connais pas grand chose en ajax mais regarde peut-être par ici
http://www.asp.net/learn/ajax-videos/video-123.aspx

++

[harry25]

Bonjour,
J'ai fait çà avec Ajax + JavaScript :
ModalPopUp Ajax (pour "désactiver" l'écran)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 <cc1:ModalPopupExtender ID="ModalPopupExtenderWaiting" BehaviorID="ModalBehaviour" runat="server" BackgroundCssClass="modalBackground"
            PopupControlID="UpdatePanelWaiting" TargetControlID="UpdatePanelWaiting">
        </cc1:ModalPopupExtender>
         <asp:UpdatePanel ID="UpdatePanelWaiting" runat="server">
            <ContentTemplate>
            <asp:Panel ID="PanelWaiting" runat="server" Height="300" HorizontalAlign="Center" Width="400">
            <br />
            <br />
            <table style="width: 90%; color: white; font-family: Arial">
                <tr>
                    <td style="height: 92px; border-top-style: groove; border-right-style: groove; border-left-style: groove; border-bottom-style: groove; background-color: #597c8c;">
                        <strong>
                            <asp:Label ID="LabelWaiting" runat="server" Text="Veuillez patienter..."></asp:Label><br />
                        </strong>
                        <br />
                        <img id="imagewaiting" src="images/ajax-loader.gif" />
                        <br />
                        <br />
                        </td>
                </tr>
            </table>
            </asp:Panel>  
            </ContentTemplate>
        </asp:UpdatePanel>

Un Gif animé avec utilisation de Javascript (pour animer l'image)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript" language="javascript"> 
function ShowModalPopup() 
{
  setTimeout('document.images["imagewaiting"].src="images/ajax-loader.gif"', 200); 
  $find("ModalBehaviour").show(); 
}
 
function HideModalPopup() 
{
 $find("ModalBehaviour").hide(); 
}
</script>

Bonjour

Je voudrais savoir comment on peut mettre une image d'attente sur un UpdatePanel.

Je m'explique : lorsqu'on clique sur un bouton (par exemple) qui déclenche une Procédure qui mets à jour le Content d'un UpdatePanel, cela peut prendre un certains temps.

Sur pas mal de site on voit une petite image (genre un truc qui tourne) qui disparait une fois que le Content est complètement mis en palce. Pendant que cette image tourne, on ne peut rien faire d'autre sur la page.

L'ennui c'est que je n'ai aucun idée de comment on peut mettre en aplce cela et le fruit de mes recherches actuelles ne donne rien. Je pense que je n'utilise pas les bon mots clés car je n'ai aucun idée de comment ça s'appelle.

Pouvez m'aider ?

[zooffy]

Merci à tous les deux, j'ai trouvé, c'est cool.

Voici ma solution finale, mix des deux idées.
Par contre, avant de poster, je tiens à dire : l'anglais c'est mal, pouarkkk, bouark, beurk,beurk,beurk,beurk,beurk,beurk,beurk

Ah, bon, maintenant ça va mieux....

Allez, amusez vous bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ajax:UpdatePanel ID="upCampagne" runat="server" UpdateMode="Always" RenderMode="Inline">
	<Triggers>
	</Triggers>
	<ContentTemplate>
	<ajax:UpdateProgress ID="uprog" DisplayAfter="1" DynamicLayout="true" runat="server">
			<ProgressTemplate>
				<div style="position:absolute;left:10px;top:10px;width:2000px;height:1000px;background-image:url('/Images/blank.gif');background-repeat:repeat;margin:300px;">
					<img src="../../Images/loading.gif" alt="Veuillez patienter s'il vous plait" />
				</div>
			</ProgressTemplate>
		</ajax:UpdateProgress>
	</ContentTemplate>
</ajax:UpdatePanel>

ça marche tout seul Il suffit de jouer sur le style du DIV

Encore merci