个人中心
gpt4 book ai didi

javascript - 如何根据级联下拉列表所选值从数据库获取属性值？

转载 作者：行者123 更新时间：2023-12-03 06:34:08 25 4
gpt4 key购买 nike

I want to get a property of an entity based on passing id's of selected items from cascaded dropdown list...On every change in level 1 or in level 2 of cascaded drop down list, price must be updated.

我已经实现了级联下拉列表。页面加载时，Leaguedropdown(级别 1) 会填充，当我从级别 1 中选择任何项目时，第二个 LeagueDivisiondropdown(级别 2) 会填充。我必须实现价格计算器 应该根据级联下拉列表中所选的项目计算价格值，所有价格都存储在数据库中，我正在使用 Entity Framework 。我正在使用 .change() 方法并发送 2 级的 getJson 请求，该请求工作正常。我也希望在 Level 1 上具有相同的功能，但我已经使用 .change() 方法来填充 LeagueDivision，所以我不知道如何在 Level 1 上实现此功能。

如果有人能指导我并感激不尽，我将不胜感激。

这是 View 和脚本

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

从数据库获取价格的 JSON 结果

 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);
    }

最佳答案

请尝试此代码。如果您认为我仍然误解了这个问题，请引用我的 javascript 评论。

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

关于javascript - 如何根据级联下拉列表所选值从数据库获取属性值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38311591/

25 4 0
文章推荐： javascript - 重复值 VS document.querySelector
文章推荐： gitkraken - 在 GitKraken 中恢复一个文件
文章推荐： asp.net-mvc-4 - 基本类型的 ASP.NET MVC 4 编辑器模板
文章推荐： javascript - 如何在 Three.js 中设置相机的位置而不使其旋转？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com