web-dev-qa-db-fra.com

La barre de navigation d'amorçage MVC ne fonctionne pas après l'exécution des mises à jour de NuGet

Une application MVC est tombée en panne après la mise à jour de tous les packages NuGet. Après avoir tout essayé, j'ai créé une nouvelle application MVC, mis à jour les packages NuGet et la barre de navigation de base ...

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

... ressemble à ça ...

 NavBar

... et en cliquant sur l'icône ...

 NavBar Open

Des idées ce qui pourrait être la cause?

J'ai essayé d'ajouter manuellement Bootstrap.css et Bootstrap.js à _Layout.vbhtml, mais aucune différence

Je vous remercie

twitter-bootstrapasp.net-mvc-5nuget-package
19
gchq

Enfin, j'ai géré mon code HTML et le vôtre . Il y a beaucoup de changements dans Bootstrap 4 par rapport à la version 3. En ce qui concerne votre balisage, vous devez changer:

  1. "Navbar-inverse" à "Navbar-dark" et utilisez la couleur "bg-dark".
  2. Ajoutez quelques attributs au bouton, tels que "aria-controls", "aria-expand", "aria-label" et "data-target" pour créer un lien vers un autre élément.
  3. Propriété "id" en élément repliable.
  4. Class = "nav-item" pour les éléments de liste (balise LI)
  5. Pour les liens, supprimez les éléments de la liste et ajoutez class = "nav-link".
  6. Je suggère d'ajouter "mr-auto" à la liste definiton.

Tous les changements ci-dessous. Testé ici .

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

31
Drac

Merci Drac. Très bonne réponse. 

Pour ceux qui veulent le code Razor, voici le mien:

[EDIT: le code inclut les modifications suggérées par @Suhani et @Sagi/@Doug Dekker

C'est _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>

et c'est _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>
}
25
Jon Roberts

Merci Drac, bonne réponse. Pour un bouton "hamburger" comme dans la version 3.3, ajoutez ce 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>
6
Sagi

Merci Jon! J'ai essayé le code et fonctionne bien.

Après l’ajout de l’attribut HTML au lien d’action dans les listes, l’action Index est devenue rouge. MVC n’a pas trouvé la méthode d’index. J'ai ajouté "null" après le contrôleur "Home" et il est parti. Affichez-le ici, afin que quelqu'un puisse en bénéficier. 

@ Html.ActionLink ("Home", "Index", "Home", null, new {@class = "nav-link"}) </ li> @ Html.ActionLink ("About", "About", "Home", null, new {@class = "nav-link"}) </ li> @ Html.ActionLink ("Contact", "Contact", "Accueil", null, nouveau {@class = "nav-link"}) </ li>

4
Suhani

Le problème est que Bootstrap 4 ne peut pas reconnaître les classes de Bootstrap 3 et que Bootstrap 3 est ce que ASP .NET utilise à ce stade. Juste rétrogradez vers Bootstrap 3.3.7 de NuGet et vous serez prêt à partir.

0
stzdr

Voici ce qui a fonctionné pour moi à partir d'un nouveau projet (édité à partir du post de @ Drac):

0
Artorias2718

Il suffit de désinstaller les modules mis à jour. Je suis sûr que c'est Antlr Package et Bootstrap. Les rétrograder à 3.4.1 et 3.3.0 respectivement. Cela a aidé mon problème.

0
Chandima Chathura

Toutes les réponses ci-dessus sont étonnantes.

Ma solution est temporaire et plus courte: Désinstallez Bootstrap et réinstallez la version précédente.

Dans la console du gestionnaire de packages: Pour désinstaller, tapez ceci: Uninstall-package bootstrap

une fois cela fait, réinstallez l'ancienne version qui fonctionnait, par exemple:

0
Thys

Arrivée tardive, mais espérons que cela aide quelqu'un car cette question a été une lutte pour moi.

Ma toolbar a été bouchée après la mise à jour de v3 à v4. Ne fonctionnait pas tant que je n'avais pas les références nécessaires énumérées ci-dessous. Veuillez noter que ce sont des références locales, mais elles devraient être similaires à votre projet .

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