How to use bundle in asp.net MVC

Time:2021-5-14

In asp.net MVC, bundles are used to package and bundle resources (CSS and JS in general). Bundles are registered in the global file global.asax.cs, and the specific implementation of registration is in app by default_ Start folder in bundleconfig.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 bundles when the application is enabled

public class BundleConfig
{
 //For more information about binding, visit 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 modernism that you want to use for development and learning. And then, when you're done
  //Please use the http://modernizr.com  To select only the required tests.
  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"));
 }
}

For illustration, create a new action under homecontroller, as follows:


public ActionResult BundleTest()
{
 return View();
}

Here, take bootstrap as an example. In the view, @ styles. Render() and @ scripts. Render() are used to introduce CSS and JS. The parameter is the name registered in bundleconfig


@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

Browse the page, view the source code, you can see:


bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.css",
      "~/Content/site.css")); 

Since the above bundle is registered in bundleconfig.cs, ~ / content / bootstrap.css and ~ / content / site.css are introduced in @ styles.render (“~ / content / CSS”) rendering, and JS rendering is the same
In order to verify whether the CSS and JS resources of bootstrap are really introduced, some simple bootstrap sample codes are added here, as follows:

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <div>
  <div>
   <nav>
    <ul>
     < Li role = "presentation" > < A</a></li>
     About us</a></li>
     < Li role = "presentation" > < a (?) "> contact us</a></li>
    </ul>
   </nav>
  </div>
  <form>
   <div>
    < label for = "user name" > user name < / label >
    <div>
     < input type = text "placeholder = user name" >
    </div>
   </div>
   <div>
    < label for = "password" > password < / label >
    <div>
     < input type = password "placeholder = password" >
    </div>
   </div>
   <div>
    < label for = "code" > verification code < / label >
    <div>
     < input type = "text" placeholder = "verification code" >
    </div>
   </div>
   <div>
    <div>
     <div>
      <label>
       < input type = "checkbox" > remember me
      </label>
     </div>
    </div>
   </div>
   <div>
    <div>
     < button type = "submit" > login < / button >
    </div>
   </div>
  </form>
  <footer>
   <p>&copy; 2017 Zhong.</p>
  </footer>

 </div> <!-- /container -->
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

When the browser is large enough, it is horizontally tiled. If the browser is small enough, it is vertically tiled. The form part in the example is the best embodiment:

improvement

The above bundle introduces uncompressed CSS and JS resources, but in practical application, in order to reduce the server load and other reasons, it is necessary to introduce compressed version resources (generally, the uncompressed name is named after min, for example, the compressed version of jquery.js is jquery.min.js)
So change bundleconfig.cs

Recompile and browse the previous page again. At this time, it is found that the compressed version of resources (CSS / JS) has been 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 situations:

When viewing the source code on the page, it is found that the script lacks the introduction of ~ / scripts / bootstrap.min.js, which is the system.web.optimization.dll used by asp.net MVC 4. By default, the ignore rule *. Min.js is used. At this time, you can clear the ignore rule in the registerbundles of bundleconfig.cs

One of the solutions is to decompile system.web.optimization.dll combined with decompiled code, which can also be referred toThis link

In addition, it is found that it is invalid when deploying the production environment, because the production environment is no longer in debug mode

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.