Discussion :

[theMonz31]

Bonjour

Mon problème est simple.

Dans ma page asp.Net, j'ai ceci:

Code :

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

1
2
3
4
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
        <asp:ListItem>Avec XXX</asp:ListItem>
        <asp:ListItem Selected="True">Sans XXX</asp:ListItem>
    </asp:RadioButtonList>

Dans mon code behind, j'ai le code suivant dans le page_load

Code :

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

RadioButtonList1.Items[0].Attributes.Add("onclick", "document.getElementById( 'optionpanel' ).style.display = 'block';");            RadioButtonList1.Items[1].Attributes.Add("onclick", "document.getElementById( 'optionpanel' ).style.display = 'none';");

et mon option panel...

Code :

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

 <asp:Panel id="optionpanel" hidden="hidden" >

Avec ce code, j'arrive donc à faire, coté client, que l'appui sur l'un des radiobutton affiche ou pas mon panel...

Maintenant, lors du chargement de ma page, je dois positionner le radioButton à une valeur provenant d'une base de données...

Je fais donc le code suivant:

Code :

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

1
2
RadioButtonList1.Items[0].Selected = contrat.SWAP;
RadioButtonList1.Items[1].Selected = !contrat.SWAP;

Résultat ==> Mon radioButton est bien configuré...

Question : Comment je fais pour que mon panel soit visible aussi ?

Réponse : J'ai essayé avec l'attribut : Runat="server"...

Celà me permet alors de faire du code genre :

optionPanel.Style["display"] = "block";

SAUF QUE:
Mon comportement avec les radiobutton ne fonctionne plus du cout (peut-etre à cause du runat="server"...

Au final, ma question se résumerait donc à :

Est-il possible d'avoir des radioButton qui gère l'affichage / masquage d'un controle coté client tout en ayant la possibilité d'initialiser l'état des controles
comme il convient qu'ils soient !!!


Merci d'avance...

[FirePrawn]

Tout simplement en virant l'attribut hidden de ton Panel ?

[theMonz31]

bah non, ca ne marche pas...

A partir du moment ou je "vire" le runat="server", le clique sur les radio boutons cachent bien ou affichent bien le panel...mais par contre, le panneau n'est pas affiché au début suivant la valeur...

et si je mets le runat="server", je peux effectivement définir l'état de mon panneau, mais le code client ne fonctionne plus alors...

que faire ?

[FirePrawn]

Ton panneau ne contient rien ?

Tu as essayé en mettant tout simplement un style="display:block;" sur ton Panel ?

Et accessoirement ton javascript ne fonctionne plus si tu mets ton Panel en runat='server' pour la simple et bonne raison que du coup l'id de ton Panel n'est plus le même.
L'ID est bien 'optionpanel' mais c'est l'ID côté ASP.NET. L'id de l'élément HTML généré lui ne sera pas optionpanel.
Pour se faire :

Code :

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

getElementById('<%=optionpanel.ClientID%>')

[theMonz31]

mon panel est :

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
<asp:Panel id="optionpanel"  runat="server">
        <table class="auto-style1">
            <tr>
                <td class="auto-style4">Délai SWAP:</td>
                <td>
                    <table class="auto-style1">
                        <tr>
                            <td class="auto-style7">j+</td>
                            <td>
                                <ig:WebDropDown ID="DelaiSWAP" runat="server" StyleSetName="RubberBlack" Width="200px">
                                    <Items>
                                        <ig:DropDownItem Selected="True" Text="1" Value="1">
                                        </ig:DropDownItem>
                                        <ig:DropDownItem Selected="False" Text="2" Value="2">
                                        </ig:DropDownItem>
                                        <ig:DropDownItem Selected="False" Text="3" Value="3">
                                        </ig:DropDownItem>
                                        <ig:DropDownItem Selected="False" Text="4" Value="4">
                                        </ig:DropDownItem>
                                        <ig:DropDownItem Selected="False" Text="5" Value="5">
                                        </ig:DropDownItem>
                                    </Items>
                                </ig:WebDropDown>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </table>
    </asp:Panel>

Le problème n'est pas d'afficher mon panel, mais de pouvoir, lors du load choisir son état (affiché ou pas) et ensuite,par appui sur 2 radio boutons de changer son style (visible, caché)... sans faire un postback.... sinon, ca serait trop simple

[FirePrawn]

Relis mon post précédent j'ai édité

[theMonz31]

beh oui,

j'ai coté code behind :

Code :

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

1
2
RadioButtonList1.Items[0].Attributes.Add("onclick", "document.getElementById('<%=optionpanel.ClientID%>').style.display = 'block';");
RadioButtonList1.Items[1].Attributes.Add("onclick", "document.getElementById('<%=optionpanel.ClientID%>').style.display = 'none';");

et coté aspx

Code :

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

1
2
3
<asp:Panel id="optionpanel"  style="display:block" runat="server">
        <table class="auto-style1">
....

Mais toujours la même situation, à savoir : le radiobutton n'a plus aucune action dirait-on...

[Joel Pinto Ribeiro]

Sinon ya peut etre la solution de tout mettre en controles runat=server et utiliser l'ajax lors d'un click sur un radiobutton pour afficher/cacher le panel sans avoir de postback total?

[theMonz31]

joel, c'est surement une solution mais si je maitrisais asp.net, j'y aurais pensé...

donc, si tu peux "développer" un peu...

[FirePrawn]

Regarde dans la console de ton navigateur tu dois avoir une erreur JS...
Le Javascript ça se debug tu sais

[theMonz31]

ah oui...

Beh la console dit : "cannot reader property style of null'

donc, la ligne :

document.getElementById('<%=optionpanel.ClientID%>').style.display = 'block';");

doit retourner un élément null... mais comment est-ce possible ? vu que l'asp:panel a bien pour id : optionpanel ?

[FirePrawn]

Tu as essayé en mettant ton code directement dans l'attribut onclick de tes boutons ?

[theMonz31]

beh je ne peux pas puisqu'il s'agit de ListItem....

D'ou le code d'ajout du code par Attribut dans le PAge_load

[theMonz31]

si je remplace :

Code :

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

1
2
RadioButtonList1.Items[0].Attributes.Add("onclick", "document.getElementById('optionpanel').style.display = 'block';");
RadioButtonList1.Items[1].Attributes.Add("onclick", "document.getElementById('optionpanel').style.display = 'none';");

par:

Code :

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

1
2
RadioButtonList1.Items[0].Attributes.Add("onclick", "ctl00_ContentPlaceHolder1_optionpanel.style.display = 'block';");
RadioButtonList1.Items[1].Attributes.Add("onclick", "ctl00_ContentPlaceHolder1_optionpanel.style.display = 'none';");

Ca marche.. .mais c'est juste "trop" vilain... pourquoi js n'arrive pas à résoudre le nom pour obtenir l'objet ?

[Joel Pinto Ribeiro]

http://www.ajaxtutorials.com/general...asp-net-and-c/

Ici il y a un exemple complet, dans l'evenement RadioButtonList1_SelectedIndexChanged il te suffit de cacher/afficher ton optionpanel selon tes criteres .

De cette maniere il n'y aura pas de rechargement complet de la page normalement. (Pense juste à bien mettre optionpanel dans <ContentTemplate> )

MAJ: J'avais pas vu la suite des messages, dans ce cas faut mettre le clientid

Code :

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

RadioButtonList1.Items[1].Attributes.Add("onclick", "document.getElementById('"+optionpanel.ClientID +"').style.display = 'none';");

[theMonz31]

Je mets le clientID ==>

Code :

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

1
2
RadioButtonList1.Items[0].Attributes.Add("onclick", "document.getElementById('optionpanel').style.display = 'block';");
RadioButtonList1.Items[1].Attributes.Add("onclick", "document.getElementById('optionpanel').style.display = 'none';");

Mais CA NE MARCHE PAS

Que je l'écrive comme j'ai fait, ou comme ça :

Code :

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

document.getElementById('<%=optionpanel.ClientID%>'

Ca ne marche pas...

pourquoi ?

[theMonz31]

Merci Joël

Grace à ton lien, j'ai pu comprendre l'utilisation d'Ajax dans ma situation...

J'ai progressé et appris de nouvelles choses, donc, je vais retenir ta solution plutôt qu'une solution à base de js.. (brr, que j'aime pas le js)

Merci