【发布时间】：2016-11-13 16:12:02
【问题描述】：
我想根据从级联下拉列表中传递所选项目的 id 来获取实体的属性...在级联下拉列表的第 1 级或第 2 级的每次更改时，都必须更新价格。
我已经实现了级联下拉列表。在页面加载时，Leaguedropdown (Level 1) 填充，第二个 LeagueDivisiondropdown (Level 2) 当我从 Level 1 中选择任何项目时填充。我必须实现 Price Calculator 应该根据级联下拉列表中的选定项目计算价格值，所有价格都存储在数据库中，我正在使用实体框架。 我正在使用 .change() 方法并为 2 级发送 getJson 请求，这工作正常。我也希望在级别 1 上具有相同的功能，但我已经使用 .change() 方法来填充 LeagueDivision，所以我也不知道如何在级别 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);
}
【问题讨论】：
-
您可以在
$('#SelectedLeague').change()函数中进行多次ajax 调用（只需在$.getJSON(leaguedivisionUrl, ...代码之后复制$.getJSON(updatePrice....代码（但修改您发送的值）。但是您需要考虑会发生什么当SelectedLeagueDivision的值为null时，会抛出异常，因为参数是int并且是必需的。 -
@StephenMuecke 请看一下我的回答...感谢您的指导并寻求您的进一步指导...谢谢
标签： javascript c# jquery asp.net-mvc getjson