raffraichir updatepanel sans rafraichissement de la page entière

**Patmat44** · 29/03/2013, 10h01

Bonjour,
Je dirais que tout est dans le titre!!
En fait, j'ai bien créé mon updatepanel. Il est composé de panels et de radiobuttons.
Ce que je souhaite faire c'est, en fonction du radiobutton sélectionné, afficher ou cacher les différents panels. J'y arrive avec un postback mais sans le faire, il ne me rafraichi pas l'updatepanel.

Est-ce que j'ai loupé quelque chose??

Merci d'avance

**DotNetMatt** · 29/03/2013, 10h08

Si tu veux le faire sans PostBack, ça veut dire que ta logique d'affichage doit être du côté du client. Il faut donc utiliser du jQuery

**Patmat44** · 29/03/2013, 10h09

Pourtant je pensais qu'ajax permettait de rafraichir une partie de la page sans la recharger entièrement??

**DotNetMatt** · 29/03/2013, 10h18

Avec AJAX, même s'il n'est que sur une partie de la page, il y a quand même un PostBack.

Dans ton post tu as demandé comment tu pouvais faire pour ne pas avoir de PostBack, ou du moins c'est ce que j'ai compris

D'où ma réponse.

Mais apparemment tu souhaites utiliser AJAX... Peux-tu poster la partie de ton code (ASPX et C#) qui concerne ton problème ?

**Patmat44** · 29/03/2013, 10h30

oui c'est vrai que le titre de mon post n'est pas tout à fait exacte!!
Ce que je ne veux pas, c'est le rechargement de la page, et donc le passage dans le page_load.

Voici une partie de mon code aspx :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
        <asp:UpdatePanel ID="Up1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="p1" runat="server" Visible="false">
                    <label>Texte à afficher : </label>
                    <asp:TextBox ID="Taff" runat="server"></asp:TextBox>
                    <br />
                    <label>Commentaire</label>
                    <asp:TextBox ID="Comm" runat="server"></asp:TextBox>
                    <br />
                    <asp:RadioButtonList ID="test" runat="server" OnSelectedIndexChanged="test">
                        <asp:ListItem Value="1" Text="Vide" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Hachure" Selected="False"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Image" Selected="False"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Couleur" Selected="False"></asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:Panel ID="p2" runat="server" Visible="false">
                        <label>Choisissez une image : </label>
                        <asp:DropDownList ID="Ddl_Image" runat="server"></asp:DropDownList>
                    </asp:Panel>
                    <asp:Panel ID="p3" runat="server" Visible="false">
                        <label>Choisissez une couleur : </label>
                        <asp:DropDownList ID="Ddl_Couleur" runat="server">
                            <asp:ListItem Value="1" Text="Rouge"></asp:ListItem>
                            <asp:ListItem Value="2" Text="Bleu"></asp:ListItem>
                            <asp:ListItem Value="3" Text="Jaune"></asp:ListItem>
                            <asp:ListItem Value="4" Text="Vert"></asp:ListItem>
                        </asp:DropDownList>
                    </asp:Panel>
                    <br />
                    <asp:Button ID="Valider1" runat="server" type="button" Text="Valider" onclick="Valider"/>
                    <asp:Button ID="Annuler1" runat="server" type="button" Text="Annuler" onclick="Annuler"/>
                    <br />
                </asp:Panel>
                <asp:Panel ID="p4" runat="server" Visible="false">
                    //Du code
                </asp:Panel>
                <asp:Panel ID="p5" runat="server" Visible="false">
                    //Du code
                </asp:Panel>
                <asp:Panel ID="p6" runat="server" Visible="false">
                    //Du code
                </asp:Panel>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="test" EventName="SelectedIndexChanged"/>
            </Triggers>
        </asp:UpdatePanel>

Et mon code C# :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
        protected void Page_Load(object sender, EventArgs e)
        {
            //Du code
        }
 
        public void test(Object sender, EventArgs e)
        {
            p4.Visible = true;
            p5.Visible = false;
            p6.Visible = false;
        }

**Joel Pinto Ribeiro** · 29/03/2013, 10h39

Si la problematique est de repasser dans le load lors du postback fais simplement un

Code :

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

1
2
3
   if (!IsPostBack) {
//du code
}

dans l'evenement load.

**DotNetMatt** · 29/03/2013, 10h41

Je confirme ce que propose Joel Pinto Ribeiro. En plus de cela, il faut rajouter l'attribut AutoPostBack à ta RadioButtonList, et le mettre à true :

Code ASP.NET :

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

<asp:RadioButtonList ID="test" runat="server" OnSelectedIndexChanged="test" AutoPostBack="true">

**Patmat44** · 29/03/2013, 10h42

non, je connaissais ça!!, Le problème c'est le rechargement de la page, je n'en veut pas!! Et pour moi c'est possible car j'ai déjà vu ça!!
Et j'ai essayé avec l'autopostback à true et il me recharge la page!!

**DotNetMatt** · 29/03/2013, 10h51

Je viens de tester chez moi avec l'échantillon de code que tu as posté, et il ne recharge pas toute la page

Il y a bien un appel AJAX qui est effectué pour permettre le rechargement l'UpdatePanel uniquement. Ce qui est pour moi normal...

Qu'est-ce que tu entends par "il me recharge la page!!" ?

Est-ce que tu dis ça parce qu'il repasse dans le Page_Load ? Ca, c'est normal et il faut utiliser la solution de Joel Pinto Ribeiro.

Quel navigateur utilises-tu ?

[EDIT] : Ahh je n'avais pas vu ça : met l'attribut UpdateMode de ton UpdatePanel à "Always" au lieu de "Conditional". Rajoute également l'AutoPostBack sur ta RadioButtonList.

**Patmat44** · 29/03/2013, 10h56

Autant pour moi alors^^ J'avais donc bien loupé un truc....
Je pensais que s'il ne rechargeait pas toute la page, il ne repasserai pas dans le page_load et que je ne verrais pas l'icone de chargement de page d'internet explorer!!

**Patmat44** · 29/03/2013, 11h09

pour vérifier, ce que je n'avais pas fait avant, j'ai rajouter un panel à l'extérieur de l'updatepanel.
Dans ce panel, j'ai mis un int que j'incrémente à chaque passage dans le page_load. et je m'aperçoit qu'en fait il me rafraichit bien entièrement la page puisque je vois le nombre changer dans ma page. Je comprends vraiment rien là!!!

**DotNetMatt** · 29/03/2013, 11h22

Je me suis fait un projet tout bête, à partir de l'échantillon de code que tu as donné :

Le code ASPX :

Code ASP.NET :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="Up1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:Panel ID="p1" runat="server" Visible="false">
            <label>Texte à afficher : </label>
            <asp:TextBox ID="Taff" runat="server"></asp:TextBox>
            <br />
            <label>Commentaire</label>
            <asp:TextBox ID="Comm" runat="server"></asp:TextBox>
            <br />
            <asp:RadioButtonList ID="test" runat="server" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true">
                <asp:ListItem Value="1" Text="Vide" Selected="True"></asp:ListItem>
                <asp:ListItem Value="2" Text="Hachure" Selected="False"></asp:ListItem>
                <asp:ListItem Value="3" Text="Image" Selected="False"></asp:ListItem>
                <asp:ListItem Value="4" Text="Couleur" Selected="False"></asp:ListItem>
            </asp:RadioButtonList>
            <asp:Panel ID="p2" runat="server" Visible="false">
                <label>Choisissez une image : </label>
                <asp:DropDownList ID="Ddl_Image" runat="server"></asp:DropDownList>
            </asp:Panel>
            <asp:Panel ID="p3" runat="server" Visible="false">
                <label>Choisissez une couleur : </label>
                <asp:DropDownList ID="Ddl_Couleur" runat="server">
                    <asp:ListItem Value="1" Text="Rouge"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Bleu"></asp:ListItem>
                    <asp:ListItem Value="3" Text="Jaune"></asp:ListItem>
                    <asp:ListItem Value="4" Text="Vert"></asp:ListItem>
                </asp:DropDownList>
            </asp:Panel>
            <br />
            <asp:Button ID="Valider1" runat="server" type="button" Text="Valider" onclick="Valider"/>
            <asp:Button ID="Annuler1" runat="server" type="button" Text="Annuler" onclick="Annuler"/>
            <br />
        </asp:Panel>
        <asp:Panel ID="p4" runat="server" Visible="false">
            //Du code p4
        </asp:Panel>
        <asp:Panel ID="p5" runat="server" Visible="false">
            //Du code p5
        </asp:Panel>
        <asp:Panel ID="p6" runat="server" Visible="false">
            //Du code p6
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="test" EventName="SelectedIndexChanged"/>
    </Triggers>
</asp:UpdatePanel>

Et le code behind :

Code C# :

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
protected void Page_Load(object sender, EventArgs e)
{
    p1.Visible = true;
}
 
protected void test_SelectedIndexChanged(object sender, EventArgs e)
{
 // Pour ralentir la mise à jour
    System.Threading.Thread.Sleep(1000);
    p4.Visible = true;
    p5.Visible = false;
    p6.Visible = false;
}
 
protected void Valider(object sender, EventArgs e)
{
}
 
protected void Annuler(object sender, EventArgs e)
{
}

Si tu te refais un projet Web chez toi, avec juste ça, est-ce que tu as le même comportement que sur ta page Web qui te pose problème ?

**Joel Pinto Ribeiro** · 29/03/2013, 11h32

Envoyé par Patmat44

Autant pour moi alors^^ J'avais donc bien loupé un truc....
Je pensais que s'il ne rechargeait pas toute la page, il ne repasserai pas dans le page_load et que je ne verrais pas l'icone de chargement de page d'internet explorer!!

Tu confonds 2 notions.

L'avantage d'utiliser ajax c'est que tu fais tes traitements sans republier toute la page.

Par contre au niveau du comportement des evenements cela se passe EXACTEMENT de la meme maniere que si tu fais un F5 par exemple, ou cliquer sur un bouton entrainant un postback sans ajax.

Donc c'est pas parce que tu ne vois pas le raffraichissement de la page qu'il ne passera pas dans l'evement load, c'est juste que l'utilisateur ne verra pas la page se republier.

**Patmat44** · 29/03/2013, 11h49

j'ai modifié un peu le code que tu m'as donné comme ceci :

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
 
        private static int x = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            test2.Text = x.ToString();
            x++;
            p1.Visible = true;
        }
 
        protected void test_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Pour ralentir la mise à jour
            System.Threading.Thread.Sleep(1000);
            p4.Visible = true;
            p5.Visible = false;
            p6.Visible = false;
        }
 
        protected void Valider(object sender, EventArgs e)
        {
        }
 
        protected void Annuler(object sender, EventArgs e)
        {
        }

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="Up1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:Panel ID="p1" runat="server" Visible="false">
            <label>Texte à afficher : </label>
            <asp:TextBox ID="Taff" runat="server"></asp:TextBox>
            <br />
            <label>Commentaire</label>
            <asp:TextBox ID="Comm" runat="server"></asp:TextBox>
            <br />
            <asp:RadioButtonList ID="test" runat="server" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true">
                <asp:ListItem Value="1" Text="Vide" Selected="True"></asp:ListItem>
                <asp:ListItem Value="2" Text="Hachure" Selected="False"></asp:ListItem>
                <asp:ListItem Value="3" Text="Image" Selected="False"></asp:ListItem>
                <asp:ListItem Value="4" Text="Couleur" Selected="False"></asp:ListItem>
            </asp:RadioButtonList>
            <asp:Panel ID="p2" runat="server" Visible="false">
                <label>Choisissez une image : </label>
                <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
            </asp:Panel>
            <asp:Panel ID="p3" runat="server" Visible="false">
                <label>Choisissez une couleur : </label>
                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem Value="1" Text="Rouge"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Bleu"></asp:ListItem>
                    <asp:ListItem Value="3" Text="Jaune"></asp:ListItem>
                    <asp:ListItem Value="4" Text="Vert"></asp:ListItem>
                </asp:DropDownList>
            </asp:Panel>
            <br />
            <asp:Button ID="Button1" runat="server" type="button" Text="Valider" onclick="Valider"/>
            <asp:Button ID="Button2" runat="server" type="button" Text="Annuler" onclick="Annuler"/>
            <br />
        </asp:Panel>
        <asp:Panel ID="p4" runat="server" Visible="false">
            <Label>p4</Label>
        </asp:Panel>
        <asp:Panel ID="p5" runat="server" Visible="false">
            <Label>p5</Label>
        </asp:Panel>
        <asp:Panel ID="p6" runat="server" Visible="false">
            <Label>p6</Label>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="test" EventName="SelectedIndexChanged"/>
    </Triggers>
</asp:UpdatePanel>
    <asp:Panel ID="temp" runat="server"><asp:Label runat="server" ID="test2"></asp:Label></asp:Panel>

et panel temp tout à la fin est actualisé^^ et ça je ne veut pas
Alors soit j'ai rien compris à ajax et il faut que je me refasse la doc, soit je me suis mal exprimé!!

**Joel Pinto Ribeiro** · 29/03/2013, 12h28

tant que tu ne mettras pas le

Code :

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

1
2
3
 if (!IsPostBack) {
//du code
}

Il passera par le load et ton panel sera actualisé.

**Patmat44** · 29/03/2013, 12h39

mais je ne l'actualise pas mon panel dans page_load donc ça me servira à rien de mettre "if (!IsPostBack)" si j'ai rien à mettre dedans!!

**hwoarang** · 29/03/2013, 13h07

Juste pour préciser un peu les choses, il faut savoir que le serveur ASP ne garde pas les pages des clients connectés en mémoire. Par conséquent, à chaque postback, il est obligé de recharger la page complete afin de vérifier que le postback est valide (c'est à dire qu'il a été créé par un composant qui existe, qui est visible et enabled).
Ca, c'est le comportement qu'il y ait un update panel ou pas. La différence, c'est que s'il y a un update panel, seul les informations qui concernent les composants à l'intérieur de celui-ci sont envoyées au client. Ca diminue donc la quantité de données transférées.
Un lien qui n'a pas grand chose à voir avec le probleme de ce thread mais qui est interessant pour ceux qui suivent toujours

http://encosia.com/why-aspnet-ajax-u...are-dangerous/

Bon, pour revenir au probleme du thread, j'ai l'impression que ce que tu veux, c'est effectuer le traitement coté client plutot que coté serveur. Il faut donc executer du javascript pour afficher/cacher les panels en fonction du radiobutton.
J'ajoute que pour que ca marche, il faut que tous les panels soient visible (propriété visible à true sinon, il ne sont pas envoyés au client). Pour les cacher, il faut utiliser l'attribut suivant : style="visibility:hidden;"

**Joel Pinto Ribeiro** · 29/03/2013, 13h15

Envoyé par Patmat44

mais je ne l'actualise pas mon panel dans page_load donc ça me servira à rien de mettre "if (!IsPostBack)" si j'ai rien à mettre dedans!!

Quand tu dis que le panel temp est actualisé , concretement ça veut dire quoi?
Qu'est ce qui s'actualise?

**Patmat44** · 29/03/2013, 13h22

ok donc si j'ai bien compris, je dois créer mes updatepanel et panel et tous les composants et leurs données au chargement de la page et ensuite montrer ou cacher avec le javascript.

Merci

**Patmat44** · 29/03/2013, 13h24

Envoyé par Joel Pinto Ribeiro

Quand tu dis que le panel temp est actualisé , concretement ça veut dire quoi?
Qu'est ce qui s'actualise?

et bien à chaque fois que je clic sur un radiobutton mon nombre qui se trouve dans le label du panel "temp" s'incrémente, moi je veux pas le voir s'incrémenter, mais qu'il le soit dans le code ( par exemple, dans le code, il vaut 2 mais sur ma page, il reste affiché 1)

raffraichir updatepanel sans rafraichissement de la page entière

ASP.NET

Discussions similaires

Partager

Partager