BundleConfig.csが読み込まれない場合の確認ポイントについて（ASP.NET）

＜目次＞

(１) BundleConfig.csが読み込まれない場合の確認ポイントについて（ASP.NET）
　(１-１) 前提条件
　(１-２) 確認ポイント
　　（確認①）BundleConfig.csの追記orWeb.configの修正
　　（確認②）Global.asax.csへの登録
　　（確認③）web.configへの追記（名前空間）
　　（確認④）各ビューやレイアウト（_Layout.cshtml等）でのインポート

(１) BundleConfig.csが読み込まれない場合の確認ポイントについて（ASP.NET）

今回は「BundleConfig.csが読み込まれない場合」という事で、バンドルしたはずのcssやJavaScriptがクライアント側でバラバラにダウンロードされてしまう場合に、設定で確認すべきポイントをご紹介いたします。

(１-１) 前提条件

・BundleConfig.cs内にバンドルの設定を記述している事

→（参考）BundleConfig.csの設定および記述方法について

＞目次にもどる

(１-２) 確認ポイント

●（確認①）BundleConfig.csの追記orWeb.configの修正

  <system.web>
    <compilation debug="true" targetFramework="4.7.2"/>
    <httpRuntime targetFramework="4.7.2"/>
  </system.web>

（図１１１）

 

ただし、上記の変更をしてしまうとデバッグモードでの実行が出来なくなってしまうため、別の手段として上記を変えずにBundleConfig.csに1行追加する事でも有効化（Web.configの設定をBundleConfig.csにてオーバーライドする）が可能です。

 

BundleTable.EnableOptimizations = true;

（図１１２）

 

●（確認②）Global.asax.csへの登録

「Global.asax.cs」はアプリケーションレベルで起こる各種イベント（Application_Startなど）の処理を記述するためのC#プログラムです。今回のバンドル処理もApplication_Start内に記述する事でアプリケーション起動時に呼び出されます。今回追記した内容は次の通りです。

 

BundleConfig.RegisterBundles(BundleTable.Bundles);

（図１１３）

●（確認③）web.configへの追記（名前空間）

「namespace」属性に「System.Web.Optimization」を追記します。これにより、ビューで共通的に使用する事ができるため、各ビュー単位で記述する手間が省けます。

 

      <namespaces>
        <!--中略-->
        <add namespace="System.Web.Optimization" />
      </namespaces>

（図１１４）

 

●（確認④）各ビューやレイアウト（_Layout.cshtml等）でのインポート

最後に各ビューやレイアウト（共通的に使用するビュー）にてバンドル設定したcssやJavaScriptのインポートを行います。JavaScriptの場合、インポートには「Scripts」クラス（「System.Web.Optimization」名前空間）の「Reder」メソッドを使用します。このメソッドは、バンドル設定（BundleConfig.cs）にて定義されたパスを使って<script>要素を生成してくれます。

 

同様にcssの場合は「Styles」クラス（「System.Web.Optimization」名前空間）の「Reder」メソッドを使用します。

 

整理すると、次のような記述方法になります。

 

・JavaScriptの場合

@Scripts.Render("仮想パス")
//例
@Scripts.Render("~/bundles/modernizr")

 

・cssの場合

@Styles.Render("仮想パス")
//例
@Styles.Render("~/Content/css")

@*<script src="~/Scripts/jquery-3.4.1.min.js"></script>*@

@*<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />*@

＞目次にもどる