ASP.NET 核心 MVC - Javascript 庫加載但其功能無法識別

Question

我正在創建一個 ASP.NET Core MVC 應用程序（.NET 版本 5），我正在嘗試使用一個名為 FullCalendar 的 Javascript 庫。 我使用應用程序布局底部的腳本標記中的 CDN 鏈接添加了庫的 Javascript（參見 _Layout.cshtml），並鏈接了庫的樣式表（也使用了 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 頁面之一中使用該庫，如下所示：

索引.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>

但是，當我打開頁面時，控制台中會彈出以下錯誤：

未捕獲的類型錯誤：$(...).fullCalendar 不是 function

我查看了網絡選項卡，FullCalendar 庫似乎加載得很好，jQuery 庫在 FullCalendar 庫之前加載（應該如此）：網絡選項卡屏幕截圖

有人知道這里出了什么問題嗎？

Answer 1

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

首先，如果直接訪問上面的fullcalendar參考，找不到這個版本package。

因此，您可以嘗試使用 5.10.1 版本 fullcalendar 參考，如下所示：

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

Second, if you check the fullcalendar document , you can see that, in Fullcalendar V5 version, we should create a FullCalendar.Calendar object to render the fullcalendar, instead of using the fullCalendar function. 像這樣的代碼：

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

結果如下：

For the fullCalendar function, this might apply to the previous version fullCalendar, like this sample (it using fullCalendar 3.10.0 version and the fullCalendar function, if you add the JS reference and copy the code to Asp.net core application, it also works well) .

ASP.NET 核心 MVC - Javascript 庫加載但其功能無法識別

問題描述

1 個解決方案

解決方案1
0 2022-01-19 05:42:42

ASP.NET 核心 MVC - Javascript 庫加載但其功能無法識別

問題描述

1 個解決方案

解決方案1 0 2022-01-19 05:42:42

解決方案1
0 2022-01-19 05:42:42