ASP.NET Core 2.2 Razor Pages - JQuery UI 无法排序

Question

下面的代码在 JS Fiddle 上运行良好，但我无法在我的 asp.net 核心项目中运行它。考虑到我正在使用 JQuery 库的外部链接这一事实，我几乎无法理解为什么这在 .Net Core 中不起作用。谁能告诉我我在这里缺少什么？

注意：外部库链接的放置位置似乎并不重要...也尝试将其放置在剃须刀钻头下方的通常位置，但没有区别。

剃刀页面：

 @page
 @model myProject.Pages.test1Model
 @{
    ViewData["Title"] = "test1";
  }

<head>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<style>
 #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
 }
</style>

<div class="text-light" id="sortable">
 <div class="bg-success text-dark">Item 1</div>
 <div class="bg-danger">Item 2</div>
 <div class="bg-warning">Item 2</div>

 <script>
  $(function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });
 </script>

Answer 1

在您的 razor 页面中，您可以在 Scripts 部分（从 _Layout.cshtml 定义）加载脚本：

<div class="text-light" id="sortable">
    <div class="bg-success text-dark">Item 1</div>
    <div class="bg-danger">Item 2</div>
    <div class="bg-warning">Item 2</div>
</div>

@section Scripts{

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>

        $(function () {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });

    </script>
}

Razor Pages Tutorial

ASP.NET Core 2.2 Razor Pages - JQuery UI 无法排序

ASP.NET Core 2.2 Razor Pages - JQuery UI Sortable not working

asp.net-core

jquery-ui-sortable

razor-pages