前言

Asp.net MVC 4以上版本多了BundleConfig.RegisterBundles方法,可以把要捆绑的脚本或样式进行捆绑压缩,以减少客户端的请求次数从而提高了客户端的访问速度。

问题

但世上懒人的数量还是很多,我也是一个,觉得这个方法还不够方便。在实际中,一些小的页面或独立页面,开了一些开源的js库之后,js文件比较多,而且每个页面引用的js又不太一样,如果能不在BundleConfig描述如何捆绑,像传统一样把js拉过来就能自动达到捆绑后的效果,是懒人多想要的结果。正是朝着这个目标,本随笔将实现一个html的扩展方法,来完成这个功能。你只要像传统一样把js拉到view上,改几个字符,就可以达到了效果了,引入的js还是有智能提示的。

调用方法

@Html.BundleScripts(
@<script src="~/Scripts/jquery-1.7.1.min.js"></script>,
@<script src="~/Scripts/login.js"></script>,
@<script src="~/Content/validBox/validBox.js"></script>
)

如上,把要捆绑的js都当BundleScripts的参数就可以了,效果如下:

BundleScripts的实现

        /// <summary>
/// 动态捆绑多个脚本
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="scripts">javscript</param>
/// <returns></returns>
public static IHtmlString BundleScripts(this HtmlHelper htmlHelper, params Func<object, object>[] scripts)
{
if (scripts == null)
{
throw new ArgumentNullException("scripts");
} var inputs = new StringBuilder();
foreach (var script in scripts)
{
inputs.AppendLine(script.Invoke(null).ToString().ToLower());
} var applicationPath = htmlHelper.ViewContext.HttpContext.Request.ApplicationPath;
Func<string, string> fixSrc = (src) => applicationPath == "/" ? "~" + src : src.Replace(applicationPath, "~/"); var srcs = inputs.ToString().Matches(@"(?<=src="").+?\.js(?="")").Select(item => fixSrc(item)).ToArray();
var path = string.Format("~/{0}", Math.Abs(string.Join(string.Empty, srcs).GetHashCode())); if (BundleTable.Bundles.GetBundleFor(path) == null)
{
BundleTable.Bundles.Add(new ScriptBundle(path).Include(srcs));
}
return Scripts.Render(path);
}

注:Matches方法是一个对正则表达式的包装。

提问和思考

你觉得此方法的关键之处在哪里?欢迎提问,我们一起探讨,最好能实现一个比此方法更方便的方法来。

Asp.net MVC在View里动态捆绑压缩引用的js的更多相关文章

  1. Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html

    Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...

  2. Asp.net mvc 中View 的呈现(二)

    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...

  3. TransactionScope事务处理方法介绍及.NET Core中的注意事项 SQL Server数据库漏洞评估了解一下 预热ASP.NET MVC 的VIEW [AUTOMAPPER]反射自动注册AUTOMAPPER PROFILE

    TransactionScope事务处理方法介绍及.NET Core中的注意事项   作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/10170712.ht ...

  4. 返璞归真 asp.net mvc (4) - View/ViewEngine

    原文:返璞归真 asp.net mvc (4) - View/ViewEngine [索引页] [源码下载] 返璞归真 asp.net mvc (4) - View/ViewEngine 作者:web ...

  5. ASP.NET MVC 之View

    仅此一文让你明白ASP.NET MVC 之View的显示(仅此一文系列二)   题外话 一周之前写的<仅此一文让你明白ASP.NET MVC原理>受到了广大学习ASP.NET MVC同学的 ...

  6. ASP.NET MVC 中 View 的设计

    1. 前言  感觉有好长时间没有接触View 了,周末闲来无事,翻翻书桌上的书来回顾回顾ASP.NET MVC中View的相关内容. 2. View概述  View 通过应用程序在Action 中返回 ...

  7. 预热ASP.NET MVC 的View

    ASP.NET MVC 的View 预设是Load on Demand(按需加载),也就是说View 第一次要Render 的时候才会去载入跟编译,这个就会造成一个现象,即使Web 应用程式已经完成启 ...

  8. Asp.Net MVC向视图View传值的三种方法

    本文将总结Asp.Net MVC向视图View传值的三种常见的方法: ----------------------------------------------------------------- ...

  9. ASP.NET MVC 4使用Bundle的打包压缩JS/CSS

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

随机推荐

  1. 【linux】关于TCP三次握手和四次挥手

    1.TCP是什么 关于OSI的七层模型 TCP在第四层——Transport层,第四层的数据叫Segment->报文 IP在第三层——Network层,在第三层上的数据叫Packet->数 ...

  2. saltstack通过salt.client执行命令(转)

    利用saltstack的salt.client模块可以在python的命令行下或者python脚本里执行相应的salt命令 master端想要执行类似 salt '*' cmd.run 'uptime ...

  3. mysql插入数据与删除重复记录的几个例子(收藏)

    mysql插入数据与删除重复记录的几个例子 12-26shell脚本实现mysql数据的批量插入 12-26mysql循环语句插入数据的例子 12-26mysql批量插入数据(insert into ...

  4. 面向对象and类

    类和对象: 1.什么叫类:类是一种数据结构,就好比一个模型,该模型用来表述一类事物(事物即数据和动作的结合体),用它来生产真实的物体(实例). 2.什么叫对象:睁开眼,你看到的一切的事物都是一个个的对 ...

  5. private成员变量真的私有吗?(用指针刨他祖坟)

    今天写程序时突然想到的,为什么不用指针去获取类的成员变量呢.于是做了这个实验.首先定义了一个类: class Test { private: int i; char c; int* p; public ...

  6. UESTC 288 青蛙的约会 扩展GCD

    设两只青蛙跳了t步,则此时A的坐标:x+mt,B的坐标:y+nt.要使的他们在同一点,则要满足: x+mt - (y+nt) = kL (p是整数) 化成: (n-m)t + kL = x-y (L ...

  7. AC日记——导弹拦截 洛谷 P1020 (dp+模拟)

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  8. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  9. 蒙古人交友网站 www.mengguren.com

    蒙古人交友http://www.mengguren.com/ 经过一个多月的努力,终于上线了,虽然长得丑陋一些.功能简单一些,欢迎大家注册,方便别人能找到您.吉日嘎拉<252056973@qq. ...

  10. Nginx+UWSGI+Django配置全过程

    重度参阅 原理+实战http://zhou123.blog.51cto.com/4355617/1688434 原理http://www.cnblogs.com/fnng/p/5268633.html ...