引导下拉菜单不适用于 ASP.NET MVC

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

我对 Web 开发还是个新手，但我正在使用 ASP.NET MVC（而不是 Core）制作我的期末学校项目。

我不确定它是否是 ASP.NET MVC 5，但很可能是。

主要问题

每当我添加这样的下拉元素时：

<div class="btn-group">
    <button type="button" class="btn btn-primary">Action</button>
    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

当我按下下拉按钮时，没有任何反应，下拉项目不显示...

我尝试手动添加 

<script>
链接到 
_Layout.cshtml
，但它不起作用...

这是 

_Layout.cshtml
文件：

@using Microsoft.AspNet.Identity
@using Cooking_Service.Models
@using Cooking_Service.DAL

@{
    var ctx = new ApplicationDbContext();
    var ctxC = new CookingContext();
    ApplicationUser user = ctx.Users.Find(User.Identity.GetUserId());
    User userI = ctxC.Users.Find(User.Identity.GetUserId());
}

<!DOCTYPE html>
<html lang="pt-pt" data-bs-theme="dark">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - Cooking</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-black" id="navbar">
        <div class="container">
            @Html.ActionLink("Cooking", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Alternar a navegação" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li>@Html.ActionLink("Início", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    @if (user != null)
                    {
                        <li>@Html.ActionLink("Receitas", "Index", "Recipes", new { area = "" }, new { @class = "nav-link" })</li>
                    }
                    else
                    {
                        <li title="Entre com a sua conta para aceder">
                            <a href="#" class="nav-link disabled">
                                Receitas
                            </a>
                        </li>

                    }
                    <li class="nav-link disabled txt-light-grey">•</li>
                    <li>@Html.ActionLink("Sobre", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Contato", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Ajuda", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    @if (user != null)
                    {
                        if (userI.Type == TypeUser.Admin)
                        {
                            <!-- Little sperator icon to separate the admin button from the rest of the navbar -->
                            <li class="nav-link disabled">•</li>
                            <li>@Html.ActionLink("Administrate", "Index", "Admin", new { area = "" }, new { @class = "nav-link" })</li>
                        }
                    }
                </ul>

                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </nav>
    <contents>
        <div class="container">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Cooking Service - ASP.NET</p>
            </footer>
        </div>
    </contents>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我尝试将脚本和 CSS 链接添加到 _Layout 中，希望显示下拉列表

我尝试询问 ChatGPT 和 Copilot 可能出了什么问题，他们也不知道。

我尝试将引导程序 NuGet 包更新到旧版本，但仍然没有任何结果。

我尝试将这些链接和脚本添加到下拉列表所在的实际文件中，但似乎没有任何效果。

我从其他人那里检查了这个问题并进行了测试，但我无法让它工作。

引导下拉列表不适用于 ASP.NET

编辑

我检查了 Edge 上的检查功能，当我按下下拉按钮时，出现此消息：

dropdown.js:241 
 Uncaught TypeError: Popper__namespace.createPopper is not a function
    at Dropdown._createPopper (dropdown.js:241:27)
    at Dropdown.show (dropdown.js:139:10)
    at Dropdown.toggle (dropdown.js:121:49)
    at HTMLButtonElement.<anonymous> (dropdown.js:446:38)
    at HTMLDocument.handler (event-handler.js:118:19)

_createPopper   @   dropdown.js:241
show    @   dropdown.js:139
toggle  @   dropdown.js:121
(anonymous) @   dropdown.js:446
handler @   event-handler.js:118
asp.net-mvc razor bootstrap-5
1个回答
0
投票

我找到了解决方案：

ASP.NET 默认将其放在 _Layout.cshtml 的底部：

@Scripts.Render("~/bundles/bootstrap")

但这不起作用，所以我所做的是，我手动导入了引导程序包，如下所示：

<script src="~/Scripts/bootstrap.bundle.js"></script>

放弃默认情况下的内容我解决了我的问题，这是一张图片：

After the solution

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.