ASP. net mvc Bundles usage and description (pack javascript and css), mvcbundles

ASP. net mvc Bundles usage and description (pack javascript and css), mvcbundles

This article mainly introduces ASP. the new function Bundles in. net mvc can be used to package and compress javascript and css files. It can distinguish between debugging and non-debugging. It is not compressed during debugging and displayed in the original mode, to locate problems.

In web pages, we often need to reference a large number of javascript and css files. In addition, many javascript libraries contain debug and compressed release versions (such as jquery ), it is not only troublesome but also confusing, so ASP. NET MVC4 introduces the Bundles feature so that we can easily manage javascript and css files.

We used to reference css and javascript files one by 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 you need to reference a small number of files, but every page needs to reference a large number of files, it will cause great inconvenience. When we want to replace a referenced file, it will waste a lot of time. At release, you also need to replace some libraries with the release version, such as the jquery-1.8.2.js corresponding to the above jquery-1.8.2.min.js

Fortunately, now we can 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 }

Then, call the BundleConfig. RegisterBundles method 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 }

As we can see above, different files are divided into corresponding Bundle (Bundle is the meaning of the package) according to different functions. The string parameter in the constructor is the name of the Bundle, the Include function contains the file corresponding to the parameter into a Bundle. We can see that we use this name for the jquery library ~ /Scripts/jquery-{version }. js. The {version} part indicates the version number. MVC will search for the corresponding "jquery-version number" in the Scripts file. js "file, and in non-debug mode, MVC uses the" jquery-version number. min. js "file.

We also see that we use this name ~ The name of/Scripts/jquery. validate *. * is a wildcard. This means that all files prefixed with jquery. validate In the Scripts folder will be included in the same Bundle.

Finally, we can use Bundle on the View to replace the original reference method:

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

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

By tuohaibei