ASP.NET MVC Bootstrap5をインストールした際の例外が解決できません。またBootstrapで一部の背景色が適用できません。

Question

前提・実現したいこと

visual studio 2019
ASP.NET MVC5
で学習をしています。

今回、ご質問したいことが2点あるのですが、ひょっとすると原因が一つに行き着くのかもしれないと思い、
1つのスレッドにまとめることにしました。
2つのスレッドに分けるべきと思われましたら、ご指摘くださいスレッドをもう一つ作成します。

作成しようとしているのは架空の学校で登校時間、下校時間などを各ユーザーが
自分で登録するサイトです。

いま、各ユーザーさんが自分の登録した情報を一覧で表示する画面のViewを作成しています。

デフォルトでBootstrap3.0が入っていたので、NuGetパッケージを使って Bootstrap4.6.0
にアップデートしました。

■質問1
実は、初めにBootstrap5でアップデートしたのですが、_Layout.cshtmlの@Scripts.Render("~/bundles/bootstrap")でSystem.NullReferenceexceptionが出てしまいます。
原因や解決方法が解りませんでした。
ご存知の方がいらっしゃいましたらアドバイスを頂けないでしょうか。

-----2021/06/28追記--------
■質問2は別スレッドに分けましたので、以下の■質問2は無視してください。

■質問2
Bootstrap4.6.0だと上記の問題は起きなかったので作業を進めました。
tableの見出しと、行の一部の背景をdarkにしたいのですが、dark色をつけられません。
にもかかわらず、dangerだと色がつきます。
どうしてこのようになってしまうのか、原因や解決方法の糸口がつかめませんでした。
確認するべきことや原因の候補などございましたら、教えて頂けませんでしょうか。

よろしくお願いいたします。

<table class="table table-hover">
    <thead class="bg-dark"> //背景色
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.YMD)
            </th>
　　　　　　~　中略　~
        </tr>
    </thead>
    ~　中略　~
</table>

<table class="table table-hover">
    <thead class="bg-danger">　//背景色
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.YMD)
            </th>
　　　　　　~　中略　~
        </tr>
    </thead>
    ~　中略　~
</table>

<table class="table table-hover">
    ~　中略　~
    <tr class="bg-dark">　//背景色
      <td>
        @Html.DisplayFor(modelItem => item.YMD)
      </td>
    ~　中略　~
</table>

<table class="table table-hover">
    ~　中略　~
    <tr class="bg-danger"> //背景色
      <td>
        @Html.DisplayFor(modelItem => item.YMD)
      </td>
    ~　中略　~
</table>

参考になるかどうか解りませんが、
App_Start/BundleConfig.csです

using System.Web;
using System.Web.Optimization;

namespace AttendanceMg1
{
    public class BundleConfig
    {
        // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
            // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

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

Comments

[退会済みユーザー]

> 2つのスレッドに分けるべきと思われましたら、ご指摘くださいスレッドをもう一つ作成します。

そのようにしてください。

前者は ASP.NET MVC5 での js, css ファイルのバンドル&ミニファイの話、後者は ASP.NET に関係ない Bootstrap の話で、異質なものですので。

後者の質問をする前に、Bootstrap のバージョンの違いでサポートされなくなったものがあるので、そこは自分で調べてください。

[step.step.step]

>前者は ASP.NET MVC5 での js, css ファイルのバンドル&ミニファイの話、後者は ASP.NET に関係ない >Bootstrap の話で、異質なものですので。

ありがとうございます。そうだったんですね。
自分がなにか簡単な設定をやれていないだけなのかと思っていました。
もう一つスレッドを立てます。

[step.step.step]

>後者の質問をする前に、Bootstrap のバージョンの違いでサポートされなくなったものがあるので、そこは
>自分で調べてください。

Bootstrap3で検索してみると、darkはサポートされていないということですね。

Answer 1

2つのスレッドに分けるべきと思われましたら、ご指摘くださいスレッドをもう一つ作成します。

質問のコメントにも書きましたが、そのようにしてください。

質問 1 は ASP.NET MVC5 での js, css ファイルのバンドル＆ミニファイの話、質問 2 は ASP.NET に直接関係ない html, css, Bootstrap4 の話で、同じスレッドで扱う話ではありませんので。

質問 1 のみ以下に回答します。

実は、初めにBootstrap5でアップデートしたのですが、_Layout.cshtmlの@Scripts.Render("~/bundles/bootstrap")でSystem.NullReferenceexceptionが出てしまいます。

Visual Studio のテンプレートで作る MVC5 アプリのデフォルト Bootstrap3 を Bootstrap5 にすると NullReferenceException という話は初めて聞きました。（アップコンパチではないので、普通そんな大胆なアップグレードはしないはず）

ググってみると以下の記事がヒットします:

Object reference not set to an instance of an object in _Layout.cshtml after updated packages
https://stackoverflow.com/questions/30219807/object-reference-not-set-to-an-instance-of-an-object-in-layout-cshtml-after-upd

MVC 5 @Scripts.Render("~/bundles/bootstrap") error 'Object reference not set to an instance of an object.'
https://stackoverflow.com/questions/68009152/mvc-5-scripts-render-bundles-bootstrap-error-object-reference-not-set-to

上の記事には bundles.Add(new ScriptBundle( ... の ScriptBundle を Bundle に変えるという回答があります。自分の環境で試すと確かにそれで例外は出なくなりました。

以下の記事によると ScriptBundle と Bundle の違いはミニファイの有無で、Bundle はミニファイ無しとのことです。

.NET Bundling & Minification – 10 Key Notes
http://blog.travisgosselin.com/net-bundling-minification-top-10-keys/

ScriptBundle に含まれるミニファイ機能と何かの不整合で、@Scripts.Render で NullReferenceException が発生するということのように思われます。

上の記事の裏は取れてませんし、何との不整合なのか、なぜ Bootsrap3 では問題ないのが Bootstrap5 でミニファイに問題が出るのかも分かりませんが・・・

Bootstrap のバージョンを上げようとしている理由が分かりませんが、上位バージョンにしかない機能が絶対必要とかの理由がない限り安易にやるべきではないと思います。

ScriptBundle を Bundle に変更して NullReferenceException 例外を回避したとしても、アップコンパチではないので以下のように Navibar が表示されないなどの問題が出ます。

MVC5 のテンプレートやスキャフォールディング機能で生成されるコードの css は Bootstrap3 で考えられている故、そのままでは Bootstrap5 では期待通りにならないケースは上の Navibar 以外にも多々ありそうですが、それを全部書き換えるなんてことは考えてもいないのでは？

Comments

[step.step.step]

スゴイ。本当にありがとうございます。

>Bootstrap のバージョンを上げようとしている理由が分かりませんが、上位バージョンにしかない機能
>が絶対必要とかの理由がない限り安易にやるべきではないと思います。

まさにご指摘のとおりです。なんか、Bootstrapの新しいバージョンがありそうだからアップデートしようと考えただけでした。なにか必要な機能があるということでもないです。。。
なので、Bootstrap3に戻して作業します。

せっかく、色々調べてお答えいただいたのに、結局Bootstrap3を安易にバージョンを上げるべきではないということを自分が知らなかっただけでした。申し訳ないです。