在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里面扩大几行处理代码,如下所示。

图片 1

    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")

...............

 

运作界面,即便使用了简化版本的代码,照旧正常运行

图片 2 

页面代码输出则依旧和原来未优化的一律。

<!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开发框架的千家万户小说:

依据MVC4+EasyUI的Web开发框架形成之旅–总体介绍

依据MVC4+EasyUI的Web开发框架形成之旅–MVC控制器的规划

基于MVC4+EasyUI的Web开发框架形成之旅–界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的选取

依照MVC4+EasyUI的Web开发框架形成之旅–框架总体界面介绍

依照MVC4+EasyUI的Web开发框架形成之旅–基类控制器CRUD的操作

据悉MVC4+EasyUI的Web开发框架形成之旅–权限决定

基于MVC4+EasyUI的Web开发框架经验总括(1)-利用jQuery Tags Input
插件显示选择记录

依照MVC4+EasyUI的Web开发框架经验计算(2)-
使用EasyUI的树控件打造Web界面

依照MVC4+EasyUI的Web开发框架经验统计(3)-
使用Json实体类创设菜单数据

据悉MVC4+EasyUI的Web开发框架经验统计(4)–使用图表控件Highcharts

据悉MVC4+EasyUI的Web开发框架经验总括(5)–使用HTML编辑控件CKEditor和CKFinder

基于MVC4+EasyUI的Web开发框架经验总括(6)–在页面中接纳下拉列表的处理

依照MVC4+EasyUI的Web开发框架经验计算(7)–达成省份、城市、行政区三者联动

依据MVC4+EasyUI的Web开发框架经验总括(8)–落成Office文档的预览

根据MVC4+EasyUI的Web开发框架经验总计(9)–在Datagrid里面达成外键字段的转义操作

据悉MVC4+EasyUI的Web开发框架经验总计(10)–在Web界面上完毕多少的导入和导出

据悉MVC4+EasyUI的Web开发框架经验总计(11)–使用Bundles处理简化页面代码

基于MVC4+EasyUI的Web开发框架经验总括(12)–利用Jquery处理多少交互的三种方法

基于MVC4+EasyUI的Web开发框架经验计算(13)–DataGrid控件完毕全自动适应宽带中度

基于MVC4+EasyUI的Web开发框架经验总计(14)–自动生成图标样式文件和图标的挑三拣四操作

相关文章

网站地图xml地图