代码之家 › 专栏 › 技术社区 › gchq

运行NuGet更新后MVC引导导航栏不工作

nuget-package asp.net-mvc-5 twitter-bootstrap

gchq · 技术社区 · 7 年前

我们更新了所有NuGet软件包后,一个MVC应用程序坏了。在尝试了一切之后,我创建了一个新的MVC应用程序,更新了NuGet包和基本导航栏。。。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>

<ul class="nav navbar-nav navbar-right">
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>


        </div>
    </div>
</div>

... 看起来像这样。。。

...然后单击图标。。。

你知道这是什么原因吗?

已尝试手动添加引导。css和引导。js到\u布局。vbhtml,但没有区别

非常感谢。

15 回复 | 直到 7 年前

Arseniy 7 年前

最后,我管理了我的HTML和你的HTML。与版本3相比,Bootstrap 4有很多变化。关于标记,您必须更改:

“导航栏反转”为“导航栏深色”,并使用颜色“bg深色”。
为按钮添加几个属性,如“aria控件”、“aria扩展”、“aria标签”和“数据目标”,以链接到另一个元素。
属性“id”到可折叠元素。
对于列表元素(标记LI),应添加class=“导航项”
对于未隐藏的链接列表元素,添加class=“导航链接”。
我建议在列表定义中添加“自动先生”。

以下所有更改。已测试 here .

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <a class="navbar-brand" href="/">Application name</a>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
        <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
        <li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
      </ul>

    </div>
  </div>
</nav>

Jon Roberts 3 年前

谢谢Drac。回答得很好。

对于任何想要Razor代码的人,这里是我的:

[编辑:代码包括@Suhani/@Sagi/@Doug Dekker/@Guilder建议的更改]

这是\u布局。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>
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        @Html.ActionLink("My Web Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <ul class="nav navbar-nav mr-auto">
                <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>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

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

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

这是\u LoginPartial。cshtml

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item">@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "nav-link" })</li>
        <li class="nav-item"><a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right me-auto">
    <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" })</li>
    </ul>
}

Sagi 6 年前

谢谢Drac,回答得很好。对于3.3版中的“hamburger”按钮,添加以下代码:

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

Thys 6 年前

以上所有答案都令人惊讶。

我的解决方案是临时的,而且更短: 卸载引导程序并重新安装旧版本。

在Package manager控制台中: 要卸载,请键入以下内容: 卸载包引导

完成后,重新安装有效的旧版本,例如: 安装程序包引导-版本3.3.7

David 5 年前

谢谢Jon!我尝试了代码,效果很好。

将HTML属性添加到列表中的操作链接后,索引操作是红色的-不知何故MVC找不到索引方法。我在“主”控制器之后添加了“null”,它就消失了。将其张贴在此处,以便有人可以从中受益。

<ul class="nav navbar-nav mr-auto">
    <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>
</ul>

szdrnja 6 年前

导致问题的原因是引导程序4无法识别引导程序3中的类,而引导程序3是ASP。NET此时使用。只是降级从NuGet启动到Bootstrap 3.3.7,您就可以开始了。

Pishang Ujeniya Kirk Woll 5 年前

使用MVC WebAPI项目

文件名: _布局。cshtml

只需先更换车身 nav-bar div 使用标记内容跟踪并检查。

<div class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
                @Html.ActionLink("Ebille", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    <li class="nav-item">@Html.ActionLink("API", "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
                </ul>
            </div>
        </div>
    </div>

在内部添加Fontawesome head 标签复制提供的代码 here

以上内容是针对Visual Studio 2019 MVC+WebAPI项目创建的初始默认应用程序进行测试的。

Chandima Chathura 6 年前

只需卸载更新的模块。我很确定这是Antlr包和引导程序。将其分别降级至3.4.1和3.3.0。这有助于解决我的问题。

kj007 XdebugX 6 年前

虽然来晚了,但希望这对我有帮助,因为这个问题对我来说是一场斗争。

我的 toolbar 从更新后被阻止 v3 到 v4 . 直到我有了下面列出的必要参考资料才开始工作。请注意,它们是本地参考,但应该与您的项目类似。

<!DOCTYPE html>
<html>
<head>
   <!-- Latest compiled and minified CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="~/Scripts/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</head>
</html>

Artorias2718 6 年前

以下是从 new project (摘自@Drac的帖子):

Artorias2718 6 年前

下面是一些默认登录分区的代码。添加“个人用户帐户”身份验证产生的cs:

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

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class="nav-link" })</li>
        <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class="nav-link" })</li>
    </ul>
}

Simranjit Kaur 5 年前

使用Bootstrap 3主题 https://bootswatch.com/3/ 使其在ASP中工作。NET MVC 5应用程序。下载引导程序。css文件并将其放置在您的内容文件夹中。如果需要,请在BundleConfig中更新引用。内容下的cs。

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap-lumen3.css",
                      "~/Content/site.css"));

因为从bootstrap 4.3到3没有向后兼容性。最好使用bootstrap 3。

PrakashG user1842676 5 年前

这很可能是因为引导版本问题。如果使用旧版本,更新到新的引导版本可能会破坏UI。您必须手动将旧的标记和属性转换为新的标记和属性。

或者,您可以通过检查您以前使用的引导程序和还原到旧版本的引导程序可以立即修复UI问题。

smoore4 5 年前

最简单的解决方案IMHO是转到其中一个引导样例主题并查看导航栏组件:

https://bootswatch.com/cerulean

单击要模拟的导航栏,它将显示导航栏的源代码。您也可以对不同版本的引导程序执行此操作。此示例适用于4.4.1。

下面的导航栏图像将为您提供以下代码。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Honza P. 3 年前

即使我知道这是一个附带的答案,但我认为这是一个分享替代解决方案的好地方。对我来说,关键是将bootstrap4降级回bootstrap3,并将modernizr“客户端脚本库添加到脚本文件夹”,然后像一个符咒一样重新开始工作。使用上述解决方案,我在菜单和菜单中的下拉列表方面遇到了问题。