ASP.NET Core MVC - Javascript 加载库但无法识别其功能

Question

我正在创建一个 ASP.NET 核心 MVC 应用程序（.NET 版本 5），我试图在其中使用一个名为 FullCalendar 的 Javascript 库。我在应用程序布局底部的脚本标记中使用 CDN link 添加了库的 Javascript（参见 _Layout.cshtml）并 link 编辑了库的样式表（也使用CDN).

_Layout.cshtml:

@using Microsoft.AspNetCore.Identity
@using Infrastructure
@inject UserManager<ApplicationUser> UserMananager;

@{
    var user = await UserMananager.GetUserAsync(User);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.css">
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <div class="sidebar">
        ...
    </div>

    <div class="home_content">
        @RenderBody()
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

我在我的一个 razor 页面中使用这个库是这样的：

Index.cshtml:

@section Scripts {
    <script>
        $(document).ready(function() {    
            $("#calendar").fullCalendar({ // This function is not recognized
                header: {
                    left: "",
                    center: "prev title next",
                    right: ""
                },
                eventClick: function(event, jsEvent, view) {
                    $("#modalTitle").html(event.title);
                    $("#modalBody").html(event.description);
                    $("#eventUrl").attr("href", event.url);
                    $("#fullCalModal").modal();
                    return false;
                },
                events: "@Url.Action("GetAppointments", "Appointment")"
            })
        })
    </script>
}

<div class="container">
    <div id="calendar">
    </div>
    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span><span class="sr-only">close</span></button>
                    <h3 id="modalTitle" class="modal-title"></h3>
                </div>
                <div id="modalBody" class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="btn btn-primary" id="eventUrl" target="_blank">Event Page</a>
                </div>
            </div>
        </div>
    </div>
</div>

但是，当我打开页面时，控制台中弹出以下错误：

Uncaught TypeError: $(...).fullCalendar is not a function

我查看了网络选项卡，FullCalendar 库似乎加载得很好，jQuery 库在 FullCalendar 库之前加载（应该如此）： Network tab screenshot

有人知道这里出了什么问题吗？

Answer 1

 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.js"></script>

首先，如果直接访问上面的fullcalendar reference，是找不到这个版本包的。

因此，您可以尝试使用 5.10.1 版本的完整日历参考，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>

其次，如果查看fullcalendar document，可以看到，在Fullcalendar V5版本中，我们应该创建一个FullCalendar.Calendar对象来渲染fullcalendar，而不是使用fullCalendar函数。代码如下：

<div id="calendar">
</div>
@section Scripts {  
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
}

结果如下：

对于fullCalendar功能，这可能适用于以前版本的fullCalendar，例如this sample（它使用fullCalendar 3.10.0版本和fullCalendar功能，如果您添加JS引用并将代码复制到Asp.net核心应用，也很好用）。

ASP.NET Core MVC - Javascript 加载库但无法识别其功能

ASP.NET Core MVC - Javascript library loads but its functions aren't recognized

javascript

asp.net-mvc

asp.net-core

.net-5

asp.net5