ASP.NET MVC 4 (十一) Bundles和显示模式
Bundles用于打包CSS和javascript脚本文件,优化对它们的组织管理。显示模式则允许我们为不同的设备显示不同的视图。
默认脚本库
在VS创建一个MVC工程,VS会为我们在scripts目录下添加很多脚本库,下面来简单了解下这些脚本库的作用:
脚本文件 | 说明 |
jquery-1.7.1.js | jquery的基本类库 |
jquery-ui-1.8.20.js | jquery的UI类库,方便我们创建丰富的用户控件,基于jquery基本类库 |
jquery.mobile-1.1.0.js | 用于移动设备UI控件的类库,在创建移动模板的工程时添加 |
jquery-validate.js | 用于客户端验证的类库 |
knockout-2.1.0.js | 客户端的模型-视图-视图模式类库,在客户端将显示数据和没模型分开,可以认为是浏览器上的MVC |
modernizr-2.5.3.js | 用于检测浏览器对HTML5和CSS3的支持 |
jquery-1.7.1.intellisense.js | 用于Visual studio在编写jQuery代码时提供函数名称的提示 |
jquery.unobtrusive-ajax.js | 用于MVC框架的unobtrusive Ajax功能 |
jquery.validate-vsdoc.js | 用于Visual studio在编写jQuery验证函数时提示函数名称 |
jquery.validate.unobtrusive.js | 用于MVC的客户端验证,依赖jquery-validate.js |
一些脚本文件有常规和最小化两个版本,最小化版本删除注释剪短变量名以缩小文件尺寸,在功能上和正常版本一致。正常版本的jquery-1.7.1.js文件大小252K,而缩小版的jquery-1.7.1.min.js只有92K,如果网站每天数以百万计的访问量,带来的流量节省还是很巨大的。缩小版的脚本很难阅读,所以开发时我们使用正常版本的脚本库方便调试,发布时再切换为缩小版本。
打包脚本和风格
Bundles定义在/App_Start/BundleConfig.cs文件,VS为我们创建的默认实现:
public class BundleConfig {
// For more information on Bundling, visit 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*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
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"));
}
}
ScriptBundle创建脚本包,StyleBundle创建CSS风格包,两者都使用Include包含一组文件。VS创建的默认包并不一定适合我们的需要,我们可以自行定义:
public class BundleConfig {
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css")); bundles.Add(new ScriptBundle("~/bundles/clientfeaturesscripts")
.Include("~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js",
"~/Scripts/jquery.unobtrusive-ajax.js")); }
}
注意这里的“~/Scripts/jquery-{version}.js”,{version}匹配对应文件的任何版本并通过工程配置文件选择正常版本还是缩小版,具体是web.config中的debug设置,如果为true选择正常版本,false则是缩小版。需要注意的是我们不能把相同文件的不同版本号放在一起,比如“jquery-1.7.2.js”和“jquery-1.7.1.js”,两个版本号都会被发送给客户端反而造成混淆。
在布局文件中使用Scripts.Render()输出脚本包,Styles.Render()输出风格包:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
@RenderBody() @Scripts.Render("~/bundles/clientfeaturesscripts") @RenderSection("scripts", required: false)
</body>
</html>
生成的HTML文件会通过<link href="XXX" rel="stylesheet"/>包含所有包里的CSS文件,所有的脚本文件则通过<script src="XXX"></script>引用。
上面的例子中还使用“@RenderSection("scripts", required: false)”输出一个节,requried=false表示不是必须的,只有在视图文件中定义了这个节才会渲染,我们可以利用它来包含视图需要的额外脚本文件,比如我们在MakeBooking.cshtml中定义Scripts节来包含脚本文件:
@model ClientFeatures.Models.Appointment @{
ViewBag.Title = "Make A Booking";
AjaxOptions ajaxOpts = new AjaxOptions {
OnSuccess = "processResponse"
};
}
<h4>Book an Appointment</h4>
@section scripts {
<script src="~/Scripts/Home/MakeBooking.js" type="text/javascript"></script>
}
...
使用这种可选节我们可以有选择的视图中包含视图仅需的脚本文件。
面向移动设备
人们越来越多的使用移动设备浏览网站,MVC应用也要考虑如何兼容这些移动设备以提供的更好的阅读体验。我们可以使用安卓、苹果手机访问开发测试网站,更方便的是从www.opera.com/developer/tools/mobile下载模仿移动版本的Opera浏览器,用它可以模仿不同设备设置不同屏幕大小的显示分辨率来测试。
在MVC WEB应用中我们在普通的视图文件外可以添加面向移动设备的视图,视图文件名里在文件后缀名前加入“.Mobile”表示这是移动设备专用,比如“/Views/Home/MakeBooking.Mobile.cshtml”:
@model ClientFeatures.Models.Appointment @{
ViewBag.Title = "Make A Booking";
AjaxOptions ajaxOpts = new AjaxOptions {
OnSuccess = "processResponse"
};
}
<h4>This is the MOBILE View</h4>
@section scripts {
<script src="~/Scripts/Home/MakeBooking.js" type="text/javascript"></script>
} <div id="formDiv" class="visible">
@using (Ajax.BeginForm(ajaxOpts)) {
@Html.ValidationSummary(true)
<p>@Html.ValidationMessageFor(m => m.ClientName)</p>
<p>Name:</p><p>@Html.EditorFor(m => m.ClientName)</p>
<p>@Html.ValidationMessageFor(m => m.Date)</p>
<p>Date:</p><p>@Html.EditorFor(m => m.Date)</p>
<p>@Html.ValidationMessageFor(m => m.TermsAccepted)</p>
<p>@Html.EditorFor(m => m.TermsAccepted) Terms & Conditions</p>
<input type="submit" value="Make Booking" />
}
</div>
<div id="successDiv" class="hidden">
<h4>Your appointment is confirmed</h4>
<p>Your name is: <b id="successClientName"></b></p>
<p>The date of your appointment is: <b id="successDate"></b></p>
<button id="backButton">Back</button>
</div>
这里适当调整控件布局以更适合在移动设备上浏览,其他和桌面版基本一致。当我们从移动设备浏览时,MVC自动为我们应用移动版本的视图,MVC依赖C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers目录下的各种浏览器的描述文件检查浏览器版本,主要是匹配文件中定义的user agent特性,你会发现UC浏览器赫然在列。
自定义显示模式
上面的方法将所有的移动设备归为一类,如果我们还需要更细分具体是哪种移动设备,我们可以通过创建自定义显示模式来实现,这是在Application_start中注册的:
public class MvcApplication : System.Web.HttpApplication {
protected void Application_Start() { DisplayModeProvider.Instance.Modes.Insert(,
new DefaultDisplayMode("OperaTablet") {
ContextCondition = (context => context.Request.UserAgent.IndexOf("Opera Tablet", StringComparison.OrdinalIgnoreCase) >= )
}); AreaRegistration.RegisterAllAreas();
...
这里通过比较请求的User agent是否包含“Opera tablet”来标识OperaTablet显示模式,如果请求来自于这样的设备,MVC会查找包含OperaTablet的视图文件比如/Views/Home/MakeBooking.OperaTable.cshtml,这样我们就可以单为某种设备创建自定义的视图。
以上为对《Apress Pro ASP.NET MVC 4》第四版相关内容的总结,不详之处参见原版 http://www.apress.com/9781430242369。
ASP.NET MVC 4 (十一) Bundles和显示模式的更多相关文章
- ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包,Styles.Render()输出风格包:
ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...
- ASP.NET MVC学习笔记-----Bundles
在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以AS ...
- 跟我学ASP.NET MVC之十一:URL路由
摘要: 在MVC框架之前,ASP.NET假定在请求的URLs和服务器硬盘文件之间有直接的关系.服务器的职责是接收浏览器请求,从相应的文件发送输出. 这种方法只能工作于Web表单,每一个ASPX页面既是 ...
- 学习ASP.NET MVC(十一)——分页
在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...
- ASP.NET MVC Bundles 用法和说明(打包javascript和css)
本文主要介绍了ASP.NET MVC中的新功能Bundles,利用Bundles可以将javascript和css文件打包压缩,并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便 ...
- ASP.NET MVC Bundles 之学习笔记
在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以AS ...
- ASP.NET MVC 5 02 - ASP.NET MVC 1-5 各版本特点
参考书籍:<ASP.NET MVC 4 高级编程>.<ASP.NET MVC 5 高级编程>.<C#高级编程(第8版)>.<使用ASP.NET MVC开发企业 ...
- 7 天玩转 ASP.NET MVC — 第 7 天
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 今天是开心的一天.因为我们终于来到了系列学习的最后一节.我相信你喜欢之前的课程,并从中学到了许多. ...
- 返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性
原文:返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性 [索引页][源码下载] 返璞归真 asp.net mvc (12) - asp.net mvc ...
随机推荐
- 喵哈哈村的魔法考试 Round #9 (Div.2) 题解
A题 喵哈哈村的数据筛选游戏 题解:这道题签到题,拿个数组记录一下这个数是否出现过即可. #include<bits/stdc++.h> using namespace std; cons ...
- CNUTCon2017全球运维技术大会(持续更新中) - 斯达克学院 - 实战驱动的 IT 教育平台 - Powered By EduSoho
CNUTCon2017全球运维技术大会(持续更新中) - 斯达克学院 - 实战驱动的 IT 教育平台 - Powered By EduSoho https://new.stuq.org/cours ...
- Linux--信号阻塞与屏蔽
1. sigprocmask函数提供屏蔽和解除屏蔽信号的功能. 从而实现关键代码的运行不被打断. 函数声明如下: int sigprocmask(int how, const sigset_t *se ...
- 奇怪吸引子---Hadley
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- iOS开发-装饰模式
装饰模式是指在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.通过创建一个包装对象,也就是装饰来包裹真实的对象.装饰模式中的装饰对象和真实对象有相同的接口.这样客户端对象就能以和真实对象 ...
- JavaScript比较两个对象的值是否相等
JavaScript比较两个对象的值是否相等 function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a ...
- windows多线程同步--互斥量
关于互斥量的基本概念:百度百科互斥量 推荐参考博客:秒杀多线程第七篇 经典线程同步 互斥量Mutex 注意:互斥量也是一个内核对象,它用来确保一个线程独占一个资源的访问.互斥量与关键段的行为非常相似, ...
- 2014年新一代的报表利器 Qlik Sense Desktop 初步体验
点击进入 QlikView/QlikSense 社区 交流群:432998033 Qlik Sense Desktop 的案例展示 先上几个刚刚边看边学完成的几个报表案例效果 (如果图片显示不正常, ...
- Abp zero 示例运行
https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core Introduction The easiest wa ...
- JavaScript回调函数的实现
https://github.com/forsigner/blog/blob/master/source/_posts/javascript-callback.md 在JavaScript中,回调函数 ...