MVC3 Cascading DropDownList

Version imprimable

Salut,

Dans mon appli', j'ai une page d'analyse qui sert à afficher les logs de différentes applis, on m'a donc demandé de réaliser des listes déroulantes permettant d'afficher selon certains critères cette page de Logs.

Le problème, c'est que j'ai deux listes déroulantes :

la première qui sert à choisir l'application
et la deuxième qui me sert à choisir la période d'affichage des logs pour l'appli sélectionnée.

Et c'est sur le deuxième point que je bloque, chaque application possède des types de périodes différentes, par exemple l'application 1 aura des logs mensuels, dans la liste, j'aurais donc : Janvier 2012, Février 2012, etc... tandis que l'application 2 aura des logs journaliers, mensuels et semestriels mais j'ai un peu de mal à voir comment le faire.

J'ai fait quelques recherches et j'ai pu voir qu'il fallait utiliser du Javascript mais je ne suis pas du tout calé dans ce langage, j'ai essayé un script que j'ai récupéré sur un site mais bon, il ne fonctionne pas ;D

Le voici avec mes listes dans ma vue :
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 @using (Html.BeginForm("PageErreurs", "Suivi", new { Timing = "KO" })) { @Html.ListBox("SubCR", ViewBag.Liste1 as MultiSelectList, new { size = 5 }) <script type="text/javascript"> $(function () { $("SubAppli").change(function (evt) { if ($("SubAppli").val() != "-1") { $.ajax({ url: "/Suivi/PageErreurs", type: 'POST', data: { ChoixAppli: $("SubAppli").val() }, success: function (response) { $("SubPeriode").replaceWith(response) }, error: function (xhr) { alert("Erreur au niveau des listes et du JS !"); } }); } }); }); </script> @Html.ListBox("SubAppli", ViewBag.Liste2 as MultiSelectList) @Html.ListBox("SubPeriode", ViewBag.Liste3 as MultiSelectList) <input id="Submit1" type="submit" value="Valider" class="bt_submit"/> }
Et je récupère la variable qui est normalement renvoyée à mon action afin d'afficher ce que je souhaite et récupérée par celle-ci :
Code:

1 2 public ActionResult PageErreurs(string Timing, string[] SubCR, string[] SubAppli, string ChoixAppli)
Et ensuite, j'utilise le contenu de cette variable pour alimenter ma liste en fonction de celle-ci avec une requête.

J'ai essayé d'exécuter ce script mais rien à faire, il ne se passe rien :/

Avez-vous une idée ?

Merci.

P.S : Si jamais, j'ai besoin d'installer des packages ou autres, ce n'est pas possible, l'accès Internet est bloqué sur mon serveur de Dev'.

Bon j'ai un peu avancé sur mon soucis (à vrai dire pendant toute la journée mais bon...) et au moins, un truc se passe sur mon écran :D ...

Lorsque je sélectionne une valeur dans ma liste, la liste qui doit contenir des données en fonction de la valeur choisie par la première liste m'affiche une liste immense de blanc alors que normalement elle devrait contenir moins d'une dizaine de valeurs et ça commence à me prendre le choux :scarymov:

Voici le script que j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
            <script>
                $(document).ready(function () {
                    $("#SubAppli").change(function () {
                        $.ajax({
                            url: "/Suivi/PageErreurs/",
                            type: 'POST',
                            data: { ChoixAppli: $(this).val() },
                            datatype: 'json',
                            success: function (data) {
                                var elements = "";
                                $.each(data, function () {
                                    elements = elements + '<option value="' + this.ListePeriode + '">'
                                })
                                $('#SubPeriode').empty().attr('disabled', false).append(elements);
                            }
                        });
                    });
                });
 
            </script>

SubAppli correspond à ma première Liste comme indiquée sur mon premier post et SubPeriode à ma deuxième.

Voici les quelques parties de mon action qui je pense sont les plus intéressantes.

Alimentation des listes déroulantes, la première concernant les Applications :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var itemsAppli = GetAppli();
            var queryAppli = (from i in itemsAppli
                              select new Suivi { CD_APPLI = i.Field<String>("CD_APPLI") }).ToList();
 
            List<string> ListeAppli = new List<string>();
 
            foreach (var recup in queryAppli)
            {
                ListeAppli.Add(recup.CD_APPLI);
            }
 
 
            MultiSelectList Liste2 = new MultiSelectList(ListeAppli, "CD_APPLI");
 
            ViewBag.Liste2 = Liste2;

Et la deuxième où je récupère les périodes sous le format "20121101" (dans la base en bigint) que je transforme avec mes conditions en leur valeur Texte :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
var QueryDate = (from i in itemsDate
                                 where i.Field<String>("CD_APPLI").Trim() == ChoixAppli.Trim()
                                 select new Suivi { PERIODE = i.Field<Int64>("PERIODE") }).ToList();
 
                List<string> ListePeriode = new List<string>();
                if (QueryDate.Count == 0)
                {
                    ListePeriode.Add("Aucunes dates");
                }
                else
                {
                    //Boucle parcourant le résultat de la requête précédente.
                    foreach (var resultat in QueryDate)
                    {
                        //Opérations sur le résultat afin de le découper en 2 morceaux pour effectuer la translation chiffres/lettres (ex:01 => Janvier).
                        string RecupDate = resultat.PERIODE.ToString();
                        string RecupAnnee = RecupDate.Substring(0, 4);
                        string RecupMois = RecupDate.Substring(4, 2);
 
                        //Série de conditions sur les valeurs récupérées dans RecupMois.
                        if (RecupMois == "01")
                        {
                            if (ListePeriode.Contains("Janvier " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                //La valeur est ajoutée dans la liste avec l'année récupérée plus haut.
                                ListePeriode.Add("Janvier " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "02")
                        {
                            if (ListePeriode.Contains("Février " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Février " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "03")
                        {
                            if (ListePeriode.Contains("Mars " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Mars " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "04")
                        {
                            if (ListePeriode.Contains("Avril " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Avril " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "05")
                        {
                            if (ListePeriode.Contains("Mai " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Mai " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "06")
                        {
                            if (ListePeriode.Contains("Juin " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Juin " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "07")
                        {
                            if (ListePeriode.Contains("Juillet " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Juillet " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "08")
                        {
                            if (ListePeriode.Contains("Aout " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Aout " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "09")
                        {
                            if (ListePeriode.Contains("Septembre " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Septembre " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "10")
                        {
                            if (ListePeriode.Contains("Octobre " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Octobre " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "11")
                        {
                            if (ListePeriode.Contains("Novembre " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Novembre " + RecupAnnee);
                            }
                        }
                        else if (RecupMois == "12")
                        {
                            if (ListePeriode.Contains("Décembre " + RecupAnnee))
                            {
                                //Rien n'est ajouté dans la liste.
                            }
                            else
                            {
                                ListePeriode.Add("Décembre " + RecupAnnee);
                            }
                        }
                    }
                }
 
                MultiSelectList Liste3 = new MultiSelectList(ListePeriode, "PERIODE");
 
                ViewBag.Liste3 = Liste3;

Cette action s'appelle "PageErreurs" dans le contrôleur "Suivi".

Voilà, si jamais vous voulez d'autres informations, code ou autres, signalez le moi.

Merci d'avances pour vos réponses, en espérant qu'il y en ait :aie:

10/12/2012, 13h40
Genyuumaru

Je reviens sur ce problème et vous demande juste une dernière fois après je vous laisserais tranquille...avez-vous une idée pour résoudre mon soucis ?

J'ai trouvé la solution pour mes listes, j'vais faire court, voici mon modèle de vue :

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
 
public class ClasseListesDeroulantes
    {
        public string APPLI { get; set; }
        public string CAISSE { get; set; }
        public Int64? PERIODE { get; set; }
 
        Requetes rq = new Requetes();
        string requeteAppli = "select distinct CD_APPLI, ORDRE_APPLI from dbo.REF_APPLI where CD_APPLI != 'PNB' order by ORDRE_APPLI";
        string requeteCR = "select distinct CD_CR, LB_CR from dbo.REF_CR";
 
        public IEnumerable<SelectListItem> Applis
        {
            get
            {
                var itemsAppli = rq.executerRequete(requeteAppli);
                var queryAppli = (from i in itemsAppli
                                  select new SelectListItem { Value = i.Field<String>("CD_APPLI").ToString(),
                                                            Text = i.Field<String>("CD_APPLI").ToString() });
 
                return queryAppli.AsEnumerable();
            }
        }
 
        public IEnumerable<SelectListItem> Caisses
        {
            get
            {
                var itemsCR = rq.executerRequete(requeteCR);
                var queryCR = (from i in itemsCR
                                select new SelectListItem
                                {
                                    Value = i.Field<String>("CD_CR").ToString(),
                                    Text = i.Field<String>("LB_CR").ToString()
                                });
 
                return queryCR.AsEnumerable();
            }
        }
    }

Mes actions :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
public ActionResult PageTests(string PERIODE)
        {
            var DDL = new ClasseListesDeroulantes();
 
            if (PERIODE != null || PERIODE != "")
            {
                ViewData["ResPeriode"] = PERIODE;
            }
 
            return View(DDL);
        }
 
        public ActionResult Periode(string appli)
        {
            var itemsDate = rq.executerRequete(requetePERIODE2);
            //Récupération des différentes périodes en fonction de la CR dans une liste.
            var queryPeriode = (from i in itemsDate
                               where i.Field<String>("CD_APPLI").Trim() == appli.Trim()
                               select new ClasseListesDeroulantes { PERIODE = i.Field<Int64>("PERIODE")}).ToList();
 
            List<string> ListePeriode = new List<string>();
            #region Boucle d'ajout d'éléments dans la liste ListePeriode
            //Boucle parcourant le résultat de la requête précédente.
            foreach (var resultat in queryPeriode)
            {
                //Opérations sur le résultat afin de le découper en 2 morceaux pour effectuer la translation chiffres/lettres (ex:01 => Janvier).
                string RecupDate = resultat.PERIODE.ToString();
                string RecupAnnee = RecupDate.Substring(0, 4);
                string RecupMois = RecupDate.Substring(4, 2);
 
                //Série de conditions sur les valeurs récupérées dans RecupMois.
                if (RecupMois == "01")
                {
                    if (ListePeriode.Contains("Janvier " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        //La valeur est ajoutée dans la liste avec l'année récupérée plus haut.
                        ListePeriode.Add("Janvier " + RecupAnnee);
                    }
                }
                else if (RecupMois == "02")
                {
                    if (ListePeriode.Contains("Février " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Février " + RecupAnnee);
                    }
                }
                else if (RecupMois == "03")
                {
                    if (ListePeriode.Contains("Mars " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Mars " + RecupAnnee);
                    }
                }
                else if (RecupMois == "04")
                {
                    if (ListePeriode.Contains("Avril " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Avril " + RecupAnnee);
                    }
                }
                else if (RecupMois == "05")
                {
                    if (ListePeriode.Contains("Mai " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Mai " + RecupAnnee);
                    }
                }
                else if (RecupMois == "06")
                {
                    if (ListePeriode.Contains("Juin " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Juin " + RecupAnnee);
                    }
                }
                else if (RecupMois == "07")
                {
                    if (ListePeriode.Contains("Juillet " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Juillet " + RecupAnnee);
                    }
                }
                else if (RecupMois == "08")
                {
                    if (ListePeriode.Contains("Aout " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Aout " + RecupAnnee);
                    }
                }
                else if (RecupMois == "09")
                {
                    if (ListePeriode.Contains("Septembre " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Septembre " + RecupAnnee);
                    }
                }
                else if (RecupMois == "10")
                {
                    if (ListePeriode.Contains("Octobre " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Octobre " + RecupAnnee);
                    }
                }
                else if (RecupMois == "11")
                {
                    if (ListePeriode.Contains("Novembre " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Novembre " + RecupAnnee);
                    }
                }
                else if (RecupMois == "12")
                {
                    if (ListePeriode.Contains("Décembre " + RecupAnnee))
                    {
                        //Rien n'est ajouté dans la liste.
                    }
                    else
                    {
                        ListePeriode.Add("Décembre " + RecupAnnee);
                    }
                }
            }
            #endregion
 
            List<SelectListItem> periode = new List<SelectListItem>();
            int compteur = 0;
            foreach (var resultat in queryPeriode)
            {
                periode.Add(new SelectListItem
                            {
                                Text = ListePeriode.ElementAt(compteur),
                                Value = resultat.PERIODE.ToString()
                            });
                compteur++;
            }
 
            return Json(periode.AsEnumerable(), JsonRequestBehavior.AllowGet);
        }

Et ma vue :

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
 
@using (Html.BeginForm("PageTests", "Suivi"))
{
    @Html.DropDownListFor(
        x => x.CAISSE,
        new MultiSelectList(Model.Caisses, "Value", "Text"),
        "-- Caisses Régionales --"
    )
 
    @Html.DropDownListFor(
        x => x.APPLI,
        new SelectList(Model.Applis, "Value", "Text"),
        "-- Application --"
    )
 
    @Html.DropDownListFor(
        x => x.PERIODE,
        Enumerable.Empty<SelectListItem>(),
        "-- Période --"
    )
 
    <input id="Submit1" type="submit" value="Valider" class="bt_submit"/>    
}
 
<script type="text/javascript">
    $(document).ready(function(){
        $('#APPLI').change(function () {
            var selAppli = $(this).val();
            if (selAppli != null && selAppli != '') {
                $.getJSON('@Url.Action("Periode")', { appli: selAppli }, function (periodes) {
                    var selPeriode = $('#PERIODE');
                    selPeriode.empty();
                    $.each(periodes, function (index, periode) {
                        selPeriode.append($('<option/>', {
                            value: periode.Value,
                            text: periode.Text
                        }));
                    });
                });
            }
        });
    });
</script>

J'ai quelques morceaux de codes en plus qui ne servent pas encore pour l'instant et j'ai aussi rajouté une liste déroulante, mais celles concernées par le script sont les listes pour les Applis et les Périodes.