我想根据传递的级联下拉列表中所选项目的ID获取实体的属性...在级联下拉列表的第1层或第2层的每次更改中，必须更新价格。
我已经实现了级联下拉列表。在页面加载时，当我从级别1中选择任何项目时，将填充Leaguedropdown（第1级），并填充第二个LeagueDivisiondropdown（第2级）。我必须实现价格计算器，该价格计算器应根据从级联下拉列表中选择的项目来计算价格值，所有价格均为存储在数据库中，我正在使用实体框架。
我正在使用.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>
}
<!-- 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>