How does the JS and CSS of the ASP. NET MVC 5 default template load?

When you create a default MVC template, the project is as follows:

After running the project, the right mouse button to view the source code, in the source to see the head and tail have JS and CSS files are referenced, how they were added to it?

First we look at the corresponding view file index.cshtml, found that there is no load JS and CSS file identification.

This time we think of, will not be the layout template is loaded, because the index.cshtml page refers to the template, where the template reference mechanism is, through the _viewstart.cshtml file to set. When index.cshtml does not have any settings template page, the default is to refer to the _viewstart.cshtml file template as their own template, the advantage is that if very many pages need a template, you do not need to refer to each page, as long as the _ Viewstart.cshtml page configuration Once is enough, if you do not need a page of the template page that should be done? Write directly on the specific page: @{layout = null} on it, let's take a look at the internal code of the _viewstart.cshtml file:

Originally it is using the _layout.cshtml template file under the shared directory, and we look at what is in _layout.cshtml:

As you can see, this template page uses the C # code method to load JS and css: @Styles. Render (""); @Script. Render ("");

So how do these 2 methods load external JS and CSS files by word [string parameter]?

Discovering the trace of this [string parameter] in the App_start/bundleconfig.cs file by groping, let's take a look at the contents of this file:

As you can see, the most important piece of code is

Bundles. ADD (New Scriptbundle ("~/bundles/jquery"). Include (                        "~/scripts/jquery-{version}.js"));

It is easy to understand what it means. Equivalent to this string "~/bundles/jquery" is equal to this JS file ~/scripts/jquery-{version}.js, curly braces are version variables, because the JS library will be upgraded, will change.

Here we should know what is the matter, that is, through this file to the [string parameter] assignment, and the value is the specific JS and CSS file specific directory location.

The last question, when did they load?

From what this, we understand that the original program is loaded when it starts, the code that Works is:

Bundleconfig.registerbundles (Bundletable.bundles);

This means that when the program starts, it calls the class method of the BundleConfig.cs class file Registerbundles (bundlecollection bundles) to load these JS and CSS files.

As can be seen here, if we have to add some global JS and CSS, we can put the code into the BundleConfig.cs file, like this code:

Single file: Bundles. ADD (New Scriptbundle ("~/bundles/jquery"). Include ("~/scripts/jquery-{version}.js"));

Multiple files:
Bundles. ADD (New Scriptbundle ("~/bundles/bootstrap"). Include (
"~/scripts/bootstrap.js",
"~/scripts/respond.js"));

You can also use wildcard characters * and so on, please refer to the default generated files to understand.

Summarize:

The default template for ASP. js and CSS Reference paths are: BundleConfig.cs, _layout.cshtml, index.cshtml, _viewstart.cshtml, Global.asax

How does the JS and CSS of the ASP. NET MVC 5 default template load?