All geek questions in one place

MVC bootstrap navbar not working after starting NuGet updates

The MVC application broke after updating all NuGet packages. Having tried everything that I created a new MVC application, updated the NuGet packages and basic navigation ...

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

Navbar

... and clicking the icon ...

Navbar open

Any ideas what could be causing this?

Tried to manually add Bootstrap.css and Bootstrap.js to _Layout.vbhtml, but no difference

thanks

+31
source share
12 answers

Finally, I dealt with my HTML and yours. Bootstrap 4 has a lot of changes compared to version 3. As for your markup, you should change:

  • "Navbar-inverse" to "Navbar-dark" and use the color "bg-dark".
  • Add a few attributes to the button, like "aria-controls", "aria-extended", "aria-label" and "target-target" to reference another element.
  • The id property for the discarded item.
  • For list items (LI tag) add class = "nav-item"
  • For links without list items, add class = "nav-link".
  • I suggest adding "mr-auto" to the definiton list.

All changes are 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>
+46
source

Thanks, Drak. Great answer.

For those who want a Razor code, here is mine:

[EDIT: Code includes changes proposed 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> }
+33
source

Thanks Drak, great answer. For the hamburger button, as in version 3.3, add this code:

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

Thanks, John! I tried the code and it works well.

After adding the HTML attribute to the action link in the lists, the Index action was red - somehow MVC could not find the Index method. I added a “zero” after the “Home” controller, and it left. Post it here so that someone can benefit from it.

 <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>
+5
source

All of the above answers are amazing.

My solution is temporary and shorter: remove the bootloader and reinstall the old version.

In the package manager console: To remove, type: uninstall-package bootstrap

After that, reinstall the old version that worked, for example: bootstrap install-package -Version 3.3.7

+1
source

The cause of the problem is that Bootstrap 4 cannot recognize classes from Bootstrap 3, and Bootstrap 3 is what ASP.NET uses at this point. Just upgrade to NuGet's Bootstrap 3.3.7 version and everything will be fine.

+1
source

Just remove the updated modules. I am pretty sure this is the Antlr and Bootstrap package. Lower them to 3.4.1 and 3.3.0 respectively. This helped my problem.

0
source

Late arrival, but I hope this helps someone, as this issue has become a problem for me.

My toolbar was damaged after upgrading from v3 to v4 . Didn't work until I had the necessary links listed below. Please note that these are local links, but they should be similar to your project.

 <!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>
0
source

Here's what worked for me from a new project (edited from @Drac's post):

0
source

Here is some code for _LoginPartial.cs by default, which is obtained by adding authentication "Individual user accounts":

 @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> }
0
source

WORKING WITH MVC WebAPI PROJECT

File Name: _Layout.cshtml

  1. Just replace the contents of the div tag with the nav-bar tag with the following and check it.
 <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>
  1. Add a Fontawesome inside the head tag. Copy the code given here

The above content has been tested for the initial default application created by the Visual Studio 2019 MVC + WebAPI project.

0
source

Use Bootstrap 3 themes https://bootswatch.com/3/ to make it work in ASP.NET MVC 5. Download the bootstrap.css file and place it in the content folder. And update the link, if you like, in BundleConfig.cs under Content.

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

Since there is no backward compatibility with bootstrap 4.3 to 3. It is better to use boot version 3.

0
source

Source: https://habr.com/ru/post/1275084/

More articles:


All Articles