对于Web应用来讲,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展现给用户的结果,换句话说Web应用的界面呈现工做是由浏览器完成的,Web应用的原理是经过Http协议从服务器上获取到对应的Html代码以及相关资源,使得浏览器可以完成正确的呈现工做。css
ASP.NET MVC做为一个Web应用构建框架View承担了UI显示的功能,在开发过程当中View以Action的名称命名,当用户的请求被路由到某一Action方法时,ASP.NET MVC将会根据Action的名称来获取到对应的View文件,将该View文件动态处理后生成最终的Html内容,将内容返回到浏览器进行显示。因此ASP.NET的渲染实际上指的是动态的生成Html代码的过程。
而ASP.NET MVC中action的代码能够简单以下:html
仅须要调用一个View方法就能够将Index这个View显示到用户的浏览器上,那么View方法到底作了什么处理?Razor是什么?Action方法的返回值ActionResult又是什么?
本文将从如下几个方面来介绍ASP.NET MVC Html代码的生成过程:
● ActionResult及ViewResult
● View的查找与Razor
○ ViewEngineCollection&ViewEngine
○ ViewEngineResult
● View的编译与激活
● View的渲染
● 使用示例代码演示View的渲染过程
● View的Html Helper与ModelMetadata
● 经常使用的ActionResult
● 小结前端
ActionResult及ViewResult
在以前的文章《ASP.NET没有魔法——ASP.NET MVC 过滤器(Filter)》中提到过,Action方法是由ActionInvoker完成执行的,Action返回的结果是一个ActionResult类型,Action执行后ActionInvoker又调用了ActionResult的ExecuteResult方法完成特定的操做,相关代码以下所示:jquery
ActionResult的定义以下,它包含了一个名为ExecuteResult的方法,该方法用来完成对action方法执行结果进行处理:git
回到最初提到的View()方法,该方法定义在Controller中,它的返回值是一个ViewResult类型:github
能够这么说,当Action执行完成后,ASP.NET MVC的View渲染工做是由ViewResult在ExecuteResult方法中完成的,ViewResult的ExecuteResult实现代码以下(注:该代码在ViewResult的基类ViewResultBase中实现):web
从代码中能够容易的看出,ASP.NET MVC中View的渲染工做主要有四步:
1. 若是没有指定View的名称,那么默认以Action的名称为View名称。
2. 根据控制器的上下文查找并得到真实的View对象。
3. 调用View对象的Render方法将View的内容写到HttpContext的响应信息中,后续将其返回至浏览器。
4. 释放View对象。ajax
根据上面的分析View渲染的两个重要步骤就是View对象的查找和渲染,其整个过程可参考下图,详细内容将在后续介绍:编程
View的查找与Razor
在ASP.NET MVC中View文件通常放置在项目根目录的Views目录下,以Controller名称为子目录,每个子目录下保存了以action方法名称命名的View文件:bootstrap
ViewResult类型中查找View的代码以下:
从代码能够看出它是经过一个ViewEngineCollection对象,根据ViewName(默认是actionName)去查找View的,若是找到返回一个ViewEngineResult类型,不然将抛出异常,异常中包含查找的位置:
注:从上面的错误信息中能够看到ASP.NET MVC在查找View时,除了匹配了.cshtml和.vbhtml的文件外,还匹配了.aspx和.ascx的文件,后者是Web Form框架的页面文件,这是为何呢?由于默认状况下ASP.NET MVC中会包含MVC使用的Razor 引擎和Web Form使用的Web Form引擎,因此在纯使用MVC开发的状况下,为了优化性能,通常会经过如下代码将Web Form的引擎删除:
更多View引擎的内容后续介绍。
ViewEngineCollection&ViewEngine
在ASP.NET中有一个IViewEngine的接口,它定义了查找和释放View,其定义以下:
而ASP.NET中实现IViewEngine接口的类型关系以下图:
从该图中能够获得一下信息:
● ASP.NET中有两个最终实现的ViewEngine,分别是Razor和WebForm,MVC应用中使用Razor实现View的渲染。
● 它们的基类都是VirtualPathProviderViewEngine,就是说它们都是基于相对路径来管理View的。
● 它们的基类都是BuildManagerViewEngine,表面它们都和编译有关(注:在ASP.NET中不管是WebForm仍是MVC,均可以在页面上编写代码,而这些代码确定是不能被浏览器理解的,须要通过编译才可以正常工做)。
ASP.NET中的ViewEngine被一个名为ViewEngines的集合进行管理,以下图:
MVC中主要使用的是RazorViewEngine,下图是RazorViewEngine的部分代码:
从代码中能够看到两个重要信息,第一是“_ViewStart”被硬编码为启动页面,这也是为何在该页面指定布局的缘由,另外在其构造方法中硬编码了各类LocationFormats,它们指定了相应类型页面的搜索路径。
那么上面提到的Razor又是什么呢?Razor是ASP.NET的一种能够将服务器代码嵌入到网页中的标记语言,它由Razor标记、服务器代码(C#/VB)以及Html代码组成。在Html中以@符号开始的内容将会被识别为服务器代码,而Razor将识别这些代码将其渲染为Html代码。更多关于Razor的内容可参考:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor
ViewEngineResult
ViewEngineResult是ViewEngine对View查找后结果的封装,其定义以下:
它包含了查找后的结果IView类型以及用于查找的ViewEngine自己,另外还有一个字符串列表用来保存查找该View所遍历过的路径。
下面是RazorViewEngine用来查找和建立RazorView对象的主要代码,其核心实际就是根据action名称和Controller名称与相应的LocationFormats匹配后查找文件是否存在,若是存在则建立IView实例的过程:
而这里的IView类型就是RazorView:
View的编译与激活
上面介绍了ViewEngine用来查找并获取相应IView对象,那IView是用来作什么的呢?下图是IView的接口定义,它只有一个Render方法,用来将指定的View上下文信息经过指定的TextWriter进行渲染,这实际上就是将View文件的内容处理后,写到Http响应数据的过程:
ASP.NET中实现IView的类结构以下:
一样的有两种View分别对象Razor和WebForm,而它们的基类都是BuildManagerCompiledView(被BuildManager编译后的View),并且Render方法也是在基类中实现的,具体代码以下:
RenderView方法实如今对应的子类中,下图为RazorView的RenderView方法:
上面代码的核心在于:
1. 经过BuildManager根据View文件的路径对View文件进行编译,并得到编译后的类型(注:BuildManager是ASP.NET中用于对程序集、页面进行编译的工具)。
2. 经过激活器建立View编译后的类型,下图是默认使用的激活器,其核心是经过依赖解析器或者Activator来直接建立类型实例。
3. 实例化后的对象是一个WebViewPage类型,经过对WebViewPage初始化后(包含起始页的查找)调用WebViewPage的ExecutePageHierarchy方法完成渲染。
注:WebViewPage是Razor对应的页面类型,WebForm对应的是ViewPage和ViewUserControl。
View的渲染
上面提到View文件编译后是一个WebViewPage对象,而View的渲染也是由该对象完成的,那么WebViewPage是什么?下图是WebViewPage的定义:
从中能够看到一些重要的属性如Html、Ajax、Url等这些能够在View里面使用的,有用来生成Html、Url、Ajax的帮助类型,也有如携带了数据用于绑定到View上的Model、TempData、ViewBag、ViewData等类型。
另外WebViewPage继承至WebPageBase:
WebPageBase类型里面定义了RenderBody、RenderSection等方法。
了解了WebPage与WebPageBase以后有没有感受View文件其实是WebPage的一个子类型,在View中能够随意使用和调用WebPage和WebPageBase中的属性和方法。
下图是对Contact.cshtml文件编译后的代码:
从代码中证实了以前的猜测,View文件编译后确实是WebViewPage的子类型,而该类型中的Execute方法是将Html代码以字符串的形式进行了拼接,拼接过程当中若是遇到特殊方法的调用则拼接特殊方法的返回值:
以上代码来自布局文件的编译结果。
而Execute方法也就是最终ASP.NET MVC进行View渲染的实际方法。WebViewPage的ExecutePageHierarchy是由于MVC中页面可能依赖多个View,如默认状况下页面有StartPage中指定的布局View和内容View,为了保证渲染内容顺序不变ExecutePageHierarchy方法中引入了栈机制(后进先出)。
注:BuildManager编译的View结果默认路径为"%WinDir\Microsoft.NET\Framework\ {Version No}\Temporary ASPNET Files"目录下,以App_Web_开头的程序集中,程序集的名称是根据路径随机生成的。
使用示例代码演示View的渲染过程
下面就用代码的方式来演示View的查找、编译、激活以及渲染的全过程:
全量代码:

1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Compilation; 7 using System.Web.Mvc; 8 using System.Web.WebPages; 9 10 namespace My_Blog.Controllers 11 { 12 public class ViewRenderController : Controller 13 { 14 // GET: ViewRender 15 public void Index() 16 { 17 var path = ""; 18 var viewEngineResult = this.FindView(out path);//查找View 19 Render(viewEngineResult, path);//渲染View 20 } 21 22 //View的查找,至关于RazorViewEngine 23 private ViewEngineResult FindView(out string path) 24 { 25 var actionName = "Contact"; 26 var controllerName = "Home"; 27 var viewLocationFormat = @"~/Views/{1}/{0}.cshtml"; 28 //根据Controller和Action名称与地址模板组成View相对路径 29 path = string.Format(viewLocationFormat, actionName, controllerName); 30 //根据文件路径建立RazorView和ViewEngineResult 31 var view = new RazorView(this.ControllerContext, path, "", true, null, null); 32 return new ViewEngineResult(view, new RazorViewEngine()); 33 } 34 35 //View的渲染 36 private void Render(ViewEngineResult viewEngineResult,string path) 37 { 38 Type pageType = BuildManager.GetCompiledType(path);//根据对View文件进行编译 39 var pageInstance = Activator.CreateInstance(pageType);//建立View文件编译后类型实例 40 var webViewPage = this.InitViewPage(pageInstance, viewEngineResult, path);//对实例中相关属性进行初始化 41 webViewPage.ExecutePageHierarchy(//完成View的渲染 42 new WebPageContext(this.HttpContext, null, null), 43 this.HttpContext.Response.Output, null);//startpage设置为null,将不会渲染布局页面 44 } 45 46 private WebViewPage InitViewPage(object instance, ViewEngineResult viewEngineResult, string path) 47 { 48 WebViewPage webViewPage = instance as WebViewPage; 49 50 if (webViewPage == null) 51 { 52 throw new InvalidOperationException("无效"); 53 } 54 ViewContext viewContext = new ViewContext(this.ControllerContext, 55 viewEngineResult.View, 56 this.ViewData, 57 this.TempData, 58 this.HttpContext.Response.Output); 59 webViewPage.VirtualPath = path; 60 61 webViewPage.ViewContext = viewContext; 62 webViewPage.ViewData = viewContext.ViewData; 63 webViewPage.InitHelpers(); 64 return webViewPage; 65 } 66 } 67 }
上面的代码要点以下:
● FindView方法实际上表明的就是RazorViewEngine,它根据硬编码的View文件搜索模板结合Controller和Action的名称得到View文件的全路径,并建立RazorView和ViewEngineResult对象。
● Render则表明了View的编译、激活以及渲染过程。
运行结果(因为没有布局页面,因此相关的样式和JS都没有被引入):
View的Html Helper与ModelMetadata
在ASP.NET MVC的View中能够经过一些Helper类型来生成HTML代码,下图为用户注册页面的View代码:
从代码中能够看到ASP.NET MVC并非彻底使用Html来构成页面的,中间有一些经过Html属性(注:Html是WebViewPage类型中的HtmlHelper类型的实例)调用的方法,从方法的名称来看这些方法分别用于生成如数据验证信息、Label标签、文本框以及密码类型文本框等HTML代码。
ASP.NET MVC提供了一系列的Helper类及其拓展方法,这些Helper类中封装了针对HTML、Ajax(ASP.NET MVC中Ajax Helper的用法可参考:https://www.c-sharpcorner.com/article/Asp-Net-mvc-ajax-helper/)等相关内容的实现,ASP.NET MVC对Html拓展能够分为如下四类:
1. 用于生成特定标签的拓展,如Form、Input、Label、TextArea、Select等拓展。
使用方式以下:
将经常使用的HTML标签进行封装,对于不熟悉Html的开发人员来讲ASP.NET MVC提供了一种面向对象编程的方式来对页面进行开发,更重要的是Html方法能够与模型关联,当模型的元数据中有相应的验证特性而且开启了客户端验证时,在渲染标签时会包含相应的验证信息,使用这类标签最大的好处就是能够将关注点所有放在模型上,当模型发生变化时View上不须要作任何的修改。
2. 用于生成Model验证信息的拓展。
使用方式以下:
ASP.NET MVC中提供了模型验证的机制,当模型验证失败时会有相应的失败信息,而该拓展就是对这些错误信息进行渲染,大大的减小了输出验证信息的工做量。
3. 根据用途“展现/编辑”生成标签的Display以及Editor拓展。
使用方式以下(注:DisplayFor是用于显示指定模型属性中的值,若是要显示对应模型属性的名称可用DisplayNameFor):
Display与Editor是根据模型的数据类型来判断如何对模型进行展现。ASP.NET MVC中为Display和Editor提供了一些基础类型的默认模板实现分别经过内部静态类型DefaultEditorTemplates和DefaultDisplayTemplates进行存储,下面是bool类型模板代码:
在提供默认模板的同时ASP.NET MVC也提供了自定义模板的机制,能够分别使用DisplayAttribute与UIHintAttribute对特定属性指定渲染模板,如何自定义Display和Editor模板可参考:http://www.growingwiththeweb.com/2012/12/aspnet-mvc-display-and-editor-templates.html
4. Partial拓展。
使用方法(注:第一个参数是Partial View的名称,默认状况下Partial View文件存储于Views/Shared目录下,若是文件不在这个目录下须要在参数中体现具体目录):
Partial是ASP.NET MVC中用于将可重用Html进行分离的机制,而且Partial是能够访问数据的,就是说经过parital分离的Html代码,能够根据传入的数据来动态生成Html代码,更多关于Partial View的内容可参考.Net Core的文档:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial
5. Child Action拓展。
使用方法:
Child Action相似于Partial View,它也是将可重用的部分进行分离,但Partial View更侧重于关注Html代码重用,Child Action还包含了后端逻辑的重用。如购物网站的购物车,它可能出如今任意的页面中,但首页的逻辑、模型与购物车就可能没有任何关系,此时就可使用Child Action。
经常使用的ActionResult
前面提到过ASP.NET MVC的页面渲染工做其实是由一个继承至ActionResult的ViewResult对象完成的,ActionResult其实是ASP.NET MVC中的一个抽象,表明了全部逻辑执行后的结果,而ViewResult是将结果面向人的,因此返回了Html让浏览器显示给人看,除了ViewResult以外还有一些经常使用的ActionResult以下:
● ContentResult:用于将字符串返回到客户端,在Action方法中调用Content方法返回。
● FileStreamResult:用于将文件返回到客户端,在Action方法中调用File方法(有多个重载)返回。
● HttpNotFoundResult:用于返回HTTP未找到状态,在Action方法中调用HttpNotFound方法返回。
● JavaScriptResult:用于将JavaScript返回到客户端并执行,在Action方法中调用JavaScript方法返回。
● JsonResult:用于将Json数据返回到客户端,在Action方法中调用Json方法返回。
● PartialViewResult:用于渲染partial页面,在Action方法中调用PartialView方法返回。
● RedirectResult:用于重定向,在Action方法中调用Redirect方法传入须要重定向的Url进行重定向操做。
● RedirectToRouteResult:用于路由重定向,在Action方法中调用RedirectToAction方法重定向到指定的Action。
● EmptyResult:返回空,在Action方法中返回Null或将Action方法的返回值设为Void便可。
小结
本文介绍了ASP.NET MVC如何在Action方法执行时经过对ActionResult(ViewResult)的执行完成View文件的查找、编译以及渲染的过程,除了ViewResult以外ASP.NET MVC还提供了其它类型的ActionResult如Json、File等,使用这些结果能够建立简单的Web API以及文件下载等功能,另外MVC经过Html Helper类型对View进行了拓展,在开发View时能够最大程度的对View的Html代码和逻辑进行重用,同时也将View与Model(特指ViewModel)进行关联,在开发时能够将关注点放在Model上,无需担忧Model修改后View代码的修改。合理的使用View提供的相关机制,能够极大的减小工做量同时也可让代码变得更加简洁。
参考:
https://zhuanlan.zhihu.com/p/29418126
https://www.codeproject.com/Articles/787320/An-Absolute-Beginners-Tutorial-on-HTML-Helpers-and
https://www.c-sharpcorner.com/article/Asp-Net-mvc-ajax-helper/
http://www.growingwiththeweb.com/2012/12/aspnet-mvc-display-and-editor-templates.html
https://stackoverflow.com/questions/5037580/asp-net-mvc-3-partial-vs-display-template-vs-editor-template
https://weblogs.asp.net/scottgu/introducing-razor
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor
本文连接:http://www.cnblogs.com/selimsong/p/8670744.html
ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理
对于一个应用来讲界面的重要性无言而喻,而Web应用的界面是使用Html+Css以及Javascript实现的,ASP.NET MVC是一个用来构建Web应用的框架,它的界面也是Html实现的,对于一些开发团队来讲,通常Web项目会存在专业的UI前端工程师和后端工程师,前端工程师可能只懂设计和Html,可是对于如何将设计好的Html应用到ASP.NET可能就须要ASP.NET工程师的帮助。
本文将介绍如何将已经设计好的Web界面应用到ASP.NET MVC中以及如何对这些资源文件进行管理,先看一下修改后的效果:
本章的主要内容有:
● 素材选择
● ASP.NET MVC的界面布局及界面实现
● 使用BundleConfig进行素材资源管理
○ 使用bundle对素材分类
○ 使用Bundle对资源文件进行优化
○ 在Bundle中使用通配符及文件版本(min版)的选择
○ 使用CDN
○ Bundle中的缓存
○ Bundle重写样式表中资源引用路径
○ 自定义资源转变(Transform)
● 小结
素材选择
本文选取开源主题Start Bootstrap - Clean Blog为例进行介绍。
Clean Blog是一个现代风格的响应式主题,基于bootstrap 4.0,下图为Clean Blog的运行效果:
将Clean Blog下载到本地并导入《My Blog》项目中,该主题中包含了相应的样式表、图片、Js、示例页面等文件:
注:Clean Bolg的GitHub地址:https://github.com/BlackrockDigital/startbootstrap-clean-blog
ASP.NET MVC的界面布局及界面实现
Clean Blog是由Html、Css、Javascript文件组成的一个静态Web界面,要将其应用到ASP.NET MVC中,只须要对其结构进行分析后一一替换到ASP.NET MVC的View中便可。
因此首先要分析的是Clean Blog以及My Blog应用的页面布局,对于Clean Blog来讲它分为三块,分别是导航、内容以及页脚:
一样的My Blog以前使用的ASP.NET MVC默认模板也是分为了导航、内容和页脚:
对于上面的布局来讲,导航和页脚部分是不变的,只有中间的内容是变化的,在ASP.NET MVC中提供了布局页的机制,专门用来定义页面布局,将不变的内容放置在该布局页面上,因此要更换界面首先须要的就是定义布局页面:
在Views/Shared目录下添加一个新的布局页面,将Clean Blog的Index页面中的导航以及页脚代码复制到新的布局页面中,包括css以及js的引用(注:须要修改路径),页面内容部分使用@RenderBody()方法代替:
同时将_ViewStart.cshtml中指定的布局文件改成新建立的CleanBlog布局文件:
最后参照Clean Blog内容页样式完成相应内容页面修改便可,下面以“联系咱们”页面为例:
运行效果(注:没有实现原主题中的信息提交功能):
使用BundleConfig进行素材资源管理
经过上面的介绍知道了如何经过布局页面来搭建页面内容,Web页面除了自己的Html代码外还少不了css、JavaScript等文件的支持,但这些文件都是相对零散的,在ASP.NET中有一个Bundle机制专门用于管理这些资源文件。
Bundle有捆和包的意思,而在ASP.NET MVC中它实际就是能够将一组css或JavaScript捆绑起来,捆绑能够根据资源的一些特性进行归类,与此同时还添加了一些有用的附加功能,如:文件最小化、资源文件的版本管理、使用CDN加速、资源文件的缓存等等,下面就介绍如何使用bundle来管理新添加到项目中的素材资源。
使用bundle对素材分类
为了保证页面样式一致,因此在建立布局文件时添加了全站共用的样式和脚本,Clean Blog是基于Bootstrap4.0创建的,除此以外还有一些特殊的内容,以下图所示,它的实例代码中已经进行过度类:
样式主要包括Bootstrap的核心样式、模板中使用的字体以及模板中的自定义样式,一样JavaScript除了bootstrap必要的JavaScript外还有自定义的JavaScript。根据这个分类规则,在App_Start/BundleConfig的BundleConfig类型中注册分类:
样式分类:
脚本分类:
注:建议bundle的地址以bundles做为前缀,避免与路由冲突。
完成后在布局文件中改用Bundle渲染样式和脚本:
使用Bundle对资源文件进行优化
前面经过Bundle对资源进行了分类,当同一类资源下存在多个文件时,页面只须要一句代码就能够所有引入使代码更清晰,固然Bundle机制在资源分类的同时,更重要的是能够对资源文件进行优。
这里的优化有两个点分别是文件请求的优化和文件大小的优化,前者是将同一类的文件进行合并,合并成一个文件,在请求时只需请求一次便可,后者是将css及JavaScript中不须要的字符删除、变量名称简写以达到缩减文件尺寸的目的。
使用Bundle管理资源时,在Release模式下将自动进行优化,另外也能够设置BundleTable.EnableOptimizations为true进行强制优化,以下图所示:
运行时将能够看到以下结果:
1. 请求数量减小:
2.非最小化的js文件被最小化,如clean-blog.js:
注:上面请求中出现字体文件没法找到的错误将在后续内容解释。
在Bundle中使用通配符及文件版本(min版)的选择
对于一些样式或脚本组件来讲,它自己就可能由多个文件构成,以下图中的Jquery目录中就有jquery.js以及jquery.slim.js两个文件:
在一些复杂的应用中还可能会使用到jQuery的其它组件,这样资源文件会更多,为了简化Bundle对资源的归类,在使用Bundle注册分类时,可使用通配符来一次匹配多个文件:
注:Bundle中能识别的通配符有两种,经常使用的就是“*”,另外还能够经过“{version}”来匹配文件版本。更多通配符相关内容可参考:https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#using-the--wildcard-character-to-select-files
直接使用*通配符能够匹配相应目录下的全部文件,下图是运行结果:
从图中能够看到,比以前的请求中多了一些js文件,这些文件就是经过通配符匹配到的,但要注意的是这里没有获取包含.min版本的js文件,在相同目录下clean-blog.js以及jquery.js都有被最小化的min版本:
Bundle机制会根据debug/release模式或者BundleTable.EnableOptimizations属性来判断是否对资源文件优化,在release模式(web.config中compilation的debug属性为true)下或者BundleTable.EnableOptimizations设为true时会启用资源优化,这里的资源优化除了上面提到的多个文件捆绑外,若是文件列表中有min版本文件,那么就会优先选择min版本文件。
因为优化模式下没法看到具体请求的文件名称,因此在clean-blog.min.js中添加一条日志输出代码:
而后使用release模式运行程序,将会得到下面结果:
除了看到请求减小之外,还看到日志中输出了min版本文件中添加的内容,证实使用release模式运行时Bundle会自动选择文件最小化的版本。
使用CDN
CDN(内容分发网络),为了提升web的响应速度,其中一项主要的优化手段就是将静态资源放到CDN上,这样用户就能够在离他最近的网络节点获取到这些资源,这样既提升了资源获取的速度同时也下降了应用服务器的压力,ASP.NET中的Bundle能够为相应的资源配置CDN,而且该配置也是release模式下生效:
使用CDN主要有如下几个步骤:
● 将bundles的UseCdn属性设为true。
● 建立Bundle对象时构造方法中传入CDN的路径。
● 设置Bundle对象的CdnFallbackExpression属性,该属性用于判断经过CDN加载的内容是否正确加载,若是没有那么会加载Include中的内容。
运行效果:
将bundles.CdnFallbackExpression的属性设置为window.jQuery会生成一个判断window.jQuery对象是否存在,若是不存在则获取服务器资源的代码:
经过修改CDN资源路径,模拟CDN没法访问状况,它会自动加载可用的资源:
CDN可用资源参考:http://www.bootcdn.cn/
Bundle中的缓存
在Release或资源优化模式下,Bundle为其管理的资源提供了缓存机制,在第一次访问Bundle管理的资源时,Bundle会为每一组资源生成一个惟一标识,而后将该资源默认缓存一年:
当资源发生改变时惟一标识会发生变化,那么原来缓存的内容就自动失效了。
Bundle重写样式表中资源引用路径
在前面的介绍的过程当中release模式下一直有一个错误,就是没法找到字体文件,这是由于在编写样式时会引入一些字体或者图片等外部资源,而这些资源通常是用相对路径进行引用的,可是当ASP.NET中使用Bundle来对样式资源进行捆绑时,该资源的url地址就发生改变了,致使使用该地址组合的引用资源的地址不正确,从而致使了资源没法加载:
为了解决这一问题,Bundle提供了一个重写样式引用相对路径的解决方案,在将样式表注册到Bundle中时,能够为相应的样式文件添加一个CssRewriteUrlTransform对象,它用于Css文件优化时对其引用的Url进行重写:
添加以上代码后,运行程序将解决字体没法找到的问题:
自定义资源转变(Transform)
资源转变是Bundle机制在优化资源时提供的一个可拓展接口,如上面介绍的css Url重写就是资源转变的拓展,Bundle中实现资源转变须要实现如下接口:
接口中的参数分别表明获取到文件的虚拟路径和文件的内容。
下面建立一个在css中插入自定义内容的资源转换器,来介绍如何实现资源转变的自定义拓展:
实现IItemTransform接口,在样式文件中追加".test {color: red;}"样式:
将该转换器经过Include方法应用到对应文件上:
运行结果显示相应内容已经被添加到最终的样式文件中:
注:IItemTransform接口是在资源优化前调用的,因此本例添加内容包含的空格和分号最终都被优化删除了,因此在使用IItemTransform进行拓展时须要注意资源优化问题。
另外在Bundle中还有另一个拓展接口IBundleTransform,它定义了一个用于转换Bundle相应文件的方法:
实现Process接口,在响应的内容上添加注释“hello selim”:
BundleTransform须要在Bundle的Transforms属性上添加:
运行结果:
相对与ItemTransform来讲BundleTransform处理后的内容不会再进行优化,在文档https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#less-coffeescript-scss-sass-bundling中还经过BundleTransform实现了less等文件动态编译的功能,有兴趣可参考该文档。
小结
本章主要介绍了如何将现有的Web样式应用到ASP.NET MVC中,并着重介绍了ASP.NET MVC中对静态资源管理的Bundle机制。Bundle机制除了能够对资源文件进行归类外还提供了资源文件优化、CDN、缓存等高级功能。合理的利用Bundle可让项目代码更清晰,同时也能够提升应用的性能。
参考:
https://github.com/BlackrockDigital/startbootstrap-clean-blog
https://html.com/attributes/
https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
https://www.codeproject.com/articles/842961/introducing-dynamic-bundles-for-asp-net-mvc
https://stackoverflow.com/questions/11355935/mvc4-stylebundle-not-resolving-images#
http://www.bootcdn.cn/
http://www.tutorialsteacher.com/mvc/scriptbundle-mvc
https://www.codeproject.com/Articles/728146/ASP-NET-MVC-bundles-internals
https://blogs.msdn.microsoft.com/rickandy/2011/05/21/using-cdns-and-expires-to-improve-web-site-performance/