Use of Bundle under ASP. net mvc, mvcbundle
ASP.. net mvc Bundle is used to package and Bundle resources (css and js). It is in the Global file. asax. register Bundle in cs, and the specific implementation of registration is the BundleConfig in the App_Start folder by default. cs
public class MvcApplication : System.Web.HttpApplication{ protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); }}
BundleConfig. RegisterBundles (BundleTable. Bundles); register Bundle when the application is enabled
Public class BundleConfig {// for binding details, visit the http://go.microsoft.com/fwlink? LinkId = 301862 public static void RegisterBundles (BundleCollection bundles) {bundles. Add (new ScriptBundle ("~ /Bundles/jquery "). Include ("~ /Scripts/jquery-{version}. js "); bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include ("~ /Scripts/jquery. validate * "); // use the development version of Modernizr to be used for development and learning. Then, when you are ready for production, use the build tool on the http://modernizr.com to select only the tests you need. Bundles. Add (new ScriptBundle ("~ /Bundles/modernizr "). Include ("~ /Scripts/modernizr-* "); bundles. Add (new ScriptBundle ("~ /Bundles/bootstrap "). Include ("~ /Scripts/bootstrap. js ","~ /Scripts/respond. js "); bundles. Add (new StyleBundle ("~ /Content/css "). Include ("~ /Content/bootstrap.css ","~ /Content/site.css "));}}
To facilitate the description, create an Action under HomeController as follows:
public ActionResult BundleTest(){ return View();}
Here we use Bootstrap as an example. In the view, use @ Styles. Render () and @ Scripts. Render () to introduce css and js. The parameter is the name registered in BundleConfig.
@{ Layout = null;}<!DOCTYPE html>
Browse the page and view the source code. You can see:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"));
Because the above Bundle is registered in BundleConfig. cs, @ Styles. Render ("~ /Content/css ") is introduced during rendering ~ /Content/bootstrap.css and ~ /Content/site.css, js rendering is the same
To verify whether the css and js resources of BootStrap are actually introduced, some simple BootStrap sample code is added here, as shown below:
@ {Layout = null ;}<! DOCTYPE html>
Front-end browsing to see the effect (when the browser is large enough, It is horizontally tiled. If the browser is scaled down, it is vertically tiled, and the form part in the example can be best reflected ):
Improvement
The Bundle above introduces uncompressed css and js resources, but in practical applications, in order to reduce server load and other reasons, resources of the compressed version need to be introduced (usually after the uncompressed name is added with min, such as jquery. the compressed version of js [some names are lite versions] Is jquery. min. js)
Modify BundleConfig. cs
Re-compile and browse the page again. Then we found that the compressed version of resources (css/js) were introduced)
Note: Because ASP. net mvc 5 (. Net Framework 4.5) is used in the example, asp.net mvc 4 in. net framework 4 may have the following situation:
When viewing the source code on the page, the script is missing ~ /Scripts/bootstrap. min. js. This is the System used by asp.net mvc 4. web. optimization. by default, the dll uses the ignore rule *. min. in this case, you can go to BundleConfig. clear ignore rules in RegisterBundles of cs
This solution is obtained by decompiling System. Web. Optimization. dll and using the decompiled code. You can also refer to this link.
In addition, it is found that the error is invalid when deploying the production environment, because the production environment is no longer in debug mode, you need to set it at this time:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
