MVC3 Cascading DropDownList

**Genyuumaru** · 20/11/2012, 09h38

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 :

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Genyuumaru** · 20/11/2012, 16h20

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

...

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

Voici le script que j'utilise :

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

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

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

**Genyuumaru** · 10/12/2012, 13h40

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 ?

**Genyuumaru** · 19/12/2012, 08h27

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

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

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

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

MVC3 Cascading DropDownList [D�butant]

ASP.NET MVC

Vue hybride

Discussions similaires

Partager

Partager