Déclencher le PostBack

Version imprimable

Bonjour tout le monde.

Ma méconnaissance en amtière d'AJAX me bloque sur un truc.
J'ai mis un contrôle AJAX pour charge un fichier et une Image à côté. Je veux que lorsque le fichier est chargé qu'il apparaise dans l'image.

Voici le code côté HTML :
Code:

1 2 3 4 5 6 7 8 9 10 <ajax:UpdatePanel ID="upImage" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional"> <Triggers> <ajax:AsyncPostBackTrigger ControlID="afuImageGig" EventName="" /> </Triggers> <ContentTemplate> <asp:Image ID="imgGig" runat="server" /> </ContentTemplate> </ajax:UpdatePanel> <ajaxToolkit:AsyncFileUpload ID="afuImageGig" runat="server" />
(j'ai pas mis le code de la table pour faire a mise en forme, l'image n'est pas dans la même cellule que l'AFU)

Et voici le CodeBehind :
Code:

1 2 3 4 5 6 7 Protected Sub afuImageGig_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles afuImageGig.UploadedComplete afuImageGig.SaveAs(Request.PhysicalApplicationPath & "\App_Themes\Generale\PhotoGig\" & afuImageGig.PostedFile.FileName) imgGig.ImageUrl = "~/App_Themes/Generale/PhotoGig/" & afuImageGig.PostedFile.FileName End Sub
Sachant que dans le Init de la page j'ai mis ça :
Code:

1 2 3 4 5 With imgGig .ImageUrl = "~/App_Themes/NoPhoto.jpg" .Width = Unit.Pixel(150) End With
J'ai fini par comprendre qu'il me manque un PostBack pour mettre à jour l'image.
Mon souci est que je ne trouve pas le moyen de déclencher ce PostBack.

Pouvez vous m'aider ?

16/06/2010, 11h16
Nicolas Esprit

Bonjour,

Le contrôle AyncFileUpload possède un event OnClientUploadComplete. Ceci devrait répondre à ton besoin.

En espérant t'avoir aidé
16/06/2010, 11h23
zooffy

Merci pour ton aide, mais cet event est fait pour envoyer sur Jscript.
Je vois pas bien comment je peux mettre à jour l'image ASP.NET avec du Jscript.

Et l'event que j'utilise est le même mais côté serveur. S'il n'y a pas de PostBack côté Serveur, pourquoi y en aurait il un côté Client ?

Vois tu ce que je veux dire ?
16/06/2010, 11h49
Nicolas Esprit

Si tu as ton event server, tu l'utilises dans ton Trigger de l'UpdatePanel, afin de rafraichir l'image. Donc : UploadedComplete.

Sinon tu utilises l'event client et tu changes l'image en Javascript ou en JQuery. Ou encore avec l'event client tu lances en Javascript un _DoPostback

En espérant t'avoir aidé.
16/06/2010, 11h57
zooffy

Citation:

Envoyé par Nicolas Esprit

Si tu as ton event server, tu l'utilises dans ton Trigger de l'UpdatePanel, afin de rafraichir l'image. Donc : UploadedComplete.

Petite erreur de copier coller.
Je viens de voir que dans mon exemple de code, j'ai oublié le nom de l'event, mais dans mon code actif, il y est bien et cela ne fonctoinne pas. L'image ne se mets pas à jour.

Citation:

Envoyé par Nicolas Esprit

Sinon tu utilises l'event client et tu changes l'image en Javascript ou en JQuery.

Alors, ça, je ne sais pas faire. Et en plus, JQuery, je ne connais pas du tout.

Citation:

Envoyé par Nicolas Esprit

Ou encore avec l'event client tu lances en Javascript un _DoPostback

ça non plus je ne sais pas faire. J'ai vu plein de truc sur le sujet en cherchant sur Google, mais je ne comprends pas ce qu'il faut coder.

La méthode qui m'interesse le plus restant, bien évidement, le côté serveur avec l'event uploadedComplete.
16/06/2010, 12h12
Nicolas Esprit

Cette propertie :

Code:

ChildrenAsTriggers

n'est pas par défaut à True pour rien. En mettant False tu indiques que tu veux bien déclencher le PostBack, mais pas rafraîchir ton UpdatePanel.

Essaye donc à True
16/06/2010, 12h22
zooffy

Ok, oops de ma part, j'avais pas suivi ce détail.
Mais en essayant à True, ça fonctionne pas plus.
Aprés je me suis dis que le UpdateMode était peut-être à incriminer, mais pas mieux en le passant à Always.

Et pourtant, en mettant un bouton avec rien dans l'Event Click, donc déclenchant un simple PostaBack, ça met à jour l'image.

Je cherche du côté de l'explication du PostBack dans l'Event UploadComplete, mais je trouve pas de doc.

J'ai comme l'impression que l'Event UploadComplete ne déclenche pas de PostBack, ce qui me parait bizarre.
16/06/2010, 19h59
Nicolas Esprit

Citation:

Envoyé par zooffy

Aprés je me suis dis que le UpdateMode était peut-être à incriminer, mais pas mieux en le passant à Always.

En mettant Always, dans ce cas là il faut que ton contrôle qui déclenche le PostBack (le FileUpload ici) soit également dans l'UpdatePanel.
17/06/2010, 09h46
zooffy

Ah, je savais pas. Faut vraiment que je trouve un tuto complet sur les UpdatePanel

Je vais essyer, mais l'ennui c'est les deux ccontrôles sont dans des cellules différentes dans la table qui me sert de présentation.

J'essaie et je reviens.

Bon j'ai essayé de metre l'UpdatePanel autour de le TableRow, mais ça ne fonctionne pas.
Du coup j'ai fait l'inverse. J'ai mis une seul cellule avec un colspan pour faire le joint.

En gros ça donne ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<asp:TableRow>
        <asp:TableCell ColumnSpan="2">
            <asp:Label ID="lblImageGig" runat="server"></asp:Label><br />
                <ajax:UpdatePanel ID="upImage" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">            
                <Triggers>
                    <ajax:AsyncPostBackTrigger ControlID="afuImageGig" EventName="UploadedComplete" />
                </Triggers>
                <ContentTemplate>
                    <asp:Image ID="imgGig" runat="server" />
                    <ajaxToolkit:AsyncFileUpload ID="afuImageGig" runat="server" /><br />
                    <asp:Label ID="lblImageTexte" runat="server"></asp:Label>
                </ContentTemplate>
                </ajax:UpdatePanel>
        </asp:TableCell>
    </asp:TableRow>

Mais l'image ne se met toujours pas à jour

Une autre idée ?

17/06/2010, 10h50
lutecefalco

Citation:

Envoyé par Nicolas Esprit

En mettant Always, dans ce cas là il faut que ton contrôle qui déclenche le PostBack (le FileUpload ici) soit également dans l'UpdatePanel.

J'aurais dit le contraire
17/06/2010, 11h37
Nicolas Esprit

Citation:

Envoyé par lutecefalco

J'aurais dit le contraire

Dans le cas contraire, il y a PostBack normal et donc pas d'utilité à avoir un UpdatePanel pour rafraîchir partiellement la page... vu que celle-ci le sera complètement.

Bonjour à tous les deux (et aux autres aussi !!)

Alors ce matin, histoire de m'en sortir avec ce truc j'ai pris le parti de faire une page test pour évacuer tout problème périmétrique.
J'ai essayé un peu tout les configurations de paramettre en reprenant les indications donnée plus haut. Mais cela ne fonctionne toujours pas.

Alors voici le code propre et simple sur lequl je pars, je verrais aprés à le réintégrer dans la page finale.
HTML :

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
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="smGene" runat="server"></ajax:ScriptManager>
    <div>
    <ajax:UpdatePanel ID="upImage" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">            
    <Triggers>
        <ajax:AsyncPostBackTrigger ControlID="afuImageGig" EventName="UploadedComplete" />
    </Triggers>
    <ContentTemplate>
        <asp:Image ID="imgGig" runat="server" />
        <br />
        <asp:Label ID="lblImageTexte" runat="server"></asp:Label>
    </ContentTemplate>
    </ajax:UpdatePanel>
    <ajaxToolkit:AsyncFileUpload ID="afuImageGig" runat="server" />
    </div>
    </form>
</body>
</html>

et CodeBehind :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
Partial Class test
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        With imgGig
            .ImageUrl = "~/App_Themes/NoPhoto.jpg"
            .Width = Unit.Pixel(150)
        End With
    End Sub
 
    Protected Sub afuImageGig_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles afuImageGig.UploadedComplete
        afuImageGig.SaveAs(Request.PhysicalApplicationPath & "\App_Themes\" & afuImageGig.PostedFile.FileName)
        imgGig.ImageUrl = "~/App_Themes/" & afuImageGig.PostedFile.FileName
        imgGig.DataBind()
        lblImageTexte.Text = "image chargée"
    End Sub
End Class

Donc, le fichier se upload bien au bon endroit, je n'ai aucun soucis avec ça.
Mais ni l'image, ni le label ne se mettent à jour aprés l'upload.

Voilà, si vous voyez un truc qui déconne....

22/06/2010, 10h44
lutecefalco

Rajoute un
upImage.Upload() à la fin
22/06/2010, 11h39
zooffy

Bon, j'ai mis un upIamge.update() (et pas upload ! hi hi )

Maintenant j'ai un souci bizarre : il me colle un message d'erreur simple : faut mettre le updateMode à Always (enfin il dit que si c'est à Conditionnal il peut pas faire.
Donc j'ai mis à Always, sauf qu'il me met toujours le même message d'erreur

Du coup, j'ai aussi viré le Trigger, vu que j'ai mis les Childrenistrigger à True

Et là, je comprends pas
Je vais essayer de laisser poser 20 minutes, comme la pâte à crèpe, histoire de voir s'il n'y a pas un soucis de session.

Mais si vous avez une idée entre deux, je prends.

Autant pour moi, j'ai compris le message d'erreur de travers.

En fait il veut absolument Conditionnal. Et maintenant je n'ai plus de message d'erreur mais cela ne fonctione toujours pas.
Donc voici le code mis à jour.

HTML :

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
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="smGene" runat="server"></ajax:ScriptManager>
    <div>
    <ajax:UpdatePanel ID="upImage" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">            
    <Triggers>
 
    </Triggers>
    <ContentTemplate>
        <asp:Image ID="imgGig" runat="server" />
        <br />
        <asp:Label ID="lblImageTexte" runat="server"></asp:Label>
    </ContentTemplate>
    </ajax:UpdatePanel>
    <ajaxToolkit:AsyncFileUpload ID="afuImageGig" runat="server" />
    </div>
    </form>
</body>
</html>

CodeBehind :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
Partial Class test
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        If Not IsPostBack Then
            With imgGig
                .ImageUrl = "~/App_Themes/NoPhoto.jpg"
                .Width = Unit.Pixel(150)
            End With
        End If
    End Sub
 
    Protected Sub afuImageGig_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles afuImageGig.UploadedComplete
        afuImageGig.SaveAs(Request.PhysicalApplicationPath & "\App_Themes\" & afuImageGig.PostedFile.FileName)
        imgGig.ImageUrl = "~/App_Themes/" & afuImageGig.PostedFile.FileName
        imgGig.DataBind()
        lblImageTexte.Text = "image chargée"
        upImage.Update()
 
    End Sub
End Class

22/06/2010, 17h40
lutecefalco

C'est de l'asynchrone, ça ne peut pas fonctionner.
A aucun moment ton serveur peut signifier à ton browser de se mettre à jour sans une requête de ce dernier
22/06/2010, 17h43
zooffy

Ok, merci pour la théorie, je comprends.
Mais alors, comment je fais pour mettre à jour l'image ?

J'ai vu ça sur plein de site, donc on doit pouvoir le faire.
Je vois pas bien où je fais la requête serveur ni même comment je le formule.
22/06/2010, 17h55
lutecefalco
Tu dois t'abonner à l'événement client:

Code:

OnClientUploadComplete="UploadCompleted"

Créer cette fonction javascript qui va déclencher le post back et la mise à jour de l'update panel. A toi de voir comment récupérer le nom de l'image entre les 2 async post backs
Code:

1 2 3 4 5 6 <script> function UploadCompleted() { // Déclencher un post back } </script>
23/06/2010, 12h46
zooffy

Bon, en fait, je crois que j'ai pas compris la théorie, contrairement à ce que je disais dans mon précédent message.

Le fait de mettre un UpdatePanel permet bien de metrte à jour une partie de la page par une requête serveur ?
L'évènement du AsyncFileUpload est bien un déclencheur d'une requête serveur ?
Dans le code de cet évènement, je lui envoi bien un nouveau d'image ?

Alors pourquoi je dois passer par le côté Client pour aller chercher des données serveur, alors que je suis déjà sur le serveur ?

Et en plus, j'ai potasser le fameux _DoPostBack et j'ai rien compris.

J'ai du mal à suivre, d'un coup.
Ou alors il faudrait que je passe un FileUpload standard ?

Merci à toi pour ton aide à mon petit cerveau embrumé ce matin.
23/06/2010, 13h17
zooffy

Je suis en train d'explorer la piste avec un Fileupload normal. Et là je suis devant un truc que je ne pige pas

Dés que j'a la présence de l'UpdatePanel le FileUpload me retourne un False sur le test HasFile !!!

Si j'ai pas d'UpdatePanel dans la page, il me charge le fichier sans souci, mais dés qu'il y a un UpdatePanel, que le FileUpload soit dedans ou pas, ce que j'envoi n'est plus un fichier !!!

J'avoue ne plus rien comprendre là.
23/06/2010, 13h21
lutecefalco

Citation:

Envoyé par zooffy

Le fait de mettre un UpdatePanel permet bien de metrte à jour une partie de la page par une requête serveur ?

Oui

Citation:

Envoyé par zooffy

L'évènement du AsyncFileUpload est bien un déclencheur d'une requête serveur ?

Non.
Tu déclenches une requête serveur quand tu lances le téléchargement.
C'est une requête asynchrone, donc le serveur rend la main au client.
Quand le téléchargement est terminé, ça lance un événement (UploadedComplete) côté serveur et intercepté par le serveur. Y a pas de requête de la part du client, donc pas de mise à jour de la page

Citation:

Envoyé par zooffy

Alors pourquoi je dois passer par le côté Client pour aller chercher des données serveur, alors que je suis déjà sur le serveur ?

Tu dois passer par le côté client pour réinitialiser une requête du client vers le serveur (seule façon de mettre à jour la page comme expliqué ci-dessus)

Citation:

Envoyé par zooffy

Et en plus, j'ai potasser le fameux _DoPostBack et j'ai rien compris.

J'ai du mal à suivre, d'un coup.
Ou alors il faudrait que je passe un FileUpload standard ?

Sinon tu peux tout faire dans l'événement javascript (OnClientUploadComplete): tu changes la valeur du label et la valeur du chemin de l'image
23/06/2010, 13h23
lutecefalco

Citation:

Envoyé par zooffy

Je suis en train d'explorer la piste avec un Fileupload normal. Et là je suis devant un truc que je ne pige pas

Dés que j'a la présence de l'UpdatePanel le FileUpload me retourne un False sur le test HasFile !!!

Si j'ai pas d'UpdatePanel dans la page, il me charge le fichier sans souci, mais dés qu'il y a un UpdatePanel, que le FileUpload soit dedans ou pas, ce que j'envoi n'est plus un fichier !!!

J'avoue ne plus rien comprendre là.

Tu dois mettre le FileUpload hors de l'UpdatePanel mais il faut aussi ne pas associer de trigger sur ce FileUpload

Citation:

Envoyé par lutecefalco

Sinon tu peux tout faire dans l'événement javascript (OnClientUploadComplete): tu changes la valeur du label et la valeur du chemin de l'image

Ok avec toute ton explication, je comprends un peu mieux.
Maintenant, le soucis c'est que je ne vois pas comment faire tout ça en Jscript. Je suis pas fort avec ce langage.

Citation:

Envoyé par lutecefalco

Tu dois mettre le FileUpload hors de l'UpdatePanel mais il faut aussi ne pas associer de trigger sur ce FileUpload

Ok avec ça aussi. ALors ce que je ne comprends pas c'est que cela ne fonctionne pas avec code où le Fileuplaod est en dehors de l'UpdatePanel et le TRigger est sur le bouton et pas sur le FileUpLoad.
Vois tu ?
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 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <ajax:ScriptManager ID="smGene" runat="server"></ajax:ScriptManager> <div> <asp:Label ID="lblCtrl" runat="server"></asp:Label> <ajax:UpdatePanel ID="upImage" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"> <Triggers> <ajax:AsyncPostBackTrigger ControlID="btnImage" EventName="Click" /> </Triggers> <ContentTemplate> <asp:Image ID="imgGig" runat="server" Width="150" ImageUrl="~/App_Themes/nophoto.jpg" /> <br /> <asp:Label ID="lblImageTexte" runat="server"></asp:Label><br /> </ContentTemplate> </ajax:UpdatePanel> <asp:FileUpload ID="fuImage" runat="server" /> <asp:Button ID="btnImage" runat="server" Text="Charger l'image" /> </div> </form> </body> </html>