用于ASP.NET Core的Kendo UI - 未定义kendo
JF *_*ieu 6 javascript jquery kendo-ui kendo-ui-mvc asp.net-core-mvc
当我尝试使用Kendo UI创建网格或图表时,我不断收到以下错误.但是,一个简单的ComboBox可以工作.我们正在使用商业lisence并在经过身份验证时从Telerik的网站下载了js和css.
未捕获的ReferenceError:未定义kendo
未捕获的ReferenceError:$未定义
配置:_Layout.cshtml
<head>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
_ViewImports.cshtml
@using Microsoft.AspNetCore.Identity
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
View.cshtml
<div class="invoice-charts-container">
<h3>Invoice History Week Totals</h3>
<div class="demo-section k-content wide">
@(Html.Kendo().Chart()
.Name("chart")
.HtmlAttributes(new { style = "height: 400px;" })
.Title("Site Visitors Stats /thousands/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Stack(true)
)
.Series(series =>
{
series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
<div class="box wide">
<div class="box-col">
<h4>API Functions</h4>
<ul class="options">
<li>
<input id="typeColumn" name="seriesType"
type="radio" value="column" checked="checked" autocomplete="off" />
<label for="typeColumn">Columns</label>
</li>
<li>
<input id="typeBar" name="seriesType"
type="radio" value="bar" autocomplete="off" />
<label for="typeBar">Bars</label>
</li>
<li>
<input id="typeLine" name="seriesType"
type="radio" value="line" autocomplete="off" />
<label for="typeLine">Lines</label>
</li>
<li>
<input id="stack" type="checkbox" autocomplete="off" checked="checked" />
<label for="stack">Stacked</label>
</li>
</ul>
<p>
<strong>refresh()</strong> will be called on each configuration change
</p>
</div>
</div>
<script>
$(document).ready(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
type = $("input[name=seriesType]:checked").val(),
stack = $("#stack").prop("checked");
for (var i = 0, length = series.length; i < length; i++) {
series[i].stack = stack;
series[i].type = type;
};
chart.refresh();
}
function updateTheme() {
$("#chart").getKendoChart().setOptions({ theme: kendoTheme });
}
</script>
</div>
这是DOM中出现错误的地方:`
未捕获的ReferenceError:未定义kendo
<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(
未捕获的ReferenceError:$未定义
<script>
$(document).ready
(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
编辑 - 似乎加载了javascript文件,但错误仍在发生:
Bri*_*Kay 10
当我遇到这个问题时,在将现有项目升级到2017.2.504之后,这是因为我在我的身体中定义了我的脚本......就像你一样.
他们必须在头脑中.以下是我从支持中获得的回复:
引入了kendo.syncReady来解决jQuery 3.1.1的一个主要问题,以及在使用MVC包装器时在客户端上生成Kendo UI小部件的方式.但是,此更改要求在页头部分中引用Kendo UI脚本文件(这也是过去Kendo UI引用的默认指令).请在引用jQuery文件后尝试将您的Kendo UI引用移动到标记,并让我知道错误是否一直发生.