jQuery(...).kendoGrid 不是函数

Question

我正在尝试创建一个 Kendo 网格，但我一直收到同样的错误，说 kendoGrid 不是一个函数：

这是我的观点：

@model IEnumerable<ModelLayer.Models.TableNotificationModel>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{
    ViewData["Title"] = "Index";
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js">
    window.rootUrl = '@Url.Content("~/")';
</script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.aspnetmvc.min.js"></script>
<h1>Upload index</h1>


<div>
    <h4>Upload file</h4>
    <form asp-controller="Upload" asp-action="Upload"
          enctype="multipart/form-data" method="post">
        <input type="file" name="file" />
        <button type="submit" id="btn">Upload</button>
    </form>

    @if (ViewBag.Message != null)
    {
        <script>
        $(document).ready(function(){
            alert('@Html.Raw(ViewBag.Message)');
        });
        </script>
    }


</div>


<div class="clearfix">
    @(Html.Kendo().Grid<ModelLayer.Models.TableNotificationModel>()
        .Name("notificationGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_CODE).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_CODE).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_CODE).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_CODE).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_CODE).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            //columns.Bound(c => c.Message).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload"))
            )
    )

</div>

我确保没有 jQuery 脚本两次，所以这是我的 _Layout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - M20_AEK</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

    
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">M20_AEK</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="CustomerType" asp-action="LoadCustomerType">Customer Type</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="DataCategory" asp-action="LoadDataCategory">Data Category</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Upload" asp-action="Index">Upload</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - M20_AEK - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

这是我的控制器：

public ActionResult Upload_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(json_read.ToDataSourceResult(request));
        }

我尝试将 Kendo 和 jQuery 脚本放在 _Layout 中，但没有帮助。我为 Kendo 网格的列和列菜单以及字段尝试了不同的格式，但它仍然会引发相同的错误。可能是什么问题？

Answer 1

<script src="https://code.jquery.com/jquery-1.12.3.min.js">
    window.rootUrl = '@Url.Content("~/")'; </script>

看起来无效（您通常在标签内有 src 或代码 - 不是两者都有）。我建议删除 src.

Answer 2

我找到了解决方案。如果您使用的是 jQuery Office，任何版本，请查找附加到您的项目的插件文件，其中包含 jQuery 代码并完全删除下一行：

( !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0): )

到行尾

{return C.$===k&&(C.$=Jt),e&&C.jQuery===k&&(C.jQuery=Qt),k},e||(C.jQuery=C.$=k), k});

因为它会被复制到 jQuery.js 文件中。这是导致错误的原因：

jQuery(...).kendoGrid 不是函数

jQuery(...).kendoGrid is not a function

c#

kendo-ui

kendo-grid