分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

MVC中Bundle的使用

发布时间:2023-09-06 02:11责任编辑:沈小雨关键词:MVC

1、BundleConfig配置

(1)StyleBundle中的参数,即为cshtml中需要调用的虚拟路径名称。

(2)Include包含路径,可以包含一个或多个css或js文件。即包含一组文件。

 ???public class BundleConfig ???{ ???????public static void RegisterBundles(BundleCollection bundles) ???????{ ???????????//bundles.Add(new ScriptBundle("~/bundles/common").Include( ???????????// ?????"~/Scripts/common.js")); ???????????bundles.Add(new ScriptBundle("~/bundles/home").Include( ??????????????????????"~/Scripts/home.js")); ???????????//easyui ???????????bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/default/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/default/easyui.css")); ???????????bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/gray/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/gray/easyui.css")); ???????????bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/easyui.css")); ???????????bundles.Add(new StyleBundle("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/css").Include("~/Scripts/jquery-easyui-1.5.5.7/themes/metro/tree.css")); ???????????// 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好 ???????????// 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 ???????????bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( ???????????????????????"~/Scripts/modernizr-*")); ???????????bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css")); ???????} ???}
View Code

一个Bundle包含多个文件示例:

2、Global.asax配置

 ???public class MvcApplication : System.Web.HttpApplication ???{ ???????protected void Application_Start() ???????{ ???????????AreaRegistration.RegisterAllAreas(); ???????????RouteConfig.RegisterRoutes(RouteTable.Routes); ???????????//启用jscss压缩 ???????????BundleTable.EnableOptimizations = true; ???????????BundleConfig.RegisterBundles(BundleTable.Bundles); ???????????????????} ???}
View Code

第一步, 启用jscss压缩。

第二步,加载Bundle配置。

 3、cshtml中的使用。

<head> ???<meta name="viewport" content="width=device-width" /> ???<title>Index</title> ???<script src="~/Scripts/jquery-easyui-1.5.5.7/jquery.min.js"></script> ???<script src="~/Scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script> ???@Styles.Render("~/Content/css") ???@Styles.Render("~/Scripts/jquery-easyui-1.5.5.7/themes/default/css") ???@Scripts.Render("~/bundles/home")</head>

4、生成的页面代码

<head> ???<meta name="viewport" content="width=device-width" /> ???<title>Index</title> ???<script src="/Scripts/jquery-easyui-1.5.5.7/jquery.min.js"></script> ???<script src="/Scripts/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script> ???<link href="/Content/css?v=mpciHVE84rPIWYZzgLErA-nBXPONYU0Sn0Is2YbG6Ng1" rel="stylesheet"/> ???<link href="/Scripts/jquery-easyui-1.5.5.7/themes/default/css?v=84FaSCtYfIH4azFlRKfYjKoxVT2uXZ5HOs4N1AVXMx01" rel="stylesheet"/> ???<script src="/bundles/home?v=gDJGC1b9-5ftvwRmjbv95JsnYhDZ0xguyL0N3IwalY01"></script></head>

MVC中Bundle的使用

原文地址:https://www.cnblogs.com/masonblog/p/9532977.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved