MVC bootstrap navbar не работает после запуска обновлений NuGet

Приложение MVC сломалось после обновления всех пакетов NuGet. Попробовав все, что я создал новое приложение 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>

... выглядит так...

NavBar

... и щелкнув значок...

NavBar Open

Любые идеи, что может быть причиной этого?

Попробовали вручную добавить Bootstrap.css и Bootstrap.js в _Layout.vbhtml, но без разницы

Спасибо

Ответы

Ответ 1

Наконец, я справился с моим HTML и вашим. В Bootstrap 4 есть много изменений по сравнению с версией 3. Что касается вашей разметки, вы должны изменить:

  • "Navbar-inverse" на "Navbar-dark" и используйте цвет "bg-dark".
  • Добавьте несколько атрибутов к кнопке, как "aria-controls", "aria-extended", "aria-label" и "target-target" для ссылки на другой элемент.
  • Свойство "id" для сбрасываемого элемента.
  • Для элементов списка (тег LI) следует добавить class= "nav-item"
  • Для ссылок без элементов списка добавить class= "nav-link".
  • Я предлагаю добавить "mr-auto" в список definiton.

Все изменения ниже. Протестировано здесь.

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

Ответ 2

Спасибо, Драк. Отличный ответ.

Для тех, кто хочет код Razor, вот мой:

[РЕДАКТИРОВАТЬ: Код включает в себя изменения, предложенные @Suhani и @Sagi/@Doug Dekker

Это _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>

и это _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>
}

Ответ 3

Спасибо Драк, отличный ответ. Для кнопки "гамбургер", как в версии 3.3, добавьте этот код:

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

Ответ 4

Спасибо Джон! Я попробовал код и работает хорошо.

После добавления атрибута HTML к ссылке на действие в списках действие "Индекс" было красным - каким-то образом MVC не смог найти метод "Индекс". Я добавил "ноль" после "Домашнего" контроллера, и он ушел. Размещайте это здесь, чтобы кто-то мог извлечь из этого пользу.

<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

Все вышеперечисленные ответы удивительны.

Мое решение временное и короче: удалите загрузчик и переустановите старую версию.

В консоли диспетчера пакетов: Чтобы удалить, введите: uninstall-package bootstrap

После этого переустановите старую версию, которая сработала, например: bootstrap install-package -Version 3.3.7

Ответ 6

Причиной проблемы является то, что Bootstrap 4 не может распознавать классы из Bootstrap 3, а Bootstrap 3 - это то, что ASP.NET использует на этом этапе. Просто перейдите на версию Bootstrap 3.3.7 от NuGet, и все будет хорошо.

Ответ 7

Просто удалите обновленные модули. Я почти уверен, что это пакет Antlr и Bootstrap. Понизьте их до 3.4.1 и 3.3.0 соответственно. Это помогло моей проблеме.

Ответ 8

Позднее прибытие, но надеюсь, что это кому-то поможет, так как этот вопрос стал для меня проблемой.

Моя 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>

Ответ 9

Вот что сработало для меня из нового проекта (отредактировано из поста @Drac):

Ответ 10

Вот некоторый код для _LoginPartial.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>
}

Ответ 11

РАБОТА С ПРОЕКТОМ MVC WebAPI

Имя файла: _Layout.cshtml

  1. Просто замените содержимое тега div тегом nav-bar на следующее и проверьте его.
<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. Добавьте Fontawesome внутри тега head. Скопируйте код, приведенный здесь

Вышеуказанное содержимое протестировано для первоначального приложения по умолчанию, созданного проектом Visual Studio 2019 MVC + WebAPI.

Ответ 12

Используйте темы Bootstrap 3 https://bootswatch.com/3/, чтобы он работал в приложении ASP.NET MVC 5. Загрузите файл bootstrap.css и поместите его в папку с содержимым. И обновите ссылку, если хотите, в BundleConfig.cs под Контентом.

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

Так как нет обратной совместимости с начальной загрузкой 4.3 до 3. Лучше использовать загрузочную версию 3.