ASP. NET MVC Bundles usage and description (packaged JavaScript and CSS)

This article mainly introduces the new features in ASP. Bundles, using bundles can compress JavaScript and CSS files, and can distinguish between debugging and non-debugging, debugging without compression, in the original way to display, to facilitate the search for problems.

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 classBundleconfig2 {3      Public Static voidregisterbundles (bundlecollection bundles)4     {5Bundles. ADD (NewScriptbundle ("~/bundles/jquery")6. Include ("~/scripts/jquery-{version}.js"));7Bundles. ADD (NewScriptbundle ("~/bundles/jqueryui")8. Include ("~/scripts/jquery-ui-{version}.js"));9Bundles. ADD (NewScriptbundle ("~/bundles/jqueryval")Ten. Include ("~/scripts/jquery.unobtrusive*" One,"~/scripts/jquery.validate*")); ABundles. ADD (NewStylebundle ("~/content/css") -. Include ("~/content/site.css")); -     } the}

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")

Reprinted from Http://www.jb51.net/article/82174.htm

Tuohaibei

ASP. NET MVC Bundles usage and description (packaged JavaScript and CSS)