ASP.NET4.5 BundleTable.Bundles捆绑教程[阿旭版]

最新推荐文章于 2024-05-06 16:10:26 发布

akeja44680

最新推荐文章于 2024-05-06 16:10:26 发布

阅读量172

点赞数

文章标签：后端 xhtml ui

原文链接：http://www.cnblogs.com/a-xu/archive/2012/04/10/aspnet_BundleTable.html

版权

本文目录

什么是ASP.NET捆绑技术
ASP.NET自定义捆绑实例
示例解析
自动捆绑实现
示例源码下载

什么是ASP.NET捆绑技术?

ASP.NET捆绑是ASP.NET 4.5的新功能，是System.Web.Optimization命名空间下的类页员实现。他提供了一些ASP.NET运行性能方面的优化，比如，一个页面可能有很多CSS/JS/图片,通过灵活的应用BundleTable类，他可以帮你将文件合并压缩代码优化成一个最理想的文件，然后输出到客户端，从而提高了浏览器下载速度。

在MVC4.0 Beta版本中，默认使用了捆绑技术，在示例“Internet Application”模板项目中，Global.asax中“undleTable.Bundles.RegisterTemplateBundles()”，这句代码虽然不灵活，但说明了微软开发团队想说的问题是，默认的态度推荐使用自定义捆绑，而非自动捆绑模式。

ASP.NET自定义捆绑实例

/Global.asax文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Optimization;

namespace jsm.WebOptimizationCase
{
    public class Global : System.Web.HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
            Bundle bundle = new Bundle("~/bluecss", new CssMinify());
            bundle.AddDirectory("~/Styles", "global*.css", false, false);
            bundle.AddDirectory("~/Styles", "blue.css", false, true);
            BundleTable.Bundles.Add(bundle);
            bundle = new Bundle("~/redcss", new CssMinify());
            bundle.AddDirectory("~/Styles", "global*.css", false, false);
            bundle.AddDirectory("~/Styles", "red.css", false, true);
            BundleTable.Bundles.Add(bundle);
        }
    }
}

/Case1.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="case1.aspx.cs" Inherits="jsm.WebOptimizationCase.case1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> - JSM</title>
<%
    if (isred)
    {
%>
    <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/redcss") %>" rel="stylesheet" type="text/css" />
<%
    }
    else
    {
%>
      <link href="<%=System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bluecss") %>" rel="stylesheet" type="text/css" />
<%
    }
%>
</head>
<body>
<form runat="server" id="f1">
<div class="head"><h1>JSM ASP.NET 4.5 Web Optimizer Demo</h1></div>
<div class="body">
abc<br />
abc<br />
abc<br />
abc<br />
abc<br />
abc<br />
<div>
<asp:Button runat="server" ID="btn1" Text="Red Theme" /> &nbsp;<asp:Button runat="server" ID="btn2" Text="blue Theme" />

</div>

</div>
<div class="footer">&copy;Copyright 2012 www.jishu.me</div>
</form>
</body>
</html>

/case1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace jsm.WebOptimizationCase
{
    public partial class case1 : System.Web.UI.Page
    {
        public bool isred = true;
        protected override void OnInit(EventArgs e)
        {
            btn1.Click += new EventHandler(btn1_Click);
            btn2.Click += new EventHandler(btn2_Click);
            base.OnInit(e);
        }

        void btn2_Click(object sender, EventArgs e)
        {
            //blue
            isred = false;
        }

        void btn1_Click(object sender, EventArgs e)
        {
            //red
            isred = true;
        }
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

/Styles/global.css

body{margin:0px;font-size:14px;} ul{list-style-type:none;margin:0px;padding:0px;}

/Styles/global2.css

h1{font-size:20px;font-family:'微软雅黑';}

/Styles/red.css

body{background:yellow;} h1{color:Red;}

/Styles/blue.css

body{background:blue;color:#fff;}

示例解析

示例的目是为了实现CSS文件的组合压缩，从而达到优化的目的。在Global.asax中指定了两个界面风格主题，蓝色主题和红色主题，蓝色使用global.css和global2.css、blue.css组合实现。红色主题由global.css和global2.css、red.css组合实现。在客户端浏览发现，红色主题的CSS的Url为“/redcss?v=5onyaQIYWKcHBwZmCCv816K53VeMHta5p4o47goqaX41”，并且请示为一下代码段：

body{margin:0;font-size:14px}ul{list-style-type:none;margin:0;padding:0}h1{font-size:20px;font-family:'微软雅黑'}body{background:#ff0}h1{color:red}

由此可见，程序将redcss组的global.css和global2.css、red.css文件内容组合，并去除了无效字符，从而节省了流量和解析速度。

自动捆绑实现

微软提供了DynamicFolderBundle类，可以自动将CSS捆绑，而不用将要下载的CSS手动通过Bundle类一个一个将CSS添加，在简单的项目中可以使用这种方式从而加快项目开发速度。比如将在Global.asax中改为

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Optimization;

namespace jsm.WebOptimizationCase
{
    public class Global : System.Web.HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
            BundleTable.Bundles.EnableDefaultBundles(); 
        }
    }
}

BundleTable.Bundles.EnableDefaultBundles返编译为：

public void EnableDefaultBundles() 
{ 
     this.Add(new DynamicFolderBundle("js", JsMinify.Instance, "*.js")); 
     this.Add(new DynamicFolderBundle("css", CssMinify.Instance, "*.css")); 
}

表示默认加载当前目录下的所有CSS或js文件。从而简化程序逻辑！

示例源码下载

下载地址：http://files.cnblogs.com/a-xu/jsm.WebOptimizationCase.7z

转载于:https://www.cnblogs.com/a-xu/archive/2012/04/10/aspnet_BundleTable.html

akeja44680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET4.5 BundleTable.Bundles捆绑教程[阿旭版]

本文目录什么是ASP.NET捆绑技术ASP.NET自定义捆绑实例示例解析自动捆绑实现示例源码下载什么是ASP.NET捆绑技术?ASP.NET捆绑是ASP.NET 4.5的新功能，是System.Web.Optimization命名空间下的类页员实现。他提供了一些ASP.NET运行性能方面的优化，比如，一个页面可能有很多CSS/JS/图片,通过灵活的应用...
复制链接

扫一扫