Discussion :

[zooffy]

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 :

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

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 :

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

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 :

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

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 ?

[Nicolas Esprit]

Bonjour,

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

En espérant t'avoir aidé

[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 ?

[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é.

[zooffy]

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.

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.

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.

[Nicolas Esprit]

Cette propertie :

Code :

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

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

[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.

[Nicolas Esprit]

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.

[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.

[zooffy]

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 :

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
 
<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 ?

[lutecefalco]

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

[Nicolas Esprit]

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.

[zooffy]

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 :

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
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 :

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
 
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....

[lutecefalco]

Rajoute un
upImage.Upload() à la fin

[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.

[zooffy]

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 :

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
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 :

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
 
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

[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

[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.

[lutecefalco]

Tu dois t'abonner à l'événement client:

Code :

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

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 :

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

1
2
3
4
5
6
 
<script>
    function UploadCompleted() {
        // Déclencher un post back
    }
</script>

[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.