开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

跟我一起学习ASP.NET 4.5 MVC4.0(六)

简介: 原文http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 这一系列文章跨度有点大,由于最近忙于其他事情,没有更新,今天重新安装了下Win8系 统,VS2012和SQLServer 2012,顺便抽空继续一篇。
+关注继续查看
福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

原文http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html

这一系列文章跨度有点大,由于最近忙于其他事情,没有更新,今天重新安装了下Win8系 统,VS2012和SQLServer 2012,顺便抽空继续一篇。随着VS2012 RC版本的放出,ASP.NET MVC4.0也随之有所改变,主要相对于BETA版本。前面几章节都是介绍MVC4.0或者是3.0中内容,今天我们来了解一下WebPage 2.0下面的一些变化。在MVC3.0中使用的是WebPage 1.0版本,这里主要是介绍一下在MVC4.0中对脚本以及样式表的引用变化等等。

?

一、可以直接使用“~”,而无需使用href对象实例

这个是一大变化,给我们ASP.NET MVC开发人员带来了很便捷的代码书写方式,提高不少效率。在MVC3.0中加入我们需要加入一张图片时,需要在IMG标签的SRC属性加上 Url.Content或href对象方法等来对路径进行解析。在WebPage 2.0中Razor模板引擎能够自动解析基于根目录的路径,即可以直接使用“~”来表示根目录。

?MVC3:

<a?href="@href("~/Default.cshtml")">Home</a>?

MVC4:

<a?href="~/Default.cshtml">Home</a>

?

?

二、CheckBox等可以根据Value自动隐藏checked属性

?在以前初始化一个CheckBox是否被选中,都需要额外写一个方法来判断是否在INPUT的CheckBox中加入checked属性。在MVC4.0中这个将被改变,这也是一个很赞的改进,具体可以看如下代码。

MVC3:

?1?<input?type="checkbox"

2?name="check1"
3?value="check1"
4?@if(checked1){<text>checked="@checked1"</text>}?/>

MVC4:

?1?<input?type="checkbox"

2?name="check1"
3?value="check1"
4?checked="@checked1"?/>

?只要checked1变量为false或null,将会隐藏checked属性,是不是一个很好的改进!!

?

三、使用System.Web.Optimization对脚本和样式表的操作

这个也是本章重点向描述的部分,首先我们可以使用VS2012RC来新建一个MVC4.0项目,版本可以为4.0或4.5。在 Global.asax文件代码中,我们发现已经把过滤器,路由器,以及对样式表和脚本捆绑(Bundles)移到了其他页面,就是在根目录下的 App_Start文件夹内。代码只是简简单单的几行,代码如下:

复制代码
?1?using?System;
?2?using?System.Collections.Generic;
?3?using?System.Configuration;
?4?using?System.Data.Entity;
?5?using?System.Data.Entity.Infrastructure;
?6?using?System.Linq;
?7?using?System.Web;
?8?using?System.Web.Http;
?9?using?System.Web.Mvc;
10?using?System.Web.Optimization;
11?using?System.Web.Routing;
12?
13?namespace?MVC4
14?{
15?????//?Note:?For?instructions?on?enabling?IIS6?or?IIS7?classic?mode,?
16?????//?visit?http://go.microsoft.com/?LinkId=9394801
17?
18?????public?class?MvcApplication?:?System.Web.HttpApplication
19?????{
20?????????protected?void?Application_Start()
21?????????{
22?????????????AreaRegistration.RegisterAllAreas();
23?
24?????????????FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
25?????????????RouteConfig.RegisterRoutes(RouteTable.Routes);
26?????????????BundleConfig.RegisterBundles(BundleTable.Bundles);
27?????????}
28?????}
29?}
复制代码

而在App_Start目录下多了3个文件,他们分别是RilterConfig.cs,RouteConfig.cs以及 BundleConfig.cs文件。在BETA版本中还是直接写在Global.asax文件中,从名称上就可以知道他们各自的功能,今天我们主要了解 BundleConfig.cs文件的内容和功用。

?

在BundleConfig.cs文件中,包含了一些应用程序中使用的脚本和样式表的文件路径,其中可以使用通配符,具体代码如下所示:

复制代码
?1?using?System.Web;
?2?using?System.Web.Optimization;
?3?
?4?namespace?MVC4
?5?{
?6?????public?class?BundleConfig
?7?????{
?8?????????public?static?void?RegisterBundles(BundleCollection?bundles)
?9?????????{
10?????????????bundles.Add(new?ScriptBundle("~/bundles/jquery").Include(
11?????????????????????????"~/Scripts/jquery-1.*"));
12?
13?????????????bundles.Add(new?ScriptBundle("~/bundles/jqueryui").Include(
14?????????????????????????"~/Scripts/jquery-ui*"));
15?
16?????????????bundles.Add(new?ScriptBundle("~/bundles/jqueryval").Include(
17?????????????????????????"~/Scripts/jquery.unobtrusive*",
18?????????????????????????"~/Scripts/jquery.validate*"));
19?
20?????????????bundles.Add(new?ScriptBundle("~/bundles/modernizr").Include(
21?????????????????????????"~/Scripts/modernizr-*"));
22?
23?????????????bundles.Add(new?StyleBundle("~/Content/css").Include("~/Content/site.css"));
24?
25?????????????bundles.Add(new?StyleBundle("~/Content/themes/base/css").Include(
26?????????????????????????"~/Content/themes/base/jquery.ui.core.css",
27?????????????????????????"~/Content/themes/base/jquery.ui.resizable.css",
28?????????????????????????"~/Content/themes/base/jquery.ui.selectable.css",
29?????????????????????????"~/Content/themes/base/jquery.ui.accordion.css",
30?????????????????????????"~/Content/themes/base/jquery.ui.autocomplete.css",
31?????????????????????????"~/Content/themes/base/jquery.ui.button.css",
32?????????????????????????"~/Content/themes/base/jquery.ui.dialog.css",
33?????????????????????????"~/Content/themes/base/jquery.ui.slider.css",
34?????????????????????????"~/Content/themes/base/jquery.ui.tabs.css",
35?????????????????????????"~/Content/themes/base/jquery.ui.datepicker.css",
36?????????????????????????"~/Content/themes/base/jquery.ui.progressbar.css",
37?????????????????????????"~/Content/themes/base/jquery.ui.theme.css"));
38?????????}
39?????}
40?}
复制代码

这些都是关于Bundle的应用,从代码中就可以看到,Bundle实例对象(Script和Style)中包含一个虚拟目录,这个目录可以在页面 中使用时作为唯一键引入。当然在实现优化时,这个虚拟目录将呈现在前台页面中,这个后面将继续讲述。下面我们来看一下在代码中如何使用他们,在 System.Web.Optimization程序集中包含了Scripts和Styles两个类,分别用于呈现Bundle集合中的脚本和样式表,代 码如下:

1?????????@Styles.Render("~/Content/themes/base/css",?"~/Content/css")
2?????????@Scripts.Render("~/bundles/modernizr")

从上面就可以看出,往页面中引入了两个捆绑的样式表和一个脚本,这些引入是包含了所有Include方法内的文件,调试一下看看前台HTML代码就知道了。而他们中的另一个方法Url则是对外部文件的引入,例如CDN中的文件,如:Google等等API文件。

?

四:对样式表和脚本的优化

这项其实也是包含在三中的,我独立出来,最主要感觉是我觉得他是个不错的家伙。代码简单,但是非常的适用,不知道大家有没有使用过 AjaxMinify这个东东,可以把脚本编译,压缩成最小的内容。不过都是要使用命令的,然而在MVC4.0中 System.Web.Optimization已经包含了这个东东,他们就是JsMinify和CssMinify,不要小看这两个类,虽然公开的方法 就两个。

按照上述方法是用Scripts和Styles将脚本和样式表引入页面时,无需修改任何代码就可以将脚本和样式表编译压缩输入到客户端,这样不仅可 以有效的增加JSHack的难度以及降低文件的大小。为了达到这个目的,我们只需要将BundleTable中的一个属性设置为true即可,代码如下:

复制代码
?1?using?System;
?2?using?System.Collections.Generic;
?3?using?System.Configuration;
?4?using?System.Data.Entity;
?5?using?System.Data.Entity.Infrastructure;
?6?using?System.Linq;
?7?using?System.Web;
?8?using?System.Web.Http;
?9?using?System.Web.Mvc;
10?using?System.Web.Optimization;
11?using?System.Web.Routing;
12?
13?namespace?MVC4
14?{
15?????//?Note:?For?instructions?on?enabling?IIS6?or?IIS7?classic?mode,?
16?????//?visit?http://go.microsoft.com/?LinkId=9394801
17?
18?????public?class?MvcApplication?:?System.Web.HttpApplication
19?????{
20?????????protected?void?Application_Start()
21?????????{
22?????????????AreaRegistration.RegisterAllAreas();
23?????????????
24?????????????FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
25?????????????RouteConfig.RegisterRoutes(RouteTable.Routes);
26?????????????BundleTable.EnableOptimizations?=?true;
27?????????????BundleConfig.RegisterBundles(BundleTable.Bundles);
28?????????}
29?????}
30?}
复制代码

是不是很神奇啊,上面红色字体的就是我们要加入的一行代码。关于ASP.NET 4.5 MVC 4.0还有很多值得我们去挖掘,由于我不是一个专业的学术研究者,写的文章不够有条理,思路都是想到那些到哪,没有时间来规范这个从易到难或什么的来书 写,给各位带来不好的浏览效果表示歉意。

?

?

关于作者:网魂小兵

文章出处:http://xdotnet.cnblogs.com

本文可以随意转载,摘抄等非商业用途。

为了尊重作者成果,在转载和摘抄的时候请留下作者名称和出处。

?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
跟我一起学习ASP.NET 4.5 MVC4.0(一)
原文 : http://www.cnblogs.com/xdotnet/archive/2012/03/05/aspnet_mvc40_preview.html ? 由于上面一个项目使用的是ASP.NET4.0 MVC3.0,在招人的时候发现很多人有听说过MVC,但是却是没用过,对MVC也只是一知半解,最近想给团队成员做一个系统的解说,让大家都可以学习一 下ASP.NET MVC3.0。
1097 0
跟我一起学习ASP.NET 4.5 MVC4.0(二)
原文http://www.cnblogs.com/xdotnet/archive/2012/03/06/aspnet_mvc40_keywords.html 上一篇文章中(跟我一起学习ASP.NET 4.5 MVC4.0(一)) 我们基础的了解了一下ASP.NET MVC4.0的一些比较简单的改变,主要是想对于MVC3.0来说的。
972 0
跟我一起学习ASP.NET 4.5 MVC4.0(三)
原文 http://www.cnblogs.com/xdotnet/archive/2012/03/07/aspnet_mvc40_validate.html 今天我们继续ASP.NET 4.5 MVC 4.0,前两天熟悉了MVC4.0在VS11和win8下的更新,以及MVC中的基础语法和几个关键字的使用。
929 0
跟我一起学习ASP.NET 4.5 MVC4.0(四)
原文http://www.cnblogs.com/xdotnet/archive/2012/03/27/aspnet_mvc4_authorize.html 前几个文章中介绍了一些关于MVC4.0的东东,今天我们来看一下登陆验证,也可以说是 权限验证,即AuthorizeAttribute。
865 0
跟我一起学习ASP.NET 4.5 MVC4.0(五)
原文http://www.cnblogs.com/xdotnet/archive/2012/03/29/aspnet_mvc4_html_control_checkboxlist.html 前面几篇文章介绍了一下ASP.NET MVC中的一些基础,今天我们一起来学习一下在ASP.NET MVC中控件的封装。
913 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载


http://www.vxiaotou.com