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>