Discussion :

[tiboleo]

Bonsoir, le titre n'est pas très explicite : je développe...

Je bosse sur un module d'évaluation de logements.
L'utilisateur coche les critères existant dans son logement et le système évalue alors le bien.

Les critères sont groupés par catégorie (appelés ZONE dans la base) : exemple : le critère "portail automatique" concerne la zone "abords de l'habitation", etc.

J'alimente donc dynamiquement un Ajax Accordion avec dans chaque panel une Datalist liée.
Header : ZONE
Content : liste des critères de la ZONE

Voici pour info le code :
On note une dropddownlist à gauche pour choisir entre une maison et un appartement (car les critères d'évaluation ne sont pas rigoureusement les mêmes)

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
51
52
53
54
55
 
<div id="evaluation-gauche" class="evaluation">
 
            <div id="criteres-generiques">
                <asp:Label ID="Label3" runat="server" Text="Type de bien "></asp:Label>
                <asp:DropDownList ID="DropDownListTypesBiens" runat="server" 
                    AutoPostBack="True" DataSourceID="ObjectDataSourceTypesBiens" 
                    DataTextField="LIBELLE_TYPE_BIEN" DataValueField="ID_TYPE_BIEN" 
                    onselectedindexchanged="DropDownListTypesBiens_SelectedIndexChanged">
                </asp:DropDownList>
                <br />
                <asp:Label ID="Label2" runat="server" Text="Nom de l'évaluation :"></asp:Label><asp:TextBox ID="TextBoxNomEvaluation" runat="server"></asp:TextBox>
            </div>
        </div>
        <!-- tooltip tools.tooltip-1.1.3.min.js 
        Pb : l'image ne s'adapte pas à la longueur du texte
        -->
        <div id="demotip" style="position:absolute; z-index:2" >&nbsp;</div> 
        <div id="evaluation-centre" class="evaluation">
                <ajaxToolkit:Accordion ID="Accordion1" runat="server"
                onitemdatabound="Accordion1_ItemDataBound" SuppressHeaderPostbacks="True" Width="500"
                   HeaderCssClass="accordionHeader" 
                    HeaderSelectedCssClass="accordionHeaderSelected" 
                    ContentCssClass="accordionCriteres" TransitionDuration="200" 
                    FadeTransitions="False" ondatabinding="Accordion1_DataBinding">            
                <HeaderTemplate>
                    <asp:Label ID="LabelZone" runat="server" Text='<%# Eval("LIBELLE_ZONE") %>'></asp:Label>
                </HeaderTemplate>
                <ContentTemplate>
                    <asp:HiddenField runat="server" ID="hidZone" value='<%# Eval("ID_ZONE") %>'></asp:HiddenField>                     
                    <!--
                    <asp:DataList ID="DataList1" runat="server" Width="200" Visible="true">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="labelCritere" Text='<%# Eval("LIBELLE_CRITERE") %>' value='<%# Eval("LIBELLE_CRITERE") %>' Visible="true"></asp:Label>
                        </ItemTemplate>                    
                    </asp:DataList>
                    -->
                    <asp:DataList ID="DataList2" runat="server" DataKeyField="ID_CRITERE" 
                        onitemdatabound="DataList1_ItemDataBound">
                        <ItemTemplate>
                            <asp:Label ID="ID_CRITERELabel" runat="server" 
                                Text='<%# Eval("ID_CRITERE") %>' Visible="false" />
                            <asp:HiddenField runat="server" ID="hidTypeControle"></asp:HiddenField>                            
                            <asp:Label ID="LabelTest" runat="server" Text="Label"></asp:Label>
                            <asp:Label ID="LabelTest2" runat="server" Text="Label"></asp:Label>                             
                            <asp:CheckBox ID="CheckBoxCritere" runat="server"  Visible="false" Text='<%# Eval("LIBELLE_CRITERE") %>'/>
                            <asp:Label ID="LabelCritere" runat="server"  Visible="false" Text='<%# Eval("LIBELLE_CRITERE") %>'/>
                            <asp:TextBox ID="TextBoxCritere" runat="server" Visible="false"></asp:TextBox>
                            <img alt="" title='<%# Eval("DESCRIPTION_CRITERE") %>' src="App_Themes/Defaut/images/info-critere.gif" />
                            <br />
                        </ItemTemplate>
                    </asp:DataList>                
                </ContentTemplate> 
             </ajaxToolkit:Accordion>                
       </div>

A droite de l'Accordion, un bouton pour lancer l'évaluation :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="evaluation-droite" class="evaluation">
           <asp:Button ID="Button1" runat="server" Text="Evaluer" 
               onclick="Button1_Click" />
           <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>           
           <br />
           <asp:Label ID="Label4" runat="server" Text="Note 1 : "></asp:Label>
           <asp:Label ID="LabelNote1" runat="server" Text=""></asp:Label><br />
           <asp:Label ID="Label5" runat="server" Text="Note 2 : "></asp:Label>
           <asp:Label ID="LabelNote2" runat="server" Text=""></asp:Label><br />
           <asp:Label ID="Label6" runat="server" Text="Note 3 : "></asp:Label>
           <asp:Label ID="LabelNote3" runat="server" Text=""></asp:Label>
 
       </div>

En code Behind, je gère la liaison et le remplissage :

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
 
public void BindAccordion()
    {        
        IEvaluerHabitat eval = new EvaluerHabitat();
        Accordion1.DataSource = eval.GetZonesParType(TypeBien);        
        Accordion1.DataBind();  
    }
 
    protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        if (e.ItemType == AccordionItemType.Content)
        {
            DataList DataList1 = (DataList)e.AccordionItem.FindControl("DataList2");
            HiddenField hidZone = (HiddenField)e.AccordionItem.FindControl("hidZone");            
            BindGrid(DataList1, Int32.Parse(hidZone.Value), TypeBien);            
        } 
    }
 
    private void BindGrid(DataList List, int id_zone, int type_bien)
    {
        IEvaluerHabitat eval = new EvaluerHabitat();
 
        List.DataSource = eval.GetCriteresZones(type_bien, id_zone);
        List.DataBind();
    }
    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        byte type_controle = ((CRITERE)(e.Item.DataItem)).CONTROLE.Value;
        ((HiddenField)(e.Item.FindControl("hidTypeControle"))).Value = type_controle.ToString();
 
        switch (type_controle)
        {
            case 1:
                ((CheckBox)(e.Item.FindControl("CheckBoxCritere"))).Visible = true;
                break;
            case 2:
                ((Label)(e.Item.FindControl("LabelCritere"))).Visible = true;
                ((TextBox)(e.Item.FindControl("TextBoxCritere"))).Visible = true;
                break;
            case 3:
                break;
        }
        //TEST
        ((Label)(e.Item.FindControl("LabelTest"))).Text = ((CRITERE)(e.Item.DataItem)).ID_CRITERE.ToString();
 
    }

J'ai aussi une méthode pour récupérer la liste des critères choisis : un dictionnaire avec pour clé l'ID_CRITERE et en valeur ...la valeur (1 pour une checkbox cochée, sinon, la valeur numérique d'une textbox)

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
 
public Dictionary<int, int> CriteresChoisis()
    {      
 
        Dictionary<int, int> choix = new Dictionary<int, int>();
        string type_controle = "1"; 
 
        for (int i = 0; i < Accordion1.Panes.Count; i++)
        {
            DataList DataList = (DataList) Accordion1.Panes[i].FindControl("DataList2");            
 
            for (int j = 0; j < DataList.DataKeys.Count; j++)
            {
                type_controle = ((HiddenField)(DataList.Items[j].FindControl("hidTypeControle"))).Value;                           
 
                switch (type_controle)
                {
                    case "1":
                        if (((CheckBox)(DataList.Items[j].FindControl("CheckBoxCritere"))).Checked)
                            choix[Int32.Parse(DataList.DataKeys[j].ToString())] = 1;
                        break;
                    case "2":
                        if (((TextBox)(DataList.Items[j].FindControl("TextBoxCritere"))).Text != "")
                            choix[Int32.Parse(DataList.DataKeys[j].ToString())] = Int32.Parse(((TextBox)(DataList.Items[j].FindControl("TextBoxCritere"))).Text);
                        break;
                    case "3":
                        break;
                }
            }
        } 
 
        return choix;
    }

Alors quel problème ?
L'affichage de l'Accordion fonctionne très bien.
Au lancement, j'affiche les critères pour "Maison" (premier item de la dropdownlist).
Si je coche des critères et démarre l'évaluation : OK.

Le problème est lorsque je change et que je choisis "Appartement".

Code :

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

1
2
3
4
5
6
7
8
 
protected void DropDownListTypesBiens_SelectedIndexChanged(object sender, EventArgs e)
    {
        TypeBien = Int32.Parse(DropDownListTypesBiens.SelectedValue);
        ResetNotes();        
        BindAccordion();       
 
    }

L'accordion s'affiche également bien mais lorsque je coche des cases et lance l'évaluation, le système perd les pédales et "confond" des critères.
Exemple :
Je coche les 2 premiers critères du panel 1, il me fait les calculs avec les 2 premiers critères du dernier Panel.

Dans ce cas, j'ai vu en affichant le code de la page que l'ID du dernier panel prenait l'ID précédemment affecté au premier...

Lorsque je reviens en mode "Maison", ça ne marche plus non plus...

Bizarre et sans doute pas très clair.
Avez vous une idée ?

Merci,
T.

[tiboleo]

Bonjour,

Pour affiner la question :

Comment faire (au moment de la selection dans la dropdownlist par exemple) pour "remettre les compteurs à 0", c'est à dire se retrouver dans la configuration initiale (pas de problème tant que je n'ai pas changé d'index dans la liste et donc que l'accordion n'a pas été reconstruit).

J'ai essayé de mettre les datasource (accordion + chaque datalist) à null et databinder, j'ai essaté le Dispose()....mai rien ne convient.

Merci beaucoup,
T.

Si joint les captures d'écran :
1.jpg : maison
2.jpg : appartement
3.jpg : saisie évaluation appartement
4.jpg : résultat saisie appartement (les cases à cocher ont été déplacées dans la dernière section)










Rq : ne faites pas attention aux chiffres et au label devant chaque checkbox (je testais simplement si les ID_CRITERE (keyname de la datalist) restaient bons).

[tiboleo]

Bon, le problème c'est que les ID des contrôles changent.
Exemple :

Code :

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

#ctl00_Main_ctl02_DataList2_ctl00_hidTypeControle

devient après DropDownListTypesBiens_SelectedIndexChanged :

Code :

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

#ctl00_Main_ctl26_DataList2_ctl00_hidTypeControle

Ensuite, tout appel de ma fonction d'évaluation (CriteresChoisis()) fait revarier les ID.
C'est au niveau du DropDownListTypesBiens_SelectedIndexChanged que cela déconne.

Initialement (au chargement de la form) je peux appeler autant de fois que je veux cette procédure, les ID de mes contrôles ne changent pas...

Y aurait-il un moyen sur le DropDownListTypesBiens_SelectedIndexChanged, de faire "table rase" et de tout réinitialiser comme au chargement initial (!IsPostBack) ?

Merci beaucoup,
T.

[tiboleo]

Bonjour,

N'ayant pas résolu ce problème, j'ai changé de méthode.
Au lieu de recréer à la volée les contrôles, je ne les crée qu'au chargement initial puis je gère les masquer/afficher en fonction du contexte.
ça évite de recréer des contrôles dont les ID varient d'une fois sir l'autre.
T.