ASP.NET Core 的 Kendo UI - 未定义 kendo
Posted
技术标签:
【中文标题】ASP.NET Core 的 Kendo UI - 未定义 kendo【英文标题】：Kendo UI for ASP.NET Core - kendo is not defined 【发布时间】：2017-06-16 18:49:38 【问题描述】：当我尝试使用 Kendo UI 创建网格或图表时，我不断收到以下错误。不过，一个简单的 ComboBox 就可以了。我们正在使用商业许可，并在通过身份验证时从 Telerik 的网站下载了 js 和 css。
Uncaught ReferenceError: kendo is not defined
未捕获的引用错误：$ 未定义
配置：_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 中发生错误的地方：`
Uncaught ReferenceError: kendo is not defined
<script>kendo.syncReady(function()jQuery("#chart").kendoChart(
未捕获的引用错误：$ 未定义
<script>
$(document).ready
(function()
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
);
编辑 - 似乎 javascript 文件已加载，但仍然发生错误：
【问题讨论】：
【参考方案1】：当我遇到这个问题时，在将现有项目升级到 2017.2.504 后，这是因为我在正文中定义了我的脚本......就像你一样。
它们必须在头脑中。这是我从支持部门得到的回复：
kendo.syncReady 的引入是为了解决 jQuery 3.1.1 的一个主要问题，以及使用 MVC 包装器时在客户端生成 Kendo UI 小部件的方式。但是，此更改要求在页面头部部分引用 Kendo UI 脚本文件（这也是过去 Kendo UI 引用的默认说明）。请在引用 jQuery 文件后尝试将您的 Kendo UI 引用移动到标记，如果错误继续发生，请告诉我。
【讨论】：
为什么一定要放在脑袋里？为什么它在哪里很重要？ @xr280xr 它可能与确保 javascript 在生命周期的早期就位有关...但是，您可以使用 .Deferred(): ***.com/questions/15311648/… 来解决它。 【参考方案2】：除了@Brian MacKay 已经提到的内容之外，您还可以推迟脚本输出：
@(Html.Kendo().DatePicker().Name("datepicker").Deferred())
当您使用 .Deferred() 时，您将存储呈现的 JavaScript，并且您可以将这个延迟脚本放置在您想要的任何位置：
<head>
</head>
<body>
<!-- stuff -->
@(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
<!-- other stuff -->
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.web.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
@Html.Kendo().DeferredScripts()
</body>
【讨论】：
【参考方案3】：如果您使用的是开发框，请为所有以https:// 开头的src 和href 属性添加前缀以使用//:。您的开发环境很可能没有使用 SSL，因此它不能通过 SSL 链接使用任何资源（javascript 不会 加载！）。前缀更改将使 url 继承页面使用的任何内容。
查看更多here
【讨论】：
请在实际加载 Javascript 文件时查看我的编辑。 您的帖子似乎表明 jQuery 没有加载。 我打开了 Google Chrome 的 Web 开发工具，我得到了 jquery.js 的 HTTP 200 OK以上是关于ASP.NET Core 的 Kendo UI - 未定义 kendo的主要内容，如果未能解决你的问题，请参考以下文章
asp.net core kendo ui 网格自定义命令模板不起作用
用于 jquery CRUD 的 Asp.net core mvc + kendo ui
Kendo UI Web 和 Kendo UI ASP.NET for MVC 之间的区别
asp.net mvc kendo ui grid 加密列数据
发布时未调用具有 Telerik Kendo Grid Read 方法 ([DataSourceRequest]) 的 ASP.NET Core 2.0