(转)基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
http://www.cnblogs.com/wuhuacong/p/4073203.html
在Web开发的时候,我们很多时候,需要引用很多CSS文件、JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象,用来简化页面代码非常方便,本文主要介绍在我的MVC框架里面,如何使用bundles来简化页面的代码的。
1、常规的页面代码
我们知道,随着使用更多的一些效果,我们可能不断引入一些新的JS和CSS文件,已达到Web界面更好的表现效果。这样也就逐步增加了文件代码的行数,造成相对比较臃肿的场景,如下面的我正常使用的Web界面,头部需要引入很多JS和CSS文件。
@*添加Jquery EasyUI的样式*@
<link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="~/Content/themes/Default/style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/themes/Default/default.css" rel="stylesheet" type="text/css" /> @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@
<script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
<script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script> @*日期格式的引用*@
<script src="~/Content/datapattern.js"></script> <!--引用EasyUI扩展-->
<link href="~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css" rel="stylesheet" />
<link href="~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css" rel="stylesheet" />
<script src="~/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js"></script> @*引用提示控件*@
<link rel="stylesheet" type="text/css" href="~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js"></script> @*常用的一些组件业务脚本函数*@
<script type="text/javascript" src="~/Scripts/ComponentUtil.js"></script>
然后这样的文件总是在不断的复制做,非常不雅观,维护也不方便。
在ASP.NET MVC出来之后,引入了一个叫做Bundle的东西,它用来将js和css文件捆绑为一个块进行输出,能够极大简化界面代码,并默认对这些内容进行压缩处理,提高效率。
最终简化的界面代码如下所示。
@using System.Web.Optimization;
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquerytools")
@Styles.Render("~/Content/jquerytools")
2、使用bundles优化的界面操作
为了实现上面的效果,我们需要进行几步的操作处理。
在App_Start里面的BundleConfig里面增加几行处理代码,如下所示。
public class BundleConfig
{
// 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
//为了减少太多的Bundles命名,定义的CSS的Bundle为:"~/Content/css"、"~/Content/jquerytools"
//定义的Script的Bundles为:"~/bundles/jquery"、"~/bundles/jquerytools" //Jquery必备的StyleBundle和ScriptBundle
StyleBundle css = new StyleBundle("~/Content/css");
ScriptBundle jquery = new ScriptBundle("~/bundles/jquery"); //添加Jquery EasyUI的样式
css.Include("~/Content/JqueryEasyUI/themes/default/easyui.css",
"~/Content/JqueryEasyUI/themes/icon.css",
"~/Content/themes/Default/style.css",
"~/Content/themes/Default/default.css"); //添加Jquery,EasyUI和easyUI的语言包的JS文件,日期格式的引用
jquery.Include("~/Content/JqueryEasyUI/jquery.min.js",
"~/Content/JqueryEasyUI/jquery.easyui.min.js",
"~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js",
"~/Content/datapattern.js"); //常用的一些组件业务脚本函数(建议放到最后)
jquery.Include("~/Scripts/ComponentUtil.js"); //扩展的StyleBundle和ScriptBundle
StyleBundle cssExtend = new StyleBundle("~/Content/jquerytools");
ScriptBundle jqueryExtend = new ScriptBundle("~/bundles/jquerytools"); //引用EasyUI扩展
cssExtend.Include("~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css",
"~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css");
jqueryExtend.Include("~/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js"); //引用消息提示控件
cssExtend.Include("~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css");
jqueryExtend.Include("~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js"); //其他一些辅助脚本和样式 //全部增加到集合里面去
bundles.Add(css);
bundles.Add(jquery);
bundles.Add(cssExtend);
bundles.Add(jqueryExtend);
}
}
上面代码,我们增加一些必要的Jquery和一些扩展给的JqueryTool的脚本和样式,方便统一化管理。
默认的情况下,Bundle是按照字母顺序进行排序的,如果需要按照增加的次序进行排序,这需要写一个自定义的排序规则进行处理,如下所示
/// <summary>
/// 自定义Bundles排序
/// </summary>
internal class AsIsBundleOrderer : IBundleOrderer
{
public virtual IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
return files;
}
}
然后在调用的时候,修改对象的排序规则即可。
ScriptBundle jqueryExtend = new ScriptBundle("~/bundles/jquerytools");
jqueryExtend.Orderer = new AsIsBundleOrderer();
接着在Global.asa.cs里面,增加对Bundle的注册,如下所示。
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
BundleConfig.RegisterBundles(BundleTable.Bundles); WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
最后在MVC的视图里面,就可以使用Bundle来简化界面代码了。简化后的界面代码如下所示。
<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
<meta name="viewport" content="width=device-width" />
@using System.Web.Optimization;
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquerytools")
@Styles.Render("~/Content/jquerytools") ...............
运行界面,虽然使用了简化版本的代码,依旧正常运行
页面代码输出则还是和原先未优化的一致。
<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
<meta name="viewport" content="width=device-width" />
<script src="/Content/JqueryEasyUI/jquery.min.js"></script>
<script src="/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
<script src="/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
<script src="/Content/datapattern.js"></script>
<script src="/Scripts/ComponentUtil.js"></script> <link href="/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet"/>
<link href="/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet"/>
<link href="/Content/themes/Default/style.css" rel="stylesheet"/>
<link href="/Content/themes/Default/default.css" rel="stylesheet"/> <script src="/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js"></script>
<script src="/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js"></script> <link href="/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css" rel="stylesheet"/>
<link href="/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css" rel="stylesheet"/>
<link href="/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css" rel="stylesheet"/>
(转)基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码的更多相关文章
- 基于MVC4+EasyUI的Web开发框架经验总结
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图 标,从而是Web系统 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象, ...
- 基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...
- 基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作
我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动
为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
随机推荐
- 敏捷开发系列学习总结(5)——这几招搞定团队协同Coding
一个团队在一起Coding时,就怕发生这样的事情:同1个文件你改了,我也改了,他也改了,最后怎么同步呢?以前用clearcase时,A把文件checkout了,其他人就不能提交,保证了代码的唯一性.但 ...
- 洛谷 P2486 BZOJ 2243 [SDOI2011]染色
题目描述 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“112221” ...
- Ubuntu镜像包版本差异
自接触Linux以来,一直使用ubuntu,下载ubuntu镜像的过程中,一个问题一直困扰我--desktop版镜像和server版镜像究竟有什么区别?难道就GUI有无的区别? 今天尝试解答这个问题. ...
- [cf 599D] Spongebob and Squares
据题意: $K=\sum\limits_{i=0}^{n-1}(n-i)*(m-i)$ $K=n^2m-(n+m)\sum{i}+\sum{i^2}$ 展开化简 $m=(6k-n+n^3)/(3n^2 ...
- PatentTips - Fair scalable reader-writer mutual exclusion
BACKGROUND The present invention relates generally to multithreaded programming and, more specifical ...
- 洛谷 P1491 集合位置
P1491 集合位置 题目描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的 ...
- cogs 29. 公路建设
29. 公路建设 ★ 输入文件:road.in 输出文件:road.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] A 国是一个新兴的国家,有 N 个城市,分别 ...
- Spring MVC-处理程序映射(Handler Mapping)-简单的Url处理程序映射(Simple Url Handler Mapping)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_simpleurlhandlermapping.htm 说明:示例基于Spring ...
- 读书笔记-HBase in Action-第一部分 HBase fundamentals
新项目准备上HBase.HBase眼下由组里某牛负责.本着学会使用HBase的目标,先阅读下HBase in Action,一共十章组织成三部分,须要学习的内容包含HBase基本实现原理,用法,Sch ...
- 【Nginx】模块化设计
高度模块化的设计是Nginx的架构基础.全部模块都是以ngx_module_t结构体表示,该结构体内部定义了7个回调方法.它们负责模块的初始化和退出.commands成员是一个包括有ngx_comma ...