Charger dynamiquement une combo en fonction de la selection dans une autre combo

Version imprimable

25/11/2016, 16h56
kheironn

Charger dynamiquement une combo en fonction de la selection dans une autre combo

Bonjour,

Je suis certains que cette question a déjà été posée, mais je n'ai pas trouver de réponse satisfaisante. Beaucoup dans d'anciennes version de mvc.
Pour cadrer ma question, je dois concevoir une application en MVC5 avec EF 6.1 sur une BDD existante. Dans l'un des écrans "liste/index", je vais devoir filtrer les résultats affichés avec plusieurs listes déroulantes. Sachant que le contenu de certaines de ces listes dois se modifier dynamiquement lorsque l'on change la sélection dans d'autres.
Concrètement c'est un écran "articles" avec filtre sur les clients et filtre sur les gammes de produits (et d'autres filtres). Les gammes dépendent des clients.

J'imagine ajaxiser le chargement des listes dépendantes, mais je ne sais pas comment faire de l'Ajax en mvc 5... Autrefois, j'utilisais le AjaxToolKit dans asp.net...
Merci d'avance.
09/12/2016, 15h37
kheironn

J'ai trouver le moyen de charger dynamiquement une vue partiel à partir du changement d'index de ma liste.

ici

Je ré-ouvre le tk car il y a une suite.
Donc j'ai réussi à faire un "update panel" et tout se passe bien.
Mon problème, maintenant, c'est que dans cet "update panel" il y a une nouvelle dropdown qui doit changer dynamiquement de contenu en fonction de l'élément sélectionné dans une autre dropdown située, elle aussi, dans cet "update panel" et ça ne marche pas. Je voulais procéder de la même façon.:(
Voici ma vue "Parent" :

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
@model PagedList.IPagedList<Logsys.Geolie.Anima.Mvc.Models.ProductProductLine>
@using PagedList.Mvc;
@Styles.Render("~/Content/PagedList.css")
 
 
@section Scripts{
    <script type="text/javascript">
        $(function () {
            $('#SelectCustomer').change(function () {
                var customerId = $(this).val();
                $.ajax({
                    url: '@Url.Action("FillDependantDropDown", "Product")',
                    type: 'GET',
                    cache: false,
                    data: { CustomerId: customerId }//,
                    //error: alert("Impossible de récupérer une partie des données de filtrage")
                }).done(function (result) {
                    $('#PartialDependantDropDowns').html(result);
                });
            });
        });
 
        @*$(function () {
            $('#SelectCustomerStock').change(function () {
                var customerStockID = $(this).val();
                $.ajax({
                    url: '@Url.Action("FillDependantProductLineDropDown", "Product")',
                    type: 'GET',
                    cache: false,
                    data: { customerStockID: customerStockID },
                    error: alert("Ca marche pas !")
                }).done(function (result) {
                    $('#PartialProductLineDropDowns').html(result);
                });
            });
        });*@
    </script>
}
 
@{
    ViewBag.Title = "Articles";
}
@using (Html.BeginForm("Index", "Product", new
{
    page = ViewBag.CurrentPage,
    sortOrder = ViewBag.CurrentOrder,
    customerId = ((SelectList)ViewBag.CustomerId).SelectedValue,
    providerId = ((SelectList)ViewBag.ProviderId).SelectedValue,
    withPhoto = ViewBag.WithPhoto,
    operationId = ((SelectList)ViewBag.OperationId).SelectedValue,
    productTypeId = ((SelectList)ViewBag.ProductTypeId).SelectedValue,
    customerStockID = ((SelectList)ViewBag.CustomerStockID).SelectedValue,
    productLineID = ((SelectList)ViewBag.ProductLineID).SelectedValue,
    product = ViewBag.Product,
    familyID = ((SelectList)ViewBag.FamilyID).SelectedValue,
    isActiv = ViewBag.IsActiv,
    buyerId = ((SelectList)ViewBag.BuyerId).SelectedValue
}, FormMethod.Get))
{
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-md-11">
                <h2>Liste des Articles</h2>
            </div>
            <div class="col-md-1">
                <br />
                <br />
                @Html.ActionLink(" ", "Create", "Product", null, new { @class = "glyphicon glyphicon-plus btn btn-primary", @title = "Ajouter un article" })
            </div>
        </div>
        <hr />
    </div>
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-md-10 col-md-offset-1">
                <h3>Filtrer les articles sur :</h3>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-primary" title="Rechercher">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-2">
                            @Html.LabelFor(model => model.FirstOrDefault().Product.ProductLine.CustomerStock.Customer.Name, new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            @Html.DropDownList("CustomerID", (SelectList)ViewBag.CustomerId, "<Tous>", new { @id = "SelectCustomer", @class = "btn btn-default dropdown-toggle" })
                        </div>
                        <div class="col-md-2">
                            @Html.LabelFor(model => model.FirstOrDefault().Product.ProductType.Label, new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            @Html.DropDownList("ProductTypeID", (SelectList)ViewBag.ProductTypeID, "<Tous>", new { @id = "selectedType", @class = "btn btn-default dropdown-toggle" })
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-2">
                            @Html.LabelFor(model => model.FirstOrDefault().Product.Family.Label, new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            @Html.DropDownList("FamilyID", (SelectList)ViewBag.FamilyID, "<Toutes>", new { @id = "selectedType", @class = "btn btn-default dropdown-toggle" })
                        </div>
                        <div class="col-md-2">
                            @Html.LabelFor(model => model.FirstOrDefault().Product.Label, new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            @Html.Editor("product", new { htmlAttributes = new { @class = "form-control" } })
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-2">
                            @Html.LabelFor(model => model.FirstOrDefault().Product.PhotoPath, new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            <label class="radio-inline">@Html.RadioButton("withPhoto", "true") Oui</label>
                            <label class="radio-inline">@Html.RadioButton("withPhoto", "false") Non</label>
                            <label class="radio-inline">@Html.RadioButton("withPhoto", "null", true) Indif</label>
                        </div>
                        <div class="col-md-2">
                            @Html.Label("Produits actifs", new { @class = "control-label" })
                        </div>
                        <div class="col-md-4">
                            <label class="radio-inline">@Html.RadioButton("isActiv", "true", true) Oui</label>
                            <label class="radio-inline">@Html.RadioButton("isActiv", "false") Non</label>
                            <label class="radio-inline">@Html.RadioButton("isActiv", "null") Indif</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                @Html.Partial("PartialDependantDropDowns", new Logsys.Geolie.Anima.Mvc.Models.ProductProductLine())
            </div>
        </div>
    </div>
}

et ma vue partielle (mon "update panel") :

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
@model Logsys.Geolie.Anima.Mvc.Models.ProductProductLine
 
<div id="PartialDependantDropDowns">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.Provider.Name, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.ProviderId == null || ((SelectList)ViewBag.ProviderId).Count() > 0)
            {
                    @Html.DropDownList("ProviderID", (SelectList)ViewBag.ProviderId, "<Tous>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("ProviderID", null, "<Tous>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.Operation.Label, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.OperationId == null || ((SelectList)ViewBag.OperationId).Count() > 0)
            {
                    @Html.DropDownList("OperationID", (SelectList)ViewBag.OperationId, "<Toutes>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("OperationID", null, "<Toutes>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.ProductLine.CustomerStock.Name, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.CustomerStockID == null || ((SelectList)ViewBag.CustomerStockID).Count() > 0)
            {
                    @Html.DropDownList("CustomerStockID", (SelectList)ViewBag.CustomerStockID, "<Tous>", new { @id = "SelectCustomerStock", @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("CustomerStockID", null, "<Tous>", new { @id = "SelectCustomerStock", @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.ProductLine.LongLabel, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.ProductLineID == null || ((SelectList)ViewBag.ProductLineID).Count() > 0)
            {
                    @Html.DropDownList("ProductLineID", (SelectList)ViewBag.ProductLineID, "<Toutes>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("ProductLineID", null, "<Toutes>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.Label("Chef produits", new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.BuyerID == null || ((SelectList)ViewBag.BuyerID).Count() > 0)
            {
                    @Html.DropDownList("BuyerID", (SelectList)ViewBag.BuyerID, "<Tous>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("BuyerID", null, "<Tous>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
        </div>
    </div>
</div>

Ma select ProductLineID doit se mettre à jour lorsque CustomerStockId change de valeur sélectionnée. Le problème me semble venir du js (partie commentée) : la fonction se déclenche à l'arrivée sur l'écran mais plus jamais après, même lorsque la ddl change de valeur

J'ai pu avancer sur ce bug et mon js est comme ça maintenant :

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
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            // bind event handlers when the page loads.
            bindStockChange();
        });
 
        $(function () {
            $('#SelectCustomer').change(function () {
                var customerId = $(this).val();
                $.ajax({
                    url: '@Url.Action("FillIndexDependantFilters", "Product")',
                    type: 'GET',
                    cache: false,
                    data: { CustomerId: customerId }
                }).done(function (result) {
                    $('#PartialIndexDependantFilters').html(result);
 
                    // re-bind event handlers to '.myClickableElement'
                    bindStockChange();
                });
            });
        });
 
        $(function bindStockChange() {
            $('#SelectCustomerStock').change(function () {
                var customerId = $('#SelectCustomer').val();
                var stockId = $(this).val();
                $.ajax({
                    url: '@Url.Action("FillIndexProductLineFilter", "Product")',
                    type: 'GET',
                    cache: false,
                    data: { CustomerId: customerId, StockId: stockId }
                }).done(function (result) {
                    $('#PartialIndexProductLineFilter').html(result);
                });
            });
        });
 
        //$(window).load(function () {
        //    $('#AwaitLoading').toggleClass('hide-display').toggleClass('show-display');
        //});
 
        //$(document).ready(function () {
        //    $('#AwaitLoading').toggleClass('show-display').toggleClass('hide-display');
        //});
 
    </script>
}

Le problème c'est que ma dropdown SelectCustomerStock perd son Handler lorsque SelectCustomer demande le rechargement de la div contenant SelectCustomerStock. Les modifs que j'ai trouvé sur le web ne semblent pas marcher.

pour rappel mes PartialView sont :

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
@model Logsys.Geolie.Anima.Mvc.Models.ProductProductLine
 
<div id="PartialIndexDependantFilters">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.Provider.Name, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.Providers == null || ((SelectList)ViewBag.Providers).Count() > 0)
            {
                    @Html.DropDownList("Providers", (SelectList)ViewBag.Providers, "<Tous>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("Providers", null, "<Tous>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.Operation.Label, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.Operations == null || ((SelectList)ViewBag.Operations).Count() > 0)
            {
                    @Html.DropDownList("OperationID", (SelectList)ViewBag.Operations, "<Toutes>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("Operations", null, "<Toutes>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.ProductLine.CustomerStock.Name, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.CustomerStocks == null || ((SelectList)ViewBag.CustomerStocks).Count() > 0)
                {
                    @Html.DropDownList("CustomerStockID", (SelectList)ViewBag.CustomerStocks, "<Tous>", new { @id = "SelectCustomerStock", @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("CustomerStockID", null, "<Tous>", new { @id = "SelectCustomerStock", @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
            <div class="col-md-2">
                @Html.LabelFor(model => model.Product.ProductLine.LongLabel, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @Html.Partial("PartialIndexProductLineFilter", new Logsys.Geolie.Anima.Mvc.Models.ProductProductLine())
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.Label("Chef produits", new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-4">
                @if ((SelectList)ViewBag.Buyers == null || ((SelectList)ViewBag.Buyers).Count() > 0)
            {
                    @Html.DropDownList("BuyerID", (SelectList)ViewBag.Buyers, "<Tous>", new { @class = "btn btn-default dropdown-toggle" })
                }
                else
                {
                    @Html.DropDownList("Buyers", null, "<Tous>", new { @class = "btn btn-default dropdown-toggle disabled" })
                }
            </div>
        </div>
    </div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
@model Logsys.Geolie.Anima.Mvc.Models.ProductProductLine
 
@if ((SelectList)ViewBag.ProductLines == null || ((SelectList)ViewBag.ProductLines).Count() > 0)
{
    @Html.DropDownList("ProductLineID", (SelectList)ViewBag.ProductLines, "<Toutes>", new { @class = "btn btn-default dropdown-toggle" })
}
else
{
    @Html.DropDownList("ProductLineID", null, "<Toutes>", new { @class = "btn btn-default dropdown-toggle disabled" })
}

Problème subsidiaire : même si je ne change pas de client, ma liste de gammes ne se recharche pas malgré l'appel (qui fonctionne dans ce cas) et retourne bien les données filtrées...

P.S. : je pense que ce problème est plus ajax que MVC, si un admin/modo voulait bien déplacer mon topic, je l'en remercie.