Question

我想基于从级联下拉列表中传递所选项目的ID来获取实体的属性...在级联下拉列表的级别1或级别2中的每次更改时，必须更新价格。

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

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

这是视图和脚本

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

Answer 1

请尝试此代码。参考我的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>

Answer 2

我已经以这种方式成功实施了。

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

如何从数据库中获取基于级联下拉列表选择值的属性值？

2 个答案: