Kendo UI for ASP.NET Core - kendo 未定义

7

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

未捕获的引用错误:kendo未定义

未捕获的引用错误:$未定义

配置:_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中发生的位置:

未捕获的引用错误: kendo未定义

<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(

未捕获的引用错误:$未定义。
<script>
    
$(document).ready

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

编辑 - 看起来JavaScript文件已经加载,但是错误仍然发生:在这里输入图片描述

3个回答

13

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

它们必须位于head中。以下是我从支持部门得到的回复:

kendo.syncReady被引入以解决jQuery 3.1.1存在的一个重大问题,即在使用MVC包装程序生成Kendo UI小部件的客户端时。然而,这个改变要求页面头部引用Kendo UI脚本文件(这也是过去Kendo UI引用的默认指示)。请尝试将您的Kendo UI引用移到标签中,在引用jQuery文件之后,然后告诉我错误是否仍在发生。


为什么它必须在头部?它在哪里很重要吗? - xr280xr
@xr280xr 这可能与确保 JavaScript 在生命周期的早期就位有关... 但是,您可以通过使用 .Deferred() 来解决它:https://dev59.com/V2_Xa4cB1Zd3GeqP0266。 - Brian MacKay

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>

0

如果您正在开发环境中,将所有以https://开头的srchref属性前缀更改为使用//:。很有可能您的开发环境没有使用SSL,因此无法使用任何通过SSL链接的资源(javascript根本不会加载!)。前缀更改将使URL继承页面正在使用的任何内容。

这里查看更多信息


请注意我的编辑,因为JavaScript文件确实已经加载。 - Jean-François Beaulieu
您的帖子似乎表明jQuery未加载。 - Xavier J
我打开了谷歌浏览器的Web Dev工具,并且我得到了jquery.js的HTTP 200 OK。 - Jean-François Beaulieu

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接