如何在 MVC 5 中实现菜单
Posted
技术标签:
【中文标题】如何在 MVC 5 中实现菜单【英文标题】：How to implement Menu in MVC 5 【发布时间】：2018-10-24 10:31:50 【问题描述】：创建了一个 MVC 5 项目，您想更改此项目的菜单，因为它使用了Bootwatch，您要实现的菜单如下
我做的第一件事就是改变我项目的大体风格，下载 bootstrap.css 文件
然后我用我的 BundleConfig 替换它，因为我之前有一个，这修改了我的项目的样式，但不包括前面提到的导航栏
要放置您想要的导航栏，请在我的_Layout.cshtml 中实现以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Muebles Pangal</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">Muebles Pangal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Buscar" type="text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Sistema Bodega</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
但是在执行我的项目时，我发现以下问题，我的菜单不能很好地响应响应调用，这意味着当我更改（缩小）浏览器的大小并从我的 @987654332 调用菜单时@this 显示出来了，但是马上又崩溃了。
所以它不能以正确的方式工作，我已经尝试解决这个问题好几天了，但我没有得到好的结果。 我已经安装了 Bootstrap 和 Bootstrap.less 软件包，有人可以帮助我吗？怎么回事？
对我有什么帮助吗？
【问题讨论】：
因此，当您单击按钮时，它会显示菜单.. 然后.. 无需再次单击按钮.. 菜单消失了吗？你能创建一个JSFiddle吗？ 正是这种行为，你知道发生了什么吗？ @M12Bennett 而您所做的只是从 bootswatch 复制并粘贴代码？没有变化？ 【参考方案1】：我相信您缺少 jQuery.min.js，或者它可能在您的代码结构中以错误的顺序放置。希望这个 sn-p 有帮助！！
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">Muebles Pangal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action(" Index ", "Categorias ")">Categorias </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action(" Index ", "Productoes ")">Productos </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Buscar" type="text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>【讨论】：
我不认为这是因为jQuery.min.. 这只是普通jQuery.js.. 的最小版本，我相信如果没有加载导航栏将无法工作
但我所做的只是将它添加到顶部并按预期工作，如果你注意到他只有 bootstrap.js 而根本没有 jQuery - 除非它在不同的位置
我不认为 OP 向我们展示了他们所有的代码.. 通常默认情况下，对于 MVC 项目，Bundle.config 中有另一个包引用 jquery.. 像这样：@ 987654324@
在这种情况下，它可能会在 bootstrap.js 被导入之后被导入。 BS 网站明确声明将 jquery 放在 bs.js 之前。这也是我的预感，因为这解决了问题。我也可能错了:)
我已经尝试了您的答案，但仍然无法正常工作，我该如何提供有关我的问题的更多信息？ @karthik【参考方案2】：
你能检查你的css是否有以下内容：
.navbar-collapse.collapse
display: none!important;
我可以使用您发布的内容在新的 MVC 5 项目中获得工作菜单，但我没有与您相同的 css。
请查看类似问题：Bootstrap mobile menu wont stay open
【讨论】：
以上是关于如何在 MVC 5 中实现菜单的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ASP.NET MVC 5 和 WEB API 2 中实现 oauth2 服务器 [关闭]