1. Bundleconfig Configuration
(1) The parameter in Stylebundle, which is the name of the virtual path that needs to be called in cshtml.
(2) Include contains a path that can contain one or more CSS or JS files. that contains a set of files.
Public classBundleconfig { Public Static voidregisterbundles (bundlecollection bundles) {//bundles. ADD (New Scriptbundle ("~/bundles/common"). Include (//"~/scripts/common.js"));bundles. ADD (NewScriptbundle ("~/bundles/home"). Include ("~/scripts/home.js")); //EasyuiBundles. ADD (NewStylebundle ("~/scripts/jquery-easyui-1.5.5.7/themes/default/css"). Include ("~/scripts/jquery-easyui-1.5.5.7/themes/default/easyui.css")); Bundles. ADD (NewStylebundle ("~/scripts/jquery-easyui-1.5.5.7/themes/gray/css"). Include ("~/scripts/jquery-easyui-1.5.5.7/themes/gray/easyui.css")); Bundles. ADD (NewStylebundle ("~/scripts/jquery-easyui-1.5.5.7/themes/metro/css"). Include ("~/scripts/jquery-easyui-1.5.5.7/themes/metro/easyui.css")); Bundles. ADD (NewStylebundle ("~/scripts/jquery-easyui-1.5.5.7/themes/metro/css"). Include ("~/scripts/jquery-easyui-1.5.5.7/themes/metro/tree.css")); //Develop and understand information using the development version of MODERNIZR. And then, when you're done//when preparing your production, usehttp://modernizr.comto select only the tests that you want on the build tool. Bundles. ADD (NewScriptbundle ("~/bundles/modernizr"). Include ("~/scripts/modernizr-*")); Bundles. ADD (NewStylebundle ("~/content/css"). Include ("~/content/site.css")); } }
View Code
A bundle contains examples of multiple files:
2. Global.asax Configuration
Public class MvcApplication:System.Web.HttpApplication { protectedvoid Application_Start () { Arearegistration.registerallareas (); Routeconfig.registerroutes (routetable.routes); // Enable JSCSS compression true ; Bundleconfig.registerbundles (bundletable.bundles); } }
View Code
The first step is to enable JSCSS compression.
The second step is to load the bundle configuration.
3, the use of cshtml.
<Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>Index</title> <Scriptsrc= "~/scripts/jquery-easyui-1.5.5.7/jquery.min.js"></Script> <Scriptsrc= "~/scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></Script>@Styles. Render ("~/content/css") @Styles. Render ("~/scripts/jquery-easyui-1.5.5.7/themes/default/css") @Script S.render ("~/bundles/home")</Head>
4. Generated page code
<Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>Index</title> <Scriptsrc= "/scripts/jquery-easyui-1.5.5.7/jquery.min.js"></Script> <Scriptsrc= "/scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></Script> <Linkhref= "/content/css?v=mpcihve84rpiwyzzglera-nbxponyu0sn0is2ybg6ng1"rel= "stylesheet"/> <Linkhref= "/scripts/jquery-easyui-1.5.5.7/themes/default/css?v=84fasctyfih4azflrkfyjkoxvt2uxz5hos4n1avxmx01"rel= "stylesheet"/> <Scriptsrc= "/bundles/home?v=gdjgc1b9-5ftvwrmjbv95jsnyhdz0xguyl0n3iwaly01"></Script></Head>
The use of bundles in MVC