Comment obtenir une valeur de propriété à partir de la base de données basée sur la liste déroulante en cascade des valeurs sélectionnées?

Je veux obtenir une propriété d'une entité basée sur les ID passants des éléments sélectionnés de la liste déroulante en cascade … Sur chaque changement de niveau 1 ou dans le niveau 2 de la liste déroulante en cascade, le prix doit être mis à jour.

J'ai mis en place une liste déroulante en cascade. Sur le chargement de la page Leaguedropdown (Niveau 1) remplit et Second LeagueDivisiondropdown (Level 2) remplit lorsque je sélectionne un élément du niveau 1. Je dois implémenter Calculateur de prix qui devrait calculer la valeur du prix en fonction des éléments sélectionnés de la liste déroulante en cascade, tous les prix sont Stocké dans la base de données et j'utilise Entity Framework. J'utilise la méthode .change () et j'envoie la requête getJson pour Level 2 qui fonctionne bien. Je souhaite également la même fonctionnalité sur le niveau 1, mais j'ai déjà utilisé la méthode .change () pour remplir LeagueDivision, de sorte que je n'ai pas la moindre idée de la mise en œuvre de ce niveau sur le niveau 1.

J'apprécierais si quelqu'un me guidera et sera reconnaissant.

Voici la vue et le script

<body> <p id="message"></p> @using (Html.BeginForm("PriceCalculatorIndex", "PriceCalculator", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div> @Html.LabelFor(m => m.SelectedLeague, new { @class = "control-lebel" }) @Html.DropDownListFor(m => m.SelectedLeague, Model.LeagueList, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.SelectedLeague) </div> <div> @Html.LabelFor(m => m.SelectedLeagueDivision, new { @class = "control-lebel" }) @Html.DropDownListFor(m => m.SelectedLeagueDivision, Model.LeagueDivisionList, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.SelectedLeagueDivision) </div> <div> @Html.LabelFor(m => m.Price) @Html.DisplayFor(m => m.Price) </div> } <!-- JS includes --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; var updatePrice = '@Url.Action("updatePrice")'; var divisions = $('#SelectedLeagueDivision'); $('#SelectedLeague').change(function () { divisions.empty(); $.getJSON(leaguedivisionUrl, { ID: $(this).val() }, function (data) { if (!data) { return; } divisions.append($('<option></option>').val()); $.each(data, function (index, item) { divisions.append($('<option></option>').val(item.Value).text(item.Text)); }); }); }); $('#SelectedLeagueDivision').change(function () { $.getJSON(updatePrice, { LeagueDivisionId: $(this).val(), LeagueId: $('#SelectedLeague').val() }, function (data) { if (!data) { return; } alert(data); //document.getElementById('#message').innerHTML = data; }); }); </script>

Résultat JSON pour récupérer le prix de la base de données

  public JsonResult updatePrice(int LeagueId, int LeagueDivisionId) { HostBoostersDBEntities2 db = new HostBoostersDBEntities2(); CalculatorPrice updatedPrice = db.CalculatorPrices .Where(x => x.LeagueId == LeagueId && x.LeagueDivisionId == LeagueDivisionId) .FirstOrDefault(); decimal updatedPriceToView = (decimal)updatedPrice.Price; return Json(updatedPriceToView.ToString(), JsonRequestBehavior.AllowGet); }

Essayez ce code. Donnez référence à mes commentaires javascript où vous pensez avoir encore mal compris la question.

 <script type="text/javascript"> var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; var updatePrice = '@Url.Action("updatePrice")'; var divisions = $('#SelectedLeagueDivision'); function bindLeagueDivisionData(data) { divisions.empty(); $.each(data, function(index, item) { divisions.append($('<option></option>').val(item.Value).text(item.Text)); }); } function getUpdatedPrice(leagueId, divisionId) { $.getJSON(updatePrice, { LeagueDivisionId: divisionId, LeagueId: leagueId }, function(data) { if (!data) { return; } alert(data); //document.getElementById('#message').innerHTML = data; }); } $('#SelectedLeague').change(function() { if (divisions.find("option").length == 0) { /*The division list is empty, fetch the divisions*/ $.getJSON(leaguedivisionUrl, { ID: $(this).val() }, function(data) { if (!data) { return; } /*Once division data is bound, get the price for the league and first selected division. If you choose to leave first division as empty, your wish; just remove the contents of done in that case*/ $.when(bindLeagueDivisionData(data)).done(function() { getUpdatedPrice($(this).val(), $('#SelectedLeagueDivision')); }); }); } else { /*Divisions are already present just get the price for the combination*/ getUpdatedPrice($(this).val(), $('#SelectedLeagueDivision')); } }); $('#SelectedLeagueDivision').change(function() { /*Get the price for the combination*/ getUpdatedPrice($('#SelectedLeague').val(), $(this).val()); }); </script>

J'ai été mis en œuvre avec succès de cette façon.

 @using (Html.BeginForm("PriceCalculatorIndex", "PriceCalculator", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div> @Html.LabelFor(m => m.SelectedLeague, new { @class = "control-lebel" }) @Html.DropDownListFor(m => m.SelectedLeague, Model.LeagueList, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.SelectedLeague) </div> <div> @Html.LabelFor(m => m.SelectedLeagueDivision, new { @class = "control-lebel" }) @Html.DropDownListFor(m => m.SelectedLeagueDivision, Model.LeagueDivisionList, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.SelectedLeagueDivision) </div> <div> <label> price : </label> <span id="spPrice"></span> </div> } <!-- JS includes --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { LoadDivisionsAndPrice() }); var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; var updatePrice = '@Url.Action("updatePrice")'; var divisions = $('#SelectedLeagueDivision'); $('#SelectedLeague').change(function () { LoadDivisionsAndPrice(); }); $('#SelectedLeagueDivision').change(function () { LoadPrice(); }); function LoadPrice() { $.getJSON(updatePrice, { LeagueId: $('#SelectedLeague').val(), LeagueDivisionId: $('#SelectedLeagueDivision').val() }, function (data) { if (!data) { return; } document.getElementById('spPrice').innerText = data.Price; }); } function LoadDivisionsAndPrice() { divisions.empty(); $.getJSON(leaguedivisionUrl, { ID: $('#SelectedLeague').val() }, function (data) { if (!data) { return; } divisions.append($('<option></option>').val()); $.each(data, function (index, item) { divisions.append($('<option></option>').val(item.Value).text(item.Text)); }); LoadPrice(); }); } </script>