當創建一個默認的mvc模板后,項目如下:
運行項目后,鼠標右鍵查看源碼,在源碼里看到頭部和尾部都有js和css文件被引用,他們是怎么被添加進來的呢?
首先我們先看對應的view文件index.cshtml,發現並沒有任何加載js和css文件的標識。
這個時候我們就想到了,會不會是布局模板里加載了呢,因為index.cshtml頁面是引用了模板的,這里的模板引用機制是,通過_ViewStart.cshtml文件來設置的。當index.cshtml沒有任何設置模板頁的時候,就默認把_ViewStart.cshtml文件引用的模板作為自己的模板,這么做的好處是如果非常多的頁面需要模板,就不需要在每個頁面都引用了,只要在_ViewStart.cshtml頁面配置一次就夠了,如果有不需要模板頁的頁面那又該這么辦呢?直接在具體頁面 寫:@{ layout = null }就可以了,我們來看看 _ViewStart.cshtml 文件的內部代碼:
原來它是用Shared目錄下的_Layout.cshtml模板文件,我們再來看看 _Layout.cshtml 里是什么內容:
可以看出,這個模板頁面是用過C#代碼方法來加載js和css :@Styles.Render(""); @Script.Render("");
那這2個方法是怎么通過字[符串參數]加載外部js和css文件的呢?
通過摸索發現在App_Start/BundleConfig.cs 文件中發現了這個[字符串參數]的蹤跡,我們來看看這個文件里的內容:
從中可以看出,最重要的一段代碼為
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
可以很容易明白它的意思。相當於這個字符串 "~/bundles/jquery" 就是等於 這個js文件 ~/Scripts/jquery-{version}.js ,大括號里的是版本變量,因為js庫是會被升級的,會變動的。
到了這里我們應該知道是怎么一回事了,就是通過這個文件給[字符串參數] 賦值,而值就是具體的js和css文件具體目錄位置。
最后一個問題,它們是什么時候加載的呢?
從什么這個截圖,我們就明白,原來程序一啟動就被加載了,起作用的代碼是:
BundleConfig.RegisterBundles(BundleTable.Bundles);
意思是說,程序一啟動,調用BundleConfig.cs 類文件的類方法 RegisterBundles(BundleCollection bundles)來加載這些js和css文件。
從這里可以看出,如果我們自己要加一些全局js和css ,就可以把代碼添加到 BundleConfig.cs 文件里,類似這樣的代碼:
單文件:bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
多文件:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
還可以用通配符 * 等,請參考默認生成的文件就能明白了。
總結:
ASP.NET MVC 默認模板js和css的引用路徑為:index.cshtml -> _ViewStart.cshtml -> _Layout.cshtml -> BundleConfig.cs -> Global.asax