MVC bootstrap navbar not working after running NuG

2019-01-31 04:13发布

站内问答 / 前端开发
1640 8 5

An MVC app broke after we updated all the NuGet packages. After trying everything I created a new MVC app, updated the NuGet packages and the basic navbar...

<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>

... looks like this ...

NavBar

...and clicking the icon...

NavBar Open

Any ideas what could be causing this?

Have tried manually adding Bootstrap.css and Bootstrap.js to _Layout.vbhtml, but no difference

Thank you

8条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-01-31 04:30

What's causing the issue is that Bootstrap 4 can't recognize classes from Bootstrap 3, and Bootstrap 3 is what ASP .NET uses at this point. Just downgrade to Bootstrap 3.3.7 from NuGet and you'll be good to go.

查看更多
0人赞 添加讨论(0) 举报
欢心
3楼-- · 2019-01-31 04:43

Thanks Jon! I tried the code and works well.

After adding the HTML Attribute to the Action Link in lists, the Index action was red - somehow MVC couldn't find the Index Method. I added "null" after the "Home" Controller and it went away. Posting it here , so someone can benefit from it.

@Html.ActionLink("Home","Index", "Home",null, new { @class = "nav-link" }) @Html.ActionLink("About", "About", "Home",null, new { @class = "nav-link" }) @Html.ActionLink("Contact", "Contact", "Home",null, new { @class = "nav-link" })

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-01-31 04:46

Thanks, Drac. Great answer.

For anyone that wants the Razor code, here's mine:

[EDIT: Code includes changes suggested by @Suhani and @Sagi / @Doug Dekker

This is _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>
    <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>

and this is _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" })</li>
        <li class="nav-item"><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right mr-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>
}
查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
5楼-- · 2019-01-31 04:48

Finally, I managed my HTML and yours. There're a lot of changes in Bootstrap 4 in compare to version 3. Regarding your markup, you have to change:

  1. "Navbar-inverse" to "Navbar-dark" and use color "bg-dark".
  2. Add few attributes to button, as "aria-controls", "aria-expanded", "aria-label" and "data-target" for link to another element.
  3. Property "id" to collapsable element.
  4. For list elements (tag LI) should be added class="nav-item"
  5. For links unside list elements add class="nav-link".
  6. I suggest to add "mr-auto" to list definiton.

All changes below. Tested 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>

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
6楼-- · 2019-01-31 04:48

All of the above answers amazing.

My solution is temporary and shorter: Uninstall bootstrap and reinstall older version.

In Package-manager console: To uninstall, type this: uninstall-package bootstrap

once done, reinstall the old version which worked, eg: install-package bootstrap -Version 3.3.7

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
7楼-- · 2019-01-31 04:49

Just uninstall the updated modules. I'm pretty sure it's Antlr Package and Bootstrap. Downgrade them to 3.4.1 and 3.3.0 respectively. This helped my issue.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)