select2 Jquery 插件在 Visual Studio 2022 中无法识别

Question

我正在尝试使用 jQuery 插件 select2，以便用户可以在下拉框中输入值。不知何故，当我运行代码时，我在开发人员工具的网络选项卡中看不到 Select2 插件。下面是我在做什么。这是我的布局页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - test</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">Back to Test</a>                
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    
    @*<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@
    <link href="~/lib/select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/select2/js/select2.min.js"></script>

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
   

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

如您所见，我在布局页面中添加了 select2.min.css 和 select2.min.js。以下是应用程序中包含的 select2 的屏幕截图：

这是我的看法：

@model test.Models.DocumentType

@{
    ViewData["Title"] = "Document Type";
    Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
}

<form asp-action="Create">
    <div>

        <select id="ddlSection" name="Name" class="form-control" asp-items="ViewBag.Select">
            <option value="0">--Select Sections--</option>

        </select>

    </div>
</form>

<script type="text/javascript">

        $(function () {
            $("#ddlSection").select2({
                tags: true,
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    }
                },
                templateResult: function (data) {
                    var $result = $("<span></span>");

                    $result.text(data.text);

                    if (data.newOption) {
                        $result.append(" <em>(new)</em>");
                    }

                    return $result;
                }
            });
        });

        </script>

这是我控制器中的代码：

  public async Task<IActionResult> Create()
    {
       List<DocumentType> GetAllDocType =  await 
      _documentTypeService.GetAllDocTypes();
        
   
        SelectList Typo = new SelectList(GetAllDocType.DistinctBy(x=>x.Type), "Id", "Type");
        ViewBag.Select = Typo;
        return View();
    }

当我运行我的代码时，我可以看到下拉列表中填充了现有数据，但我没有在下拉列表中看到空文本框。我查看了网络选项卡，但没有在网络选项卡下方看到 select2 插件。

当我看到开发者工具下面的控制台时，我看到了这个：

似乎 select 没有在我的项目中注册或识别，但不确定它为什么这样做以及我该如何修复它。

select2 Jquery 插件在 Visual Studio 2022 中无法识别

问题描述投票：0回答：0

最新问题

select2 Jquery 插件在 Visual Studio 2022 中无法识别

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0