ASP.NETCoreMVC-Javascript庫加載但其功能無法識別-有解無憂

我正在創建一個 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/[email protected]/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 >
        ...
    </div>

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

我在我的剃須刀頁面之一中使用該庫，如下所示：

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

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

未捕獲的 TypeError: $(...).fullCalendar 不是函式

我查看了網路選項卡，FullCalendar 庫似乎加載得很好，jQuery 庫在 FullCalendar 庫之前加載（應該如此）： ASP.NET Core MVC - Javascript 庫加載但其功能無法識別

因此，您可以嘗試使用 5.10.1 版本的完整日歷參考，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>

其次，查看 ASP.NET Core MVC - Javascript 庫加載但其功能無法識別

對于fullCalendar功能，這可能適用于以前版本的fullCalendar，比如這個示例（它使用fullCalendar 3.10.0版本和fullCalendar功能，如果您添加JS參考并將代碼復制到Asp.net核心應用程式，它也可以作業好）。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416850.html

標籤：

上一篇：轉換兩個字串并相互比較

下一篇：如何將WebApi設定為默認為UpperCamelCase(Json)