Bundle 配置


本文仅适用于 Asp.Net MVC

  在 Asp.Net MVC 中引入了 Bundle 技术,即将 css / js 资源文件进行压缩打包,在页面上仅生成一个引用。它默认是在 App_StartBundleConfig.cs 文件里进行配置的,但是这样不能在运行期间去调整文件及版本。因此 Fireasy 提供了配置,可以将 css / js 文件配置到 web.config 配置文件中。如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息,请访问
  https://go.microsoft.com/fwlink/?LinkId=301880
  -->
<configuration>
  <configSections>
    <sectionGroup name="fireasy">
      <sectionGroup name="mvc">
        <section name="bundles" type="Fireasy.Web.Mvc.Configuration.BundleGroupConfigurationSectionHandler, Fireasy.Web.Mvc" />
      </sectionGroup>
    </sectionGroup>
  </configSections>
  <fireasy>
    <mvc>
      <!-- 配置bundle组 -->
      <bundles enableOptimization="false">
        <bundle name="base">
          <script>~/scripts/jquery-1.12.4.min.js</script>
          <script>~/scripts/jquery.easyui-1.4.3.min.js</script>
          <script>~/scripts/locale/easyui-lang-zh_CN.js</script>
          <script>~/scripts/jquery.easyui.patch.js</script>
          <script>~/scripts/jquery.easyui.extend.js</script>
          <script>~/scripts/lhgdialog.js</script>
          <script>~/scripts/common.js</script>
          <style>~/content/themes/bootstrap/easyui.css</style>
          <style>~/content/skins/flat.css</style>
          <style>~/content/main.css</style>
          <style>~/content/easyui-big.css</style>
          <style>~/content/easyui-icon.css</style>
          <style>~/content/font-awesome.min.css</style>
          <style>~/content/png-icons.css</style>
          <script>~/scripts/jquery.unobtrusive-ajax.js</script>
        </bundle>
        <bundle name="verifycode">
          <script>~/scripts/jquery.verifycode.min.js</script>
        </bundle>
        <bundle name="upload">
          <script>~/scripts/jquery.uploader.min.js</script>
        </bundle>
        <bundle name="chart">
          <script>~/scripts/highcharts.js</script>
          <script>~/scripts/highcharts-exporting.js</script>
          <script>~/scripts/highcharts-more.js</script>
        </bundle>
        <bundle name="bootstrap">
          <style>~/content/bootstrap.min.css</style>
        </bundle>
        <bundle name="font">
          <style>~/content/font-awesome.min.css</style>
        </bundle>
        <bundle name="fancybox">
          <script>~/scripts/jquery.fancybox.js</script>
          <script>~/scripts/jquery.fancybox.pack.js</script>
          <style>~/content/jquery.fancybox.css</style>
        </bundle>
        <bundle name="dim">
          <script>~/scripts/dim.form.js</script>
        </bundle>
      </bundles>
    </mvc>
  </fireasy>
</configuration>

  然后在 Global.cs 中调用 BundleManager 类的 Config 方法,如下所示:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        
        //BundleConfig.RegisterBundles(BundleTable.Bundles);

        BundleManager.Config();
    }
}

  在视图中,可以使用 Render 方法输出 Bundle 组。如下所示(razor 视图):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @Fireasy.Web.Mvc.BundleManager.Render("base")
</head>
<body>
    <form id="form1">
        @RenderBody()
    </form>
</body>
</html>