This is also the part of this chapter focused on the description, first we can use VS2012RC to create a new MVC4.0 project, the version can be 4.0 or 4.5. In the Global.asax file code, we found that filters, routers, and bundles of stylesheets and scripts (Bundles) were moved to other pages, in the App_start folder in the root directory. The code is just a few simple lines, the code is as follows
usingSystem;usingSystem.Collections.Generic;usingSystem.Configuration;usingSystem.Data.Entity;usingSystem.Data.Entity.Infrastructure;usingSystem.Linq;usingsystem.web;usingSystem.Web.Http;usingSYSTEM.WEB.MVC;usingSystem.Web.Optimization;usingSystem.Web.Routing;namespacemvc4{//note:for instructions on enabling IIS6 or IIS7 Classic mode,//Visithttp://go.microsoft.com/?LinkId=9394801 Public classMvcApplication:System.Web.HttpApplication {protected voidApplication_Start () {arearegistration.registerallareas (); Filterconfig.registerglobalfilters (globalfilters.filters); Routeconfig.registerroutes (routetable.routes); Bundleconfig.registerbundles (Bundletable.bundles); } }}
And in the App_start directory 3 more files, they are Rilterconfig.cs,routeconfig.cs and BundleConfig.cs files respectively. In the beta version or write directly in the Global.asax file, from the name can know their respective functions, today we mainly understand the content and function of the BundleConfig.cs file.
In the BundleConfig.cs file, there are file paths for the scripts and style sheets used in the application, where wildcards can be used, as shown in the following code:
usingsystem.web;usingSystem.Web.Optimization;namespacemvc4{ Public classBundleconfig { Public Static voidregisterbundles (bundlecollection bundles) {bundles. ADD (NewScriptbundle ("~/bundles/jquery"). Include ("~/scripts/jquery-1.*")); Bundles. ADD (NewScriptbundle ("~/bundles/jqueryui"). Include ("~/scripts/jquery-ui*")); Bundles. ADD (NewScriptbundle ("~/bundles/jqueryval"). Include ("~/scripts/jquery.unobtrusive*", "~/scripts/jquery.validate*")); Bundles. ADD (NewScriptbundle ("~/bundles/modernizr"). Include ("~/scripts/modernizr-*")); Bundles. ADD (NewStylebundle ("~/content/css"). Include ("~/content/site.css")); Bundles. ADD (NewStylebundle ("~/content/themes/base/css"). Include ("~/content/themes/base/jquery.ui.core.css", "~/content/themes/base/jquery.ui.resizable.css", "~/content/themes/base/jquery.ui.selectable.css", "~/content/themes/base/jquery.ui.accordion.css", "~/content/themes/base/jquery.ui.autocomplete.css", "~/content/themes/base/jquery.ui.button.css", "~/content/themes/base/jquery.ui.dialog.css", "~/content/themes/base/jquery.ui.slider.css", "~/content/themes/base/jquery.ui.tabs.css", "~/content/themes/base/jquery.ui.datepicker.css", "~/content/themes/base/jquery.ui.progressbar.css", "~/content/themes/base/jquery.ui.theme.css")); } }}
These are all about bundles, and as you can see from the code, the bundle instance object (script and style) contains a virtual directory that can be introduced as a unique key when used in a page. Of course, when optimizing, this virtual directory will be presented in the foreground page, which will continue to be described later. Let's take a look at how they are used in the code, including the scripts and styles two classes in the System.Web.Optimization assembly, respectively, to render the script and style sheet in the bundle collection, with the following code:
@Styles. Render ("~/content/themes/base/css""~/content/css" ) @Scripts. Render ("~/bundles/modernizr")
As can be seen from the above, the introduction of two bundled style sheets and a script into the page, the introduction is to include all the files within the Include method, debugging to see the foreground HTML code to know. Another way to do this is to introduce an external file, such as a file in a CDN, such as Google and other API files.
Four: optimization of style sheets and scripts
This is actually included in the three, I am independent, the main feeling is that I think he is a good guy. Code is simple, but very applicable, do not know if you have used ajaxminify this east, can be compiled, compressed into the smallest content. But all are to use the command, but in MVC4.0 System.Web.Optimization already contain this east, they are jsminify and cssminify, do not underestimate these two classes, although the public method of two.
By using scripts and styles to introduce scripts and style sheets into a page, you can import scripts and stylesheets into the client without modifying any code, which can effectively increase the difficulty of jshack and reduce the size of the file. To achieve this, we only need to set a property in Bundletable to True, and the code is as follows:
usingSystem;usingSystem.Collections.Generic;usingSystem.Configuration;usingSystem.Data.Entity;usingSystem.Data.Entity.Infrastructure;usingSystem.Linq;usingsystem.web;usingSystem.Web.Http;usingSYSTEM.WEB.MVC;usingSystem.Web.Optimization;usingSystem.Web.Routing;namespacemvc4{//note:for instructions on enabling IIS6 or IIS7 Classic mode,//Visithttp://go.microsoft.com/?LinkId=9394801 Public classMvcApplication:System.Web.HttpApplication {protected voidApplication_Start () {arearegistration.registerallareas (); Filterconfig.registerglobalfilters (globalfilters.filters); Routeconfig.registerroutes (routetable.routes); Bundletable.enableoptimizations=true; Bundleconfig.registerbundles (Bundletable.bundles); } }}
System.Web.Optimization actions on scripts and style sheets