RadioButtonList + Panel

Version imprimable

Bonjour

Mon problème est simple.

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

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:

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:

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

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

07/03/2014, 10h36
FirePrawn

:salut:

Tout simplement en virant l'attribut hidden de ton Panel ? :aie:
07/03/2014, 10h56
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 ?
07/03/2014, 10h58
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:

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

mon panel est :

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

07/03/2014, 11h03
FirePrawn

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

beh oui,

j'ai coté code behind :

Code:

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:

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

07/03/2014, 11h55
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?
07/03/2014, 11h56
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... ;)
07/03/2014, 12h06
FirePrawn

Regarde dans la console de ton navigateur tu dois avoir une erreur JS...
Le Javascript ça se debug tu sais :)
07/03/2014, 12h14
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 ?
07/03/2014, 12h17
FirePrawn

Tu as essayé en mettant ton code directement dans l'attribut onclick de tes boutons ?
07/03/2014, 12h20
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

si je remplace :

Code:

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:

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 ?

07/03/2014, 12h59
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:

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

Je mets le clientID ==>
Code:

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:

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

Ca ne marche pas...

pourquoi ?

07/03/2014, 13h44
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