質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

8025閲覧

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

step.step.step

総合スコア4

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2021/06/27 14:32

編集2021/06/28 12:54

前提・実現したいこと

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だと色がつきます。
どうしてこのようになってしまうのか、原因や解決方法の糸口がつかめませんでした。
確認するべきことや原因の候補などございましたら、教えて頂けませんでしょうか。

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

c#

1<table class="table table-hover"> 2 <thead class="bg-dark"> //背景色 3 <tr> 4 <th> 5 @Html.DisplayNameFor(model => model.YMD) 6 </th> 7      ~ 中略 ~ 8 </tr> 9 </thead> 10 ~ 中略 ~ 11</table>

見出しの背景色dark

c#

1<table class="table table-hover"> 2 <thead class="bg-danger"> //背景色 3 <tr> 4 <th> 5 @Html.DisplayNameFor(model => model.YMD) 6 </th> 7      ~ 中略 ~ 8 </tr> 9 </thead> 10 ~ 中略 ~ 11</table>

見出しの背景色danger

c#

1<table class="table table-hover"> 2 ~ 中略 ~ 3 <tr class="bg-dark"> //背景色 4 <td> 5 @Html.DisplayFor(modelItem => item.YMD) 6 </td> 7 ~ 中略 ~ 8</table>

行の背景色dark

c#

1<table class="table table-hover"> 2 ~ 中略 ~ 3 <tr class="bg-danger"> //背景色 4 <td> 5 @Html.DisplayFor(modelItem => item.YMD) 6 </td> 7 ~ 中略 ~ 8</table>

行の背景色danger

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

c#

1using System.Web; 2using System.Web.Optimization; 3 4namespace AttendanceMg1 5{ 6 public class BundleConfig 7 { 8 // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください 9 public static void RegisterBundles(BundleCollection bundles) 10 { 11 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 12 "~/Scripts/jquery-{version}.js")); 13 14 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( 15 "~/Scripts/jquery.validate*")); 16 17 // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が 18 // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。 19 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( 20 "~/Scripts/modernizr-*")); 21 22 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( 23 "~/Scripts/bootstrap.js")); 24 25 bundles.Add(new StyleBundle("~/Content/css").Include( 26 "~/Content/bootstrap.css", 27 "~/Content/site.css")); 28 } 29 } 30} 31

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/06/27 20:29

> 2つのスレッドに分けるべきと思われましたら、ご指摘くださいスレッドをもう一つ作成します。 そのようにしてください。 前者は ASP.NET MVC5 での js, css ファイルのバンドル&ミニファイの話、後者は ASP.NET に関係ない Bootstrap の話で、異質なものですので。 後者の質問をする前に、Bootstrap のバージョンの違いでサポートされなくなったものがあるので、そこは自分で調べてください。
step.step.step

2021/06/28 12:18

>前者は ASP.NET MVC5 での js, css ファイルのバンドル&ミニファイの話、後者は ASP.NET に関係ない >Bootstrap の話で、異質なものですので。 ありがとうございます。そうだったんですね。 自分がなにか簡単な設定をやれていないだけなのかと思っていました。 もう一つスレッドを立てます。
step.step.step

2021/06/28 13:06

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

回答1

0

ベストアンサー

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 以外にも多々ありそうですが、それを全部書き換えるなんてことは考えてもいないのでは?

投稿2021/06/28 03:01

編集2021/06/28 04:09
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

step.step.step

2021/06/28 12:31

スゴイ。本当にありがとうございます。 >Bootstrap のバージョンを上げようとしている理由が分かりませんが、上位バージョンにしかない機能 >が絶対必要とかの理由がない限り安易にやるべきではないと思います。 まさにご指摘のとおりです。なんか、Bootstrapの新しいバージョンがありそうだからアップデートしようと考えただけでした。なにか必要な機能があるということでもないです。。。 なので、Bootstrap3に戻して作業します。 せっかく、色々調べてお答えいただいたのに、結局Bootstrap3を安易にバージョンを上げるべきではないということを自分が知らなかっただけでした。申し訳ないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問