Kendo UI 用于 ASP.NET 核心 - kendo 未定义

Question

当我尝试使用 Kendo UI 创建网格或图表时，我不断收到以下错误。不过，一个简单的 ComboBox 就可以了。我们使用的是商业许可，并在经过身份验证后从 Telerik 的网站下载了 js 和 css。

Uncaught ReferenceError: kendo is not defined

Uncaught ReferenceError: $ 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(

Uncaught ReferenceError: $ is not defined

<script>
    
$(document).ready

(function() {
            $(".options").bind("change", refresh);
            $(document).bind("kendo:skinChange", updateTheme);
        });

编辑 - 似乎 javascript 文件已加载，但错误仍在发生：

Answer 1

如果您使用的是开发盒，请在所有以 https:// 开头的 src 和 href 属性前加上前缀以使用 //:。您的开发环境很可能没有使用 SSL，因此它无法通过 SSL 链接使用任何资源（javascript 根本不会 加载！）。前缀更改将使 url 继承页面正在使用的任何内容。

查看更多here

Answer 2

当我遇到这个问题时，在将现有项目升级到 2017.2.504 之后，是因为我在正文中定义了我的脚本......就像你一样。

他们必须在头脑中。这是我从支持人员那里得到的回复：

引入

kendo.syncReady 是为了解决 jQuery 3.1.1 的主要问题以及 Kendo UI 小部件在客户端上生成的方式使用 MVC 包装器时。但是，此更改要求在页眉部分引用 Kendo UI 脚本文件（这是过去 Kendo UI 引用的默认指令，因为出色地）。请在引用 jQuery 文件后尝试将您的 Kendo UI 引用移动到标签，如果错误继续发生请告诉我。

Answer 3

除了@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>

Kendo UI 用于 ASP.NET 核心 - kendo 未定义

Kendo UI for ASP.NET Core - kendo is not defined

javascript

jquery

kendo-ui

kendo-ui-mvc

asp.net-core-mvc