ASP.NET MVC4之js css文件合并功能(3)

2024-09-27 23:24:14

MVC4增加了一些新功能，接下来，我们来研究下MVC4中的新增功能，我们在新建一个MVC4项目的时候，会发现在项目下多出了一个App_Start文件夹，文件夹下面有4个文件，BundleConfig.cs，FilterConfig.cs，RouteConfig.cs，WebApiConfig.cs，其中BundleConfig.cs文件就是我们这一节要讲的的文件。
众所周知，浏览器在向服务器发送请求的时候，请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求，去除文件中的一些注释，空白，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。
1.定义分组
创建MVC4项目后，我们会在global.asax文件中的Application_Start()方法中看到如下代码，起到注册作用
BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleConfig.cs代码：

public class BundleConfig
 {
  // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
  public static void RegisterBundles(BundleCollection bundles)
  {
   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js")); 

   bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
      "~/Scripts/jquery-ui-{version}.js")); 

   bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
      "~/Scripts/jquery.unobtrusive*",
      "~/Scripts/jquery.validate*")); 

   // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
   // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
   bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
      "~/Scripts/modernizr-*")); 

   bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css",
      "~/Content/themes/base/jquery.ui.resizable.css",
      "~/Content/themes/base/jquery.ui.selectable.css",
      "~/Content/themes/base/jquery.ui.accordion.css",
      "~/Content/themes/base/jquery.ui.autocomplete.css",
      "~/Content/themes/base/jquery.ui.button.css",
      "~/Content/themes/base/jquery.ui.dialog.css",
      "~/Content/themes/base/jquery.ui.slider.css",
      "~/Content/themes/base/jquery.ui.tabs.css",
      "~/Content/themes/base/jquery.ui.datepicker.css",
      "~/Content/themes/base/jquery.ui.progressbar.css",
      "~/Content/themes/base/jquery.ui.theme.css"));
  }
 }

BundleCollection是一个集合，用于将绑定规则添加到集合中，使用Add方法.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
new ScriptBundle("~/bundles/jquery")定义一个分组名称，Include表示这个分组下具体包括的文件。
version参数代表版本号 ,*代表所有，这两个是可以理解为通配符。
以上代码表示创建一个~/bundles/jquery分组，该分组指向的文件为scripts文件夹下的jquery-1.7.1.js文件。
如果scripts文件夹下有jquery-1.7.1.js，jquery-1.6.1.js，则会指向这两个文件。

同样，bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));表示创建了一个~/Content/css分组，指向~/Content/site.css文件.

2.使用分组
分组已经定义好，我们接下演示怎样使用。
如果在页面中使用scripts，可以使用@Scripts.Render("~/bundles/jquery")方法，参数为分组名称
如果在页面中使用css,可以使用@Styles.Render("~/Content/css")方法，参数为分组名称.
可以看下VIEWS文件夹下的Shard文件夹的_Layout.cshtml文件

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
</head>
<body>
 @RenderBody() 

 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</body>
</html>

运行项目后，可以查看页面源代码，效果如下

3.合并请求
接下来我们通过分组将请求多个文件合并成请求一个，可以使用如下两种方法来实现
1).将web.config中的编译调试debug设为false <compilation debug="false" targetFramework="4.5"/>
2).在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true;
再次运行页面，可以看到生成如下代码
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
?前面是分组名称，后面是多个文件合并后生成的哈希码

4.对比效果
我们在火狐下用firebug查看合并前后的对比效果，可以对比下请求的文件大小，时间等方面的差别还是挺大的
压缩合并前：

压缩合并后:

注:默认情况下 BundleTable.Bundles会过滤掉后缀名为这些的文件,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,
当加载后缀名为这些的文件，将显示空白。
可以用如下方法去除对这些文件过滤限制

BundleTable.Bundles.IgnoreList.Clear();
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);

我们通过分组将请求多个文件合并成请求一个，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度。希望通过本文可以帮助大家更好的优化网站。

asp.net 合并GridView中某列相同信息的行（单元格）

解决方法如下(写在公共模块里,定义为静态方法方便调用): 复制代码代码如下: /// <summary> /// 合并GridView中某列相同信息的行(单元格) /// </summary> /// <param name="GridView1">GridView</param> /// <param name="cellNum"
asp.net中让Repeater和GridView支持DataPager分页

改造办法是自己写一个控件,让它继承GridView或Repeater,并实现IPageableItemContainer 接口.下面要发的是国外某高手写的代码,测试有效.具体使用的时候,要建一个类库项目,把代码编译成dll后,就可以添加到VS的工具箱里了! 一.自定义Repeater 复制代码代码如下: using System.Web.UI; using System.Web.UI.WebControls; namespace WYJ.Web.Controls { /// <summary>
repeater、gridview 在绑定时判断判断显示不同的行样式或文本

一:repeater或DataList控件 1.更改纯文本内容等如果数据库里学生信息表中的sex字段用0和1来表示男女但我们想repeat控件绑定后性别显示男或女而不是显示0或1 方法一:当然我们可以在SQL语句里判断并且转换 select (case sex when 0 then '男' else '女' end) AS sex from studentInfo 方法二:就是用到repeat 控件ItemDataBound()事件前台复制代码代码如下: <asp:Repearter
asp.net中rdlc 合并行的方法

最终效果: 要合并内容行,我想是不可能的,我上网找了N久,也没找到,囧~ 后来经过自己的短暂思考,终于想到另一种合并了,:-) 实现方法很简单,就是在报表属性的代码里加上以下这段代码: 复制代码代码如下: Function GetRemark(rowNum As Integer, remark As String) As String Dim cutLength As Integer = 10 Return Mid(remark, cutLength * (rowNum - 1) + 1, c
Asp.net_Table控件の单元格纵向合并示例

业务需要,动态生成表,同一列中数据相同的单元格需要合并. 解决方案,创建Table控件处理类,代码如下: 复制代码代码如下: /// <summary>表格控件相关操作类 /// </summary> public static class aspTable { /// <summary>合并行 /// </summary> /// <remarks>版权信息:http://www.qqextra.com,http://t.qq.com/ls_
ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤

GridView,ASP.NET中很常用的数据显示控件,这里,我将用这个控件来实现课程表的显示.首先说说课程表的显示与普通记录的显示有何不同?这里所说的普通记录是指直接从数据库中查询出来的.没有经过任何处理的记录.通常,我们用GridView显示这些普通记录,只需直接将这些记录表绑定到GridView中即可.但是,课程表的显示可不是这么简单,它需要将普通记录继续加工,需要根据记录中具体的数据来确定数据需要显示在哪一行.哪一列,而且需要根据课程开始时间和结束时间动态合并单元格,最后才是数据的显示.
ASP.NET中GridView和Repeater重复数据如何合并

这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下GridView 和 Repeater 关于重复数据合并的方法. 效果图如下 : GridView : 前台代码 : <div> <asp:GridView ID="gvIncome" runat="server" AutoGenerateColumns="False"> <Columns> <asp:TemplateFi
datalist,Repeater和Gridview的区别分析

griview优点:功能最强大,提供分页,编辑,删除,选择等等很多功能,使用最方便,直接拖拽到页面上,建立新的数据源,点几下鼠标就可以维护一个表的浏览.删除和修改了,而且是分页的哦.(增加我还没搞明白怎么能点几下鼠标就实现,如果您知道请告诉我.).而且因为模板已经定制好,想自己灵活控制,不太容易. 缺点:占用系统资源大,他的分页是把整个表的数据取出来,到gridview上分页的,因此如果数据量比较大的时候,速度非常非常慢.效率极低. datalist比较好控制样式..没有自带的分页..编辑等..
asp.net中GridView和DataGrid相同列合并实现代码

(一)普通列复制代码代码如下: /// <summary> /// Gridview列的合并(普通列,不包含模板列) /// 注意:1.GridView在绑定的时候进行分组和排序,才能让相同的行放在一起 /// 2.方法应用的时机,应该在Gridview的DataBound事件中使用 /// </summary> /// <param name="gv">需要合并的GridView对象</param> /// <param na
Asp.net程序优化js、css实现合并与压缩的方法

本文实例讲述了Asp.net程序优化js.css实现合并与压缩的方法.分享给大家供大家参考.具体实现方法如下: 访问时将js和css压缩并且缓存在客户端, 采用的是Yahoo.Yui.Compressor组件来完成的,用户可以点击此处本站下载. 创建一个IHttpHandler来处理文件复制代码代码如下: public class CombineFiles : IHttpHandler { private const string CacheKeyFormat = "_Cac

ASP.NET MVC4之js css文件合并功能(3)

相关推荐

随机推荐