Question

我正在C＃.NET MVC中创建一个应用程序。我的_Layout.cshtml文件如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")


</head>
<body>

<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" wfd-invisible="true">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        Dropdown link
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbardrop" wfd-invisible="true">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </li>

                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Member List", "Index", "Member", null, new { @class = "nav-link" })</li>


            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>


<div class="container body-content mt-4">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

我的_LoginPartial.cshtml文件是

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
    @Html.AntiForgeryToken()


            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" , @class="text-blue"})
            <button class="btn btn-outline-warning " type="submit">Logout</button>

}
}
else
{
<ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink",@class="text-blue" })</li>
    <li>@Html.ActionLink("| Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "text-blue ml-1" })</li>
</ul>
}

问题在于，即使所有其他导航项都可以正常工作，下拉菜单也无法正常工作。我尝试过

$('.dropdown-toggle').dropdown();

但它也不起作用。

所有JS和CSS文件都存在并正确链接。

非常感谢您的帮助。

Answer 1

我正在回答这个问题，因为它可能对其他人有用。

Visual Studio .NET MVC随附的Bootstrap是Bootstrap3。我从Bootswatch下载了Bootstrap 4主题。所以现在我有了Bootstrap 4 CSS和Bootstrap 3 JS。这会导致不兼容，从而导致我描述的问题。

使用相似的版本可以解决此问题。

Bootstrap 4下拉菜单不适用于.net MVC

1 个答案: