ASP NET Core Bootstrap Dropdown not working

Question

I have a problem, I have this layout and I want to implement Bootstrap Dropdown component, but when I click on the component nothings happened, actions don't render. I have jquery, bootstrap, and popper. This is my code.

@using FinanceWorld.Common
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@this.ViewData["Title"] - @GlobalConstants.SystemName</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" asp- 
appendversion="true"/>
<link rel="stylesheet" href="~/lib/fontawesome/css/all.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</head>
<body>
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp- 
action="Index">@GlobalConstants.SystemName</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <partial name="_LoginPartial" />
                <ul class="navbar-nav flex-grow-1">
                    <li class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Action
                        </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>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<div class="container">
    <partial name="_CookieConsentPartial" />
    <main role="main" class="pb-3">
        @this.RenderBody()
    </main>
</div>

<script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap/dist/js/popper.min.js" asp-append-version="true"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
@await this.RenderSectionAsync("Scripts", required: false)
@await this.RenderSectionAsync("Charts", required: false)
</body>
</html>

I will be grateful if someone can help me.

Please check if all scripts and style sheets are properly addressed! — isaeid
– isaeid, Commented Jul 20, 2021 at 7:00

Yiyi You · Accepted Answer · 2021-07-20 03:31:09Z

I think you are using the sample code of bootstrap 5.0.So you need to use js and css of bootstrap5.0.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

And you need to put popper or bootstrap.bundle.min.js(bootstrap.bundle.min.js include popper) before bootstrap.min.js.Change your code like this:

@using FinanceWorld.Common
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@this.ViewData["Title"] - @GlobalConstants.SystemName</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="~/lib/fontawesome/css/all.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</head>
<body>
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp- 
action="Index">@GlobalConstants.SystemName</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <partial name="_LoginPartial" />
                <ul class="navbar-nav flex-grow-1">
                    <li class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Action
                        </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>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<div class="container">
    <partial name="_CookieConsentPartial" />
    <main role="main" class="pb-3">
        @this.RenderBody()
    </main>
</div>

<script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js" asp-append-version="true"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-append-version="true"></script>

<script src="~/js/site.min.js" asp-append-version="true"></script>
@await this.RenderSectionAsync("Scripts", required: false)
@await this.RenderSectionAsync("Charts", required: false)
</body>
</html>

result:

For whatever reason I had to drop the usage of bootstrap.min.js and use only bootstrap.bundle.min.js to make this work. Using Bootstrap v5.2.3 nuget on VS 2022 on ASP.Net MVC Core .Net 7 framework.

Collectives™ on Stack Overflow

ASP NET Core Bootstrap Dropdown not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related