使用 asp.net mvc empty 模板建立 web 项目（附常用nuget包）

为什么要使用 MVC Empty 模板

如果用VS默认创建一个MVC程序，会自带很多nuget package。除了一些实用工具，还包括许多不符合国情的包。比如自带的 OpenAuth 支持 facebook登录之类，在伟大的国家是用不上这么资本主义的东西的。

所以我一般习惯建立空的MVC解决方案

vs2013-mvc-empty

这样一来，项目只会包括基本的 jquery 脚本框架和 bootstrap 样式框架。这两个刚好我都用得上。如果不需要只需将对应的css和js文件删除掉，删除掉 App_Start/BundlesConfig.cs 里面的相关代码就可以了。这样就是相当纯净的一个 mvc 解决方案。

当然太干净的解决方案不太可能满足一个正常项目的需要，我们还需要添加一些常用的 package 来完成工作。

如何添加 nuget package:

1.程序管理控制器（命令式安装）：视图》其它窗口》程序管理控制器》

输入Install 程序识别码进行安装，如：

1

Install jQuery.Validation

2.管理 Nuget 程序包（图形介面）：解决方案资源管理器》对应工程的“引用”》右击》管理 Nuget 程序包

选联机，nuget.org，右边输入识别码或关键字搜索并安装

以上两种方式均会自动安装并添加引用包所依赖的其它包。很方便，不过某些包还需要对工程进行相关配置才会起作用。

一些必须的包

WebGrease

这个基本上是必须安装的，它提供 Bundle 功能，Bundle 功能是一组资源文件（js, css）管理功能。一般我们页面中需要引用很多个JS或CSS文件，而且不同页面可能需要引用同一组JS，CSS文件。Bundle提供Scripts和Styles两种Bundle，可以把一组JS或CSS组合成一个 Bundle 然后给它一个名字如 ~/bundles/js 或 ~/bundles/css 。在页面只使用 @Scripts.Render("~/bundles/js") 和 @Styles.Render("~/bundles/css")这样的调用就能输出引用 Bunlde 所有的JS或CSS文件。

最妙的是，这个东东在 Debug 模式输出是正常的多个 script 或 style 的引用。而在 Release 模式输出的是单一个 script 或 style 的引用，Server会把所有的 js 脚本或 css 样式表整合成一个文件并 minified 压缩（若同一文件夹中存在 min 版本自动使用 min 版）然后统一输出，减少 request/response 往返次数以及文件体积。非常合理的设计。

Modernizr

提供浏览器特性检测功能，加载完成会自动将浏览器特性以 class 的方式添加到 html 元素中，比如如果客户端不支持触摸，html 里面的 class 就会多出一个 no-touch 的 class 。如果我需要针对触摸和触摸设备使用不同的样式或提供不一样的功能就能利用这种 class 进行区分。

比如，我想在普通显示屏上使用 lightbox 功能（找了好几个lightbox对小屏支持都不好，不能缩放），而触屏设备直接显示大图（触摸一般为手机，多数支持缩放功能）。这种情况我只需要以下代码就能达到效果： $(".no-touch a[data-toggle=lightbox]").lightbox()

Microsoft.jQuery.Unobtrusive.Validation

这个用以客户端验证功能，安装成功之后要确保在VIEW里面引用对应的js文件，一般我们在 BundleConfig.cs里面配置，在 Layout 页面统一输出。它会自动安装 jQuery.Validation 包。它基本的作用是对 jQuery.Validation 和 mvc 验证模型进行整合。安装完成后需确保 Bundle 中对它提供的 js 文件进行引用

1
2
3
4


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

另外 web.config 中 appSettings 的 ClientValidationEnabled 也要打开:

1

<add key="ClientValidationEnabled" value="true" />;

客户端预验证可能有效减掉Server负载。

Microsoft.jQuery.Unobtrusive.Ajax

此包为 @Ajax.BeginForm 提供客户端支持，没它这个包，AjaxHelper 无法正常工作。所以，安装，添加 bundle 引用就可以了。

我得吐槽一下这个 js 库设计不是很好，本身不够灵活，也没办法扩展，显然作者是头驴。事件绑定只能是 string 常量，然后它通过一个 getFunction 函数去循环取得 Function, 最后对 Function 调用，也就是说没办法动态对 ajax form 的 ajax 事件进行调阅。公共类库你能不能灵活点，不要用 getAttibute(‘data-ajax-success’) 用 $.data(‘ajax-success’) ，然后 getFunction 给别人改写的机会不要放在闭包里面！

Contents