UpdatePanel ( AJAX )

Version imprimable

17/04/2008, 10h35
gluc86

UpdatePanel ( AJAX )

Bonjour,

Alors voila j'aimerai mettre à jour un textBox en fonction de 2 DropDownList sans recharger toute ma page. Après avoir un peut cherché je me suis dit qu'avec un updatePanel d'AJAX sa devrai marcher mais je n'y arrive pas. Quelqu'un sait à quel endroit je doit mettre mon code pour lui dire si cet item est sélectionné alors tu affiche sa etc .. c'est dans le code de la page elle même ou dans le fichier VB qui est derrière ?
17/04/2008, 11h55
Promesses

Salut,
pour ma part, je préfère mettre mon code dans le fichier aspx.vb.

coté aspx, il faut que tu mettes tes ddl et ton input dans l'updatepanel.
Il faut aussi vérifier que tu as bien mis le "EnablePostback" à True sur les DDL.
17/04/2008, 12h06
gluc86

Ok car moi pour l'instant j'avais juste mis le textBox dans l'updatePanel et non les dropDownList. Donc une fois que tous est mis dans l'updatePanel je doit mettre mon code dans le pageLoad ou bien sur l'action du changement d'item des dropDownList ?
17/04/2008, 12h27
Promesses

changement d'item
17/04/2008, 14h17
gluc86

Ok donc j'ai essayé comme tu m'a dit sauf que en fait dès que je sélectionne un nouvel élément dans mon dropDownList et ba sa fait bien un post back mais de toutes la page pas juste du UpdatePanel.
17/04/2008, 14h21
Promesses
alors que ta ddl est dans l'updatepanel ?
La comme ça, je sais pas ...

Essaie de rajouter cela à ton scriptmanager pour voir
Code:

1 2 EnablePartialRendering="True"

Sa fait pareille.

Voici mon code pour le script manager

Code:

1
2
 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">

Et pour le reste c'est sa :

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
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" dateMode="Conditional">
     <ContentTemplate>
          <table style="width: 100%">
               <tr>
                    <td style="width: 100px; text-align: center;">
                    Durée de l'abonnement</td>
                    <td style="width: 164px; text-align: center">
                    Formule</td>
                    <td style="width: 129px; text-align: center;">
                    Montant en euros</td>
               </tr>
                    <td style="width: 100px; text-align: center;">
                    <asp:DropDownList ID="DropDownListDuree" runat="server" OnSelectedIndexChanged="DropDownListDuree_SelectedIndexChanged" AutoPostBack="True">
                        <asp:ListItem Selected="True">0</asp:ListItem>
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>3</asp:ListItem>
                        <asp:ListItem>6</asp:ListItem>
                        <asp:ListItem>9</asp:ListItem>
                    </asp:DropDownList>
                                mois</td>
                            <td style="width: 164px; text-align: center">
                    <asp:DropDownList ID="DropDownListFormule" runat="server">
                        <asp:ListItem Selected="True">Choix de la formule</asp:ListItem>
                        <asp:ListItem>Autonomie</asp:ListItem>
                        <asp:ListItem>Tutorat</asp:ListItem>
                    </asp:DropDownList></td>
                            <td style="width: 129px; text-align: center;">
                    <asp:TextBox ID="TextBoxCalculPrix" runat="server" ReadOnly="True" Width="81px"></asp:TextBox>&nbsp;
                            </td>
                        </tr>
          </table>
     </ContentTemplate>
</asp:UpdatePanel>

Salut

Pas besoins de metrte le DDL dans l'UpdatePanel. Dans un UpdatePanel on ne mets que ce que l'on veut voir changer, c'est pour ça que parfois on en mets plusieurs dans une page.

Mais il manque un truc important dans ton UpdatePanel : les Triggers et c'est pour ça que ta DDL fait un PostBack Global de la page.

Lorsque tu les aura mis, tout ira mieux.
L'idée c'est de palcer l'évènement concerné, dans lequel tu place le code à exécuter en cas de PostBack Asynchrone.

Exemple vide :
Code:

1 2 3 4 5 6 7 <ajax:UpdatePanel ID="t" runat="server"> <Triggers> <ajax:AsyncPostBackTrigger ControlID="DDL" EventName="SelectedItemChanged" /> </Triggers> <ContentTemplate></ContentTemplate> </ajax:UpdatePanel>

Ok alors j'ai juste laissé la textBox dans le updatePanel et rajouté le trigger qui correspond au DDL.

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
35
36
37
38
39
40
41
42
43
44
45
46
<table style="width: 100%">
     <tr>
          <td style="width: 166px; text-align: center">
                    CLASSE<br />
                    (Intitulé + Réf.)</td>
          <td style="width: 100px; text-align: center;">
                    Durée de l'abonnement</td>
          <td style="width: 164px; text-align: center">
                    Formule</td>
          <td style="width: 129px; text-align: center;">
                    Montant en euros</td>
     </tr>
     <tr>
           <td style="width: 166px; text-align: center">
                <asp:DropDownList ID="DropDownListClasse" runat="server">
                </asp:DropDownList></td>
           <td style="width: 100px; text-align: center;">
                <asp:DropDownList ID="DropDownListDuree" runat="server" OnSelectedIndexChanged="DropDownListDuree_SelectedIndexChanged" AutoPostBack="True">
                     <asp:ListItem Selected="True">0</asp:ListItem>
                     <asp:ListItem>1</asp:ListItem>
                     <asp:ListItem>3</asp:ListItem>
                     <asp:ListItem>6</asp:ListItem>
                     <asp:ListItem>9</asp:ListItem>
                 </asp:DropDownList>
                                mois</td>
            <td style="width: 164px; text-align: center">
                 <asp:DropDownList ID="DropDownListFormule" runat="server">
                      <asp:ListItem Selected="True">Choix de la formule</asp:ListItem>
                        <asp:ListItem>Autonomie</asp:ListItem>
                        <asp:ListItem>Tutorat</asp:ListItem>
                    </asp:DropDownList></td>
                            <td style="width: 129px; text-align: center;">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <Triggers>
		<asp:AsyncPostBackTrigger ControlID="DropDownListDuree" EventName="SelectedItemChanged" />
	       </Triggers>
                                    <ContentTemplate>
                                        &nbsp;
                    <asp:TextBox ID="TextBoxCalculPrix" runat="server" ReadOnly="True" Width="81px"></asp:TextBox>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                                &nbsp;&nbsp;
                            </td>
                        </tr>
                    </table>

Par contre le postBack se fait toujours sur toute la page et pas juste l'updatePanel.

17/04/2008, 16h31
calagan99

L'erreur vient de ZOOFY, booh zooffy !!!

L'evenement n'est pas SelectedItemChanged mais SelectedIndexChanged
de plus, tu n'es pas obligé de le préciser, un simple ControlID suffit ;)
17/04/2008, 17h04
zooffy

Ben oui, mais fallait pas faire un copier coller, ce n'était qu'un exemple, j'aurais du mettre "TOTO" comme je voulais faire au départ.

Sinon, je ne partage pas ton avis Calagan99 : si tu ne précise pas l'évènement, il va prendre celui par défaut du contrôle concerné, mais si tu veux faire sur un autre évènement ....

Donc, pour des raisons de propreté du code et de prendre des bonnes habitudes (comme ils disent à l'école, faites ce que je dis et pas ce que je fais........) ben vaut mieux spécifier des trucs qui parraiseent inutile plutôt que de tourner à l'économie.

L'important c'est que gluc86 ait sont UpdatePanel qui marche et surtout qu'il comprenne bien comment ça marche, alors gluc86, as tu bien acquis le fonctionnement d'un UpdatePanel ?
17/04/2008, 17h31
calagan99

D'accord avec toi, il est vrai que j'ai tendance à ne jamais préciser l'événement car à part le SelectedIndexChanged sur une DDL je ne vois pas trop...

Mais sur le fond tu as raison à 100%. :roll:
18/04/2008, 08h44
gluc86

Alors pour le EventName j'avais essayé plusieurs possibilité (DropDownListDuree_SelectedIndexChanged, SelectedIndexChanged) mais sa ne fonctionnait pas donc là je vien de tester sans aucun événement et sa ne marche toujours pas (toujours un refresh de toutes la page). J'ai aussi essayer de changer le updatetMode de l'updatePanel mais sa ne change rien. Il faut bien que l'autoPostBack du DDL soit activé aussi ?
18/04/2008, 09h19
zooffy

Oui, il faut activer l'AutoPostBack de la DDL sinon tu ne déclencheras rien.

Bon,a ttends un peu, je vais faire une petit essai sur une page de test et je te post du code fonctionnel, tu n'aura plus qu'à adapter avec tes noms de contrôle.

Alors voici du code qui marche, je viens de le tester. (voir à la fin du message)

J'ai modifier une détail qui n'a, normalement pas d'importance, je ne place pas l'évènement dans la définition du contrôle. J'utilise directement la Sub prédéfinie. Peut être que je souci vient de là.

Sinon, juste pour être sûr, as tu bien mis un ScriptManager dans ta page ?
Il faut que tu mette une ligne de code comme celle là au niveau du Form, juste ne dessous, c'est l'idéal.

Code:

<ajax:ScriptManager ID="smTest" runat="server"></ajax:ScriptManager>

Si avec tout ça, ça ne fonctionne toujours pas, ben tu dois avoir un souci de configuration de ton extension AJAX, je vois rien d'autre.
Tiens nous au courant, on fera peut être d'autre tests.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <asp:DropDownList ID="DropDownListDuree" runat="server" AutoPostBack="True"> <asp:ListItem Selected="True">0</asp:ListItem> <asp:ListItem>1</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>6</asp:ListItem> <asp:ListItem>9</asp:ListItem> </asp:DropDownList> <ajax:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <ajax:AsyncPostBackTrigger ControlID="DropDownListDuree" EventName="SelectedIndexChanged" /> </Triggers> <ContentTemplate><asp:TextBox ID="TextBoxCalculPrix" runat="server" ReadOnly="True" Width="81px"></asp:TextBox> </ContentTemplate> </ajax:UpdatePanel>

18/04/2008, 09h27
gluc86

OK je te remerci car là je galère vraiment.

Bon j'ai recréer une nouvelle page toutes propore et j'ai mis le code que tu m'as donné. J'ai toujours le même problème donc sa doit venir de me configuration d'AJAX ou d'un trud du genre. Si tu veut vérifier mon code voici la page complète :

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
35
36
37
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PgaeTestAJAX.aspx.vb" Inherits="Templates_PgaeTestAJAX" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
 
<!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>Page sans titre</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
        <asp:DropDownList ID="DropDownListDuree" runat="server" AutoPostBack="True">
            <asp:ListItem Selected="True">0</asp:ListItem>
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>6</asp:ListItem>
            <asp:ListItem>9</asp:ListItem>
        </asp:DropDownList> 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
				<asp:AsyncPostBackTrigger ControlID="DropDownListDuree" EventName="SelectedIndexChanged" />
			</Triggers>
			<ContentTemplate><asp:TextBox ID="TextBoxCalculPrix" runat="server" ReadOnly="True" Width="81px"></asp:TextBox>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Bon, alors je viens de faire un test complet, je te refile le code que j'ai un poil, (mais juste un poil) modifié.

Pour être sûr, j'ai placé un Label qui contient l'heure de chargement de la page et lorsque j'active la DDL ben l'heure ne change pas, mais la texte prends la valeur choisie dans la DDL

Par contre, il est évident que je n'ai aps repris tes déclaration de haut de page, les mienes étant dans mon Web.Config.

Recolle le code que je te donne à la place du tiens. Pour la HTML tu ne remplace que le contenue de ta balise HTML, tu ne touche à pas ce qu'il y au dessus.
Pour le code Behind tu remplace tout ce que tu as mis à l'intérieur de la Partial Class

Si ça marche toujours pas, vérifie ta configuration AJAX.

Code 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 <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Page sans titre</title> </head> <body> <form id="form2" runat="server"> <ajax:ScriptManager ID="ScriptManager1" runat="server"> </ajax:ScriptManager> <div> <asp:Label ID="lHeure" runat="server"></asp:Label> <asp:DropDownList ID="DropDownListDuree" runat="server" AutoPostBack="True"> <asp:ListItem Selected="True">0</asp:ListItem> <asp:ListItem>1</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>6</asp:ListItem> <asp:ListItem>9</asp:ListItem> </asp:DropDownList> <ajax:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <ajax:AsyncPostBackTrigger ControlID="DropDownListDuree" EventName="SelectedIndexChanged" /> </Triggers> <ContentTemplate><asp:TextBox ID="TextBoxCalculPrix" runat="server" ReadOnly="True" Width="81px"></asp:TextBox> </ContentTemplate> </ajax:UpdatePanel> </div> </form> </body> </html>
CodeBehind :
Code:

1 2 3 4 5 6 7 Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init lHeure.Text = Now().ToString End Sub Protected Sub DropDownListDuree_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownListDuree.SelectedIndexChanged TextBoxCalculPrix.Text = DropDownListDuree.SelectedValue End Sub

18/04/2008, 11h56
gluc86

OK donc bonne idée d'avoir rajouté un label pour savoir l'heure du rechargement de la page. En fait à bien tous tester j'ai remarqué que le label ne change pas. Des fois le refresh se fait correctement (juste la textbox) mais des fois j'ai un scintillement de la page qui fait pensser à un refresh (mais vu que la date ne change pas sa ne doit pas être sa). Donc c'est bizare mais je pensse que sa va rester comme sa. Un grand merci à toi zooffy pour ton aide.
18/04/2008, 14h10
gluc86

Bon par contre je précise que quand j'essaye de tous remettre sur mon ancienne page sa fait encore comme un refresh de toutes la page. J'ai mis un label heure aussi sur le init et pareille il ne bouge pas donc c'est bizare...