web-dev-qa-db-ja.com

MVC bootstrap navbarはNuGet更新の実行後に機能しません

すべてのNuGetパッケージを更新した後、MVCアプリが壊れました。すべてを試した後、新しいMVCアプリを作成し、NuGetパッケージと基本的な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>

...このように見えます...

NavBar

...そしてアイコンをクリック...

NavBar Open

これを引き起こしている可能性のあるアイデアはありますか？

Bootstrap.cssとBootstrap.jsを_Layout.vbhtmlに手動で追加しようとしましたが、違いはありません

ありがとうございました

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

最後に、HTMLとあなたのHTMLを管理しました。バージョン3と比較して、Bootstrap 4には多くの変更があります。マークアップに関しては、変更する必要があります。

  1. 「Navbar-inverse」から「Navbar-dark」に変更し、色「bg-dark」を使用します。
  2. 別の要素へのリンク用に、「aria-controls」、「aria-expanded」、「aria-label」、「data-target」など、いくつかの属性をボタンに追加します。
  3. 折りたたみ可能な要素のプロパティ「id」。
  4. リスト要素（タグLI）の場合、class = "nav-item"を追加する必要があります
  5. リスト要素以外のリンクについては、class = "nav-link"を追加します。
  6. リスト定義に「mr-auto」を追加することをお勧めします。

以下のすべての変更。テスト済み ここ 。

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

ありがとう、Drac。素晴らしい答え。

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>
}
33
Jon Roberts

Drac、すばらしい回答をありがとう。バージョン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>
7
Sagi

ジョンありがとう！コードを試してみましたが、うまくいきます。

HTML属性をリストのアクションリンクに追加した後、インデックスアクションが赤になりました-どういうわけかMVCはインデックスメソッドを見つけることができませんでした。 「Home」コントローラーの後に「null」を追加すると、消えました。ここに投稿すると、誰かがその恩恵を受けることができます。

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

問題の原因は、Bootstrap 4がBootstrap 3からのクラスを認識できず、Bootstrap 3がASP .NETが使用することですこの時点で。 NuGetからdowngrade to Bootstrap 3.3.7にすれば、準備完了です。

1
stzdr

上記のすべてが驚くべき答えです。

私の解決策は一時的で短くなります：bootstrapをアンインストールし、古いバージョンを再インストールします。

パッケージマネージャーコンソール：アンインストールするには、次を入力します：uninstall-package bootstrap

完了したら、機能した古いバージョンを再インストールします。例：install-package bootstrap -Version 3.3.7

1
Thys

新しいプロジェクト （@Dracの投稿から編集）から私に合ったものは次のとおりです。

0
Artorias2718

Bootstrap 3つのテーマ https://bootswatch.com/3/ を使用して、ASP.NET MVC 5アプリケーションで動作するようにします。 bootstrap.cssファイルをダウンロードして、コンテンツフォルダーに配置します。必要であれば、BundleConfig.csのContentの下で参照を更新します。

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

bootstrap 4.3から3への下位互換性がないため、bootstrap 3を使用する方が適切です。

0
Simranjit Kaur

MVC WebAPIプロジェクトでの作業

ファイル名：_ Layout.cshtml

  1. ボディの最初のnav-bardivタグの内容を次の内容に置き換えるだけで確認できます。
<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. headタグ内にFontawesomeを追加します。提供されたコードをコピーします here

上記のコンテンツは、Visual Studio 2019 MVC + WebAPIプロジェクトによって作成された初期デフォルトアプリでテストされています。

0
Pishang Ujeniya

更新されたモジュールをアンインストールするだけです。私はそれがAntlr PackageとBootstrapだと確信しています。それらをそれぞれ3.4.1および3.3.0にダウングレードします。これは私の問題を助けました。

0
Chandima Chathura

「個人ユーザーアカウント」認証の追加から得られるデフォルトの_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>
}
0
Artorias2718

到着が遅れていますが、この問題が私にとって苦労だったので、これが誰かを助けることを願っています。

私の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>
0
Brendan