Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

ASP.NET C#

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

投稿日:2021年7月4日 更新日:

 

<目次>

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

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

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

(1-1) 前提条件

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

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

目次にもどる

(1-2) 確認ポイント

●(確認①)BundleConfig.csの追記orWeb.configの修正

バンドル&ミニフィケーション(スリム化)を有効化するにはWeb.config内の「compilation」要素のdebug属性を変更する事により切り替えが可能です。
 
・下記debug=”true”を”false”に変更
 
  <system.web>
    <compilation debug="true" targetFramework="4.7.2"/>
    <httpRuntime targetFramework="4.7.2"/>
  </system.web>
(図111)

 

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

 

●(確認②)Global.asax.csへの登録

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

●(確認③)web.configへの追記(名前空間)

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

 

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

 

●(確認④)各ビューやレイアウト(_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")
(図115)①

(図115)②
上記の追記と併せて、元々の(バンドルなしの)cssやJavaScriptをインストールする記述のコメントアウトも実施します。
 
・JavaScriptの例(コメントアウト)

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

 

・cssの例(コメントアウト)

@*<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />*@
 
以上の対応を実施したら、正常にcssがバンドルされて正しく反映されました。
(図116)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-ASP.NET, C#

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

C#のDB接続時のエラー(provider: Named Pipes Provider, error: 40 – Could not open a connection to SQL Server)

<目次> (1) 記事の目的  (1-1) エラー概要  (1-2) エラー原因  (1-3) エラー対策   (1-3-1) SQLServer:リモート接続を有効化   (1-3-2) SQLSe …

Xamarin.FormsでHelloworldする手順+Buttonコントロール追加のサンプルコード紹介

<目次> (1) Xamarin.FormsでHelloworldする手順  (1-1) Xamarin.Formsプロジェクト構成の概要  (1-2) MainPage.xamlの修正  (1-3) …

ASP.NET MVC(C#)でHelloWorldする手順

<目次> (1) ASP.NET MVC(C#)でHelloWorldする手順  (1-1) プロジェクトの作成  (1-2) Controller(コントローラー)の作成  (1-3) Veiw(ビ …

ASP.NET MVCでformをSubmitする方法

<目次> (1) ASP.NET MVCでformをSubmitする方法  (1-1) 概要  (1-2) HTMLを使ってformをsubmitする方法  (1-3) サンプルプログラム  (1-4 …

C#のIComparableの実装方法+IComparerとの違いについて

<目次> (1) C#のIComparableの実装方法+IComparerとの違いについて  (1-1) IComparableの概要とIComparableとの違い  (1-2) STEP0:比較 …

  • English (United States)
  • 日本語
Top