ASP. NET MVC Bundles Learning notes

In the Web page, we often need to refer to a large number of JavaScript and CSS files, plus many JavaScript libraries contain the debug version and the compressed release version (such as jquery), not only the trouble is also easy to cause confusion, so the ASP. MVC4 introduced the bundles feature, which makes it easy to manage JavaScript and CSS files.

It turns out that we reference CSS and JavaScript files and we need a reference like this one:

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

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

Fortunately, we can now use the bundles feature:

1. public class Bundleconfig
2. {
3. public static void Registerbundles (Bundlecollection bundles)
4. {
5. Bundles. ADD (New Scriptbundle ("~/bundles/jquery")
6. . Include ("~/scripts/jquery-{version}.js"));
7. Bundles. ADD (New Scriptbundle ("~/bundles/jqueryui")
8. . Include ("~/scripts/jquery-ui-{version}.js"));
9. Bundles. ADD (New Scriptbundle ("~/bundles/jqueryval")
10. . Include ("~/scripts/jquery.unobtrusive*"
11. , "~/scripts/jquery.validate*"));
12. Bundles. ADD (New Stylebundle ("~/content/css")
13. . Include ("~/content/site.css"));
14. }
15. }

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

1. protected void Application_Start ()
2. {
3. Arearegistration.registerallareas ();
4. Webapiconfig.register (globalconfiguration.configuration);
5. Filterconfig.registerglobalfilters (globalfilters.filters);
6. Routeconfig.registerroutes (routetable.routes);
7. Bundleconfig.registerbundles (Bundletable.bundles);
8. }

In the above we can see that we have different files according to the function of the corresponding bundle (bundle is the meaning of the package), where the string parameter in the constructor is the name of the bundle, the include function is to include the parameter corresponding file into a bundle. It can be found that for the jquery library we used the name ~/scripts/jquery-{version}.js, where {version} section represents the meaning of the version number, and MVC will look for us in the Scripts file for the corresponding " 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* name, * is a wildcard character, which means that all files prefixed with jquery.validate in the Scripts folder will be included in the same bundle.

Finally, we can use bundles on the view instead of the original reference:

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

ASP. NET MVC Bundles Learning notes