在表单中我有一个kendo MultiSelect,允许您为订单选择几个附加组件。选择后,我想显示附加组件的价格但不知何故我不这样做。
显示所选加载项的值没有任何问题,当我想显示从控制器获取GET所需的价格时会出现问题。 控制器中的方法返回一个int值。
有人能指引我朝正确的方向前进吗?
function onChange(e) {
var multiselect = $("#accessoriesCombo").data("kendoMultiSelect");
var accessoriesLabel = $("#accessoriesLabel");
var startDate = $("#rentStartPicker").data("kendoDateTimePicker").value();
var endDate = $("#rentEndPicker").data("kendoDateTimePicker").value();
var diffDay;
if (calculate(startDate, endDate) < 1) {
diffDay = calculate(startDate, endDate) + 1;
} else {
diffDay = calculate(startDate, endDate);
}
var textValues = "";
var arrayValues = this.value();
var total = 0;
arrayValues.forEach(function (item) {
textValues += item;
total += getPrice(item, diffDay);
});
accessoriesLabel.text(textValues + " (" + total + ")");
}
function getPrice(id, numberOgDays) {
var returnPrice = 0;
// return int Accessories Price
$.get('/Cars/GetAccessoriesPrice/?id=' + id + '&numberOfDays=' + numberOgDays, function (price) {
returnPrice = price;
return returnPrice;
}, 'json');
}
function calculate(first, second) {
var diff = Math.round((second - first) / 1000 / 60 / 60 / 24);
return diff;
}
<div class="select-vehicle" style="padding-top:10px">
@(Html.Kendo().MultiSelect().Name("accessoriesCombo").DataValueField("AccessoriesID").DataTextField("AccessoriesName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Accessories_Read", "Cars");
});
})
.HtmlAttributes(new { @style = "width:100%" })
.Placeholder("Volitelné příslušenství")
.AutoClose(false)
.Events(events =>
{
events.Change("onChange");
})
)
<script type="text/x-kendo-tmpl" id="accessoriesTemplate">
<div style="padding: 5px; vertical-align:middle">
<p>
<input type="checkbox" style="vertical-align:text-bottom" id="chb_accessories_#:AccessoriesID#" value="#:AccessoriesID#" /><label for="chb_accessories_#:AccessoriesID#" style="padding-left:5px"> #:AccessoriesName#</label>
<span style="font-size:12px; padding-left:5px">cena od: #:kendo.toString(data.LowestPrice, "c0", "cs-CZ")# / den</span>
</p>
</div>
</script>
</div>