System.Web.Optimization actions on scripts and style sheets

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.