La barre navale MVC bootstrap ne fonctionne pas après l'exécution des mises à jour NuGet

Question

La barre navale MVC bootstrap ne fonctionne pas après l'exécution des mises à jour NuGet

Demandé el 31 de Janvier, 2018: Quand la question a-t-elle été
21378 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Une application MVC est tombée en panne après avoir mis à jour tous les paquets NuGet. Après avoir tout essayé, j'ai créé une nouvelle application MVC, mis à jour les paquets 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="http://stackoverflow.com/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="http://stackoverflow.com/">Home</a></li>
                <li><a href="http://stackoverflow.com/Home/About">About</a></li>
                <li><a href="http://stackoverflow.com/Home/Contact">Contact</a></li>
            </ul>

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

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

... ressemble à ceci ...

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

Une idée de ce qui pourrait causer ce problème ?

J'ai essayé d'ajouter manuellement Bootstrap.css et Bootstrap.js à _Layout.vbhtml, mais sans résultat.

Merci.

Demandé el 31 de Janvier, 2018 par gchq

0 votes

Quelle version de Bootstrap utilisez-vous et avez-vous vérifié/noté des erreurs dans les outils de développement du navigateur (journal de la console) ? J'ai testé le balisage fourni dans ce violon comme référence.

Commenté el 1 de Février, 2018 par Tetsuya Yamamoto

0 votes

Bootstrap 4.0. Votre bidouille fonctionne comme prévu.

Commenté el 1 de Février, 2018 par gchq

1 votes

La barre de navigation servie dans l'application d'origine génère également le message "Exception thrown and not caught" dans jquery-3.3.1.js à la ligne 3827. La barre de navigation de base ne présente aucune erreur, elle semble simplement ignorer toutes les css.

Commenté el 1 de Février, 2018 par gchq

Afficher 3 autres commentaires

Answer 1

5 Réponses

Answer 2

74voto

Drac Points 600

Enfin, j'ai géré mon 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 :

"Navbar-inverse" en "Navbar-foncé" et utiliser la couleur "bg-foncé".
Ajoutez quelques attributs au bouton, comme "aria-controls", "aria-expanded", "aria-label" et "data-target" pour établir un lien avec un autre élément.
Propriété "id" à l'élément réductible.
Pour les éléments de liste (balise LI), il faut ajouter class="nav-item".
Pour les liens en dehors des éléments de liste, ajoutez class="nav-link".
Je suggère d'ajouter "mr-auto" à la définition de la liste.

Tous les changements ci-dessous. Testé aquí .

<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="http://stackoverflow.com/">Application name</a>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a href="http://stackoverflow.com/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="http://stackoverflow.com/Home/About" class="nav-link">About</a></li>
        <li class="nav-item"><a href="http://stackoverflow.com/Home/Contact" class="nav-link">Contact</a></li>
      </ul>

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

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

Répondu el 5 de Février, 2018 par Drac (600 Points )

6 votes

C'est gentil de leur part de tout casser sans aucune rétrocompatibilité, et sans aucun avertissement ! !! Merci.

Commenté el 6 de Février, 2018 par gchq

3 votes

@gchq Le numéro de version lui-même indique l'absence de rétrocompatibilité. C'est en fait ce que le premier chiffre signifie : des changements majeurs non rétrocompatibles.

Commenté el 21 de Janvier, 2019 par Lopsided

2 votes

Un avertissement indiquant qu'il casse tout serait, bien sûr, le bienvenu :-)

Commenté el 21 de Janvier, 2019 par gchq

Afficher 1 autres commentaires

Answer 3

63voto

Jon Roberts Points 379

Merci, Drac. Excellente réponse.

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

[EDIT : Le code inclut les changements suggérés par @Suhani / @Sagi / @Doug Dekker / @Guilder].

Voici _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 voici _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>
}

Répondu el 1 de Mars, 2018 par Jon Roberts (379 Points )

0 votes

Comme @Suhani l'a mentionné, vous devez ajouter null à l'extension actionlink.

Commenté el 13 de Octobre, 2018 par erhan355

1 votes

Le bouton de la page Layout doit contenir une balise span avec la classe "navbar-toggler-icon".

Commenté el 10 de Novembre, 2018 par Doug Dekker

1 votes

Merci de nous avoir fourni cette information ! En guise de correction, les nœuds _LoginPartial.cshtml <ul> doivent utiliser 'ml-auto' au lieu de 'mr-auto' pour aligner complètement à droite les boutons d'enregistrement/de connexion et/ou le nom d'utilisateur.

Commenté el 26 de Juillet, 2019 par CodeBreaker

Afficher 1 autres commentaires

Answer 4

8voto

Sagi Points 85

Merci Drac, excellente 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>

Répondu el 11 de Juin, 2018 par Sagi (85 Points )

Answer 5

7voto

Suhani Points 61

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

Après avoir ajouté l'attribut HTML au lien d'action dans les listes, l'action Index était en rouge - d'une certaine manière, MVC ne pouvait pas trouver la méthode Index. J'ai ajouté "null" après le contrôleur "Home" et le problème a disparu. Je le poste ici, afin que quelqu'un puisse en bénéficier.

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

Répondu el 3 de Mai, 2018 par Suhani (61 Points )

Answer 6

7voto

Thys Points 56

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

Ma solution est temporaire et plus courte : Désinstaller bootstrap et réinstaller l'ancienne version.

Dans la console Package-manager : Pour désinstaller, tapez ceci : uninstall-package bootstrap

Une fois que c'est fait, réinstallez l'ancienne version qui a fonctionné, par ex : install-package bootstrap -Version 3.3.7

Répondu el 5 de Septembre, 2018 par Thys (56 Points )

0 votes

Pensant que la dernière version 3.x résoudrait le problème, j'ai essayé la 3.4.1. Cela n'a eu aucun effet. Comme suggéré ci-dessus, la solution est d'utiliser la version 3.3.7.

Commenté el 6 de Octobre, 2020 par Leigh

La barre navale MVC bootstrap ne fonctionne pas après l'exécution des mises à jour NuGet

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

La barre navale MVC bootstrap ne fonctionne pas après l'exécution des mises à jour NuGet

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: