asp.net MVC bundles usage and description (Pack JavaScript and CSS) _ self-study process

In Web pages, we often need to refer to a large number of JavaScript and CSS files, plus many JavaScript libraries contain both the debug version and the compressed release version (such as jquery), not only trouble but also easy to cause confusion, so asp.net MVC4 introduces the bundles feature, making it easy to manage JavaScript and CSS files.

Originally, we refer to CSS and JavaScript files we need such a reference to one:

Copy Code code as follows:

<scriptsrc= "~/scripts/jquery-1.8.2.js" ></script>
<scriptsrc= "~/scripts/jquery-ui-1.8.24.js" ></script>
<scriptsrc= "~/scripts/jquery.validate.js" ></script>
<linkhref= "~/content/site.css" rel= "stylesheet"/>

When you need to refer to a small number of files is fine, but once each page needs to refer to more files, it will cause great inconvenience, when we want to replace a reference file, it will waste a lot of time. When publishing, replace some libraries with release versions, such as the jquery-1.8.2.js corresponding to the Jquery-1.8.2.min.js

Okay, now we can use the bundles feature:

Copy Code code as follows:

public class Bundleconfig
{
public static void Registerbundles (Bundlecollection bundles)
{
Bundles. ADD (New Scriptbundle ("~/bundles/jquery")
. Include ("~/scripts/jquery-{version}.js"));
Bundles. ADD (New Scriptbundle ("~/bundles/jqueryui")
. Include ("~/scripts/jquery-ui-{version}.js"));
Bundles. ADD (New Scriptbundle ("~/bundles/jqueryval")
. Include ("~/scripts/jquery.unobtrusive*"
, "~/scripts/jquery.validate*"));
Bundles. ADD (New Stylebundle ("~/content/css")
. Include ("~/content/site.css"));
}
}

The Bundleconfig.registerbundles method is then invoked in the Application_Start method of the Global.asax file:

Copy Code code as follows:

protected void Application_Start ()
{
Arearegistration.registerallareas ();
Webapiconfig.register (globalconfiguration.configuration);
Filterconfig.registerglobalfilters (globalfilters.filters);
Routeconfig.registerroutes (routetable.routes);
Bundleconfig.registerbundles (Bundletable.bundles);
}

On the above we can see that we have different files to the corresponding bundle (bundle is the meaning of the package), in which the string parameter in the constructor is the name of bundle, and the include function is to include the corresponding file in the parameter as a bundle. As you can see, for the jquery library, we used the name ~/scripts/jquery-{version}.js, where {version} is partially representative of the edition number, and MVC will look for the corresponding "in the Scripts file." jquery-version number. js file, and in non-debug mode, MVC uses the jquery-version number. min.js file.

We also saw that we used the name ~/scripts/jquery.validate*, * is a wildcard, which means that all files prefixed to jquery.validate under the Scripts folder will be included in the same bundle.

Finally, we can use bundle in the view instead of the way it was originally referenced:

Copy Code code as follows:

@Styles. Render ("~/content/css")
@Scripts. Render ("~/bundles/jquery")