(转)基于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,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
随机推荐
- random随机库
random库是用于产生并运用随机数的标准库 主要包含的有9个随机函数,分别是: seed(), random(), randint(), getrandbits(), randrange(), un ...
- redis学习三,Redis主从复制和哨兵模式
Redis主从复制 java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 1.Master可以拥有多个slave 2.多个slave可以连接同一个Master外,还可以连接到其他的slav ...
- Anton and Permutation
Anton and Permutation time limit per test 4 seconds memory limit per test 512 megabytes input standa ...
- 让我们加密吧Let's encrypt
前言 如今的互联网越来越不安全,我们每个人的信息以及隐私不断被暴露,地下黑产盛行,经常收到垃圾短信,经常被陌生人的电话骚扰.我们的个人信息是怎么泄漏的呢?各种爬虫无时无刻不在互联网爬取着信息,各种嗅探 ...
- data guard 的redo 传输
data guard 通过把redo从primary数据库传输到standby数据库并应用在standby数据库来实现自己的功能. redo 传输是有2种模式 1. 同步 sync 2. 异步 asy ...
- UITextView上加入默认文字
1. 实现UITextView的代理方法 text.view.delegate = self; 2. 在UITextView上覆盖UILabel ps:必须实现 label.enabled = NO; ...
- linux c编程訪问数据库
源代码例如以下: #include <stdio.h> #include <stdlib.h> #include <mysql/mysql.h> int main( ...
- php登录验证及代码实现 含数据库设计 亲測有效
深夜调代码 试过无数种方法最终见了成效 login.php内容例如以下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
- Winform设计-小百货 涵盖基础插件学习(适合新手)
Winform设计-小百货 涵盖基础插件学习(适合新手) 第一次写winform,主要是为了加快对 事件的 理解. 代码如下: private void Form1_Load(object se ...
- hihocoder 1680 hiho字符串2 dp求方案数+递归
我们定义第一代hiho字符串是"hiho". 第N代hiho字符串是由第N-1代hiho字符串变化得到,规则是: h -> hio i -> hi o -> ho ...