jQuery.Deferred异常:未定义Kendo ReferenceError:未定义Kendo

时间:2017-02-19 17:04:59

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

我正在尝试使用MVC5将数据填充到kendo数据网格。虽然,我已正确引用javascript文件,但我收到错误消息jQuery.Deferred异常:未定义Kendo ReferenceError:未定义Kendo。

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

  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>

DataGridController

 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>

1 个答案:

答案 0 :(得分:2)

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

以下是剑道网格所需的最低配置

<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>

除非将网格自动绑定设置为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>