asp.net-mvc-5 - jQuery.Deferred 异常 : Kendo is not defined ReferenceError: Kendo is not defined

标签 asp.net-mvc-5 kendo-grid

我正在尝试使用 MVC5 将数据填充到剑道数据网格。虽然,我已经正确引用了 javascript 文件,但我收到错误消息 jQuery.Deferred exception: Kendo is not defined ReferenceError: Kendo is not defined.

当我在控制台窗口中看到时,错误在以下行

  var carsDataSource = new Kendo.Data.DataSource({ data: cars });

请看下面的代码

布局法师中的头部部分

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    @Styles.Render("~/Content/css")
    <link href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" rel="stylesheet" />

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.web.min.js"></script>
    @*<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>*@
</head>

数据网格 Controller

 public class DataGridController : Controller
    {
        // GET: DataGrid
        public ActionResult Index()
        {
            return View();
        }
    }

Index.html

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<div id="cars"></div>


<script>

    $(document).ready(function () {


        var cars = [
            { year: 2012, make: "Ferrari", model: "California" },
            { year: 2013, make: "Ferrari", model: "458 Italia" },
            { year: 2014, make: "Lambhorhini", model: "California" },
            { year: 2015, make: "Porche", model: "California" },
            { year: 2015, make: "Audi", model: "A7" },
            { year: 2016, make: "Mercedez", model: "E350" },
            { year: 2016, make: "Nisan", model: "California" },
            { year: 2015, make: "Ford", model: "California" },
            { year: 2014, make: "Jaguar", model: "California" },
            { year: 2015, make: "McLaren", model: "California" },
            { year: 2013, make: "Ferrari", model: "California" },
            { year: 2011, make: "Mercedez", model: "C200" },
            { year: 2017, make: "Mercedez", model: "GLA" },
        ];

        var carsDataSource = new Kendo.Data.DataSource({ data: cars });
        carsDataSource.read();

        $("#cars").kendoGrid({ dataSource: carsDataSource });

    });

</script>

最佳答案

  • 你拼错了构造函数
  • 看起来你已经注释掉了 kendo.all.min.js javascript 文件
  • 出现此错误的主要原因是所需资源配置错误查看提供的运行示例,看看您是否缺少一些与剑道相关的 javascript 文件,并将其添加到您的包中。包含的资源很可能有问题。

以下是kendo grid的最低配置

<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>

此外,除非您将网格自动绑定(bind)设置为 false,否则您不需要启动 read() 函数。查看此文档 read method of kendo grid

这是您的代码的实时版本。

Dojo 示例在这里 working dojo sample

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
<body>

<div id="cars"></div>

<script>

    $(document).ready(function () {

        var carsList = [
            { year: 2012, make: "Ferrari", model: "California" },
            { year: 2013, make: "Ferrari", model: "458 Italia" },
            { year: 2014, make: "Lambhorhini", model: "California" },
            { year: 2015, make: "Porche", model: "California" },
            { year: 2015, make: "Audi", model: "A7" },
            { year: 2016, make: "Mercedez", model: "E350" },
            { year: 2016, make: "Nisan", model: "California" },
            { year: 2015, make: "Ford", model: "California" },
            { year: 2014, make: "Jaguar", model: "California" },
            { year: 2015, make: "McLaren", model: "California" },
            { year: 2013, make: "Ferrari", model: "California" },
            { year: 2011, make: "Mercedez", model: "C200" },
            { year: 2017, make: "Mercedez", model: "GLA" },
        ];

          var carsDataSource =  new kendo.data.DataSource({data: carsList});             

          carsDataSource.read();

          $("#cars").kendoGrid({ dataSource: carsDataSource });  

    });

</script>

关于asp.net-mvc-5 - jQuery.Deferred 异常 : Kendo is not defined ReferenceError: Kendo is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42330148/

相关文章:

asp.net - 在 ASP.NET MVC5 中隐藏某些角色的链接

c# - 应用程序正在构建但无法加载 - System.Web.Mvc 缺少文件或程序集?

c# - 如何生成具有多个集合的表的 Controller ?

c# - 使用嵌套托管将 MVC5 View 作为字符串获取

c# - 为什么在构建我的元素后一切正常,但刷新后更改消失了?

jquery - 在kendo ui网格中添加详细项目

kendo-ui - 加载过程后如何将迷你图添加到剑道网格?

javascript - 更改kendo grid数据源使用JS

jquery - 更改 Kendo UI 网格层次结构的宽度?

kendo-ui - 自定义网格中命令的编辑弹出窗口