博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跟我一起学习ASP.NET 4.5 MVC4.0(六)
阅读量:5160 次
发布时间:2019-06-13

本文共 5534 字,大约阅读时间需要 18 分钟。

原文

这一系列文章跨度有点大,由于最近忙于其他事情,没有更新,今天重新安装了下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:

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

MVC4:

<
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还有很多值得我们去挖掘,由于我不是一个专业的学术研究者,写的文章不够有条理,思路都是想到那些到哪,没有时间来规范这个从易到难或什么的来书 写,给各位带来不好的浏览效果表示歉意。

 

 

关于作者:网魂小兵

文章出处:

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

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

 
posted on
2012-10-30 21:25 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/lonelyxmas/archive/2012/10/30/2747062.html

你可能感兴趣的文章
JS调用后台方法大全
查看>>
一种脱离VC编程软件的方法学习C/C++编程(搭建EditPlus实现在文本编辑框中执行.c文件...
查看>>
软硬件之共生之道——一千零一夜的启发
查看>>
(一一二)图文混排中特殊文字的点击与事件处理
查看>>
iPhone开发经典语录集锦 (转)
查看>>
SVM基础必备常识
查看>>
FPGA时序约束的几种方法 (转)
查看>>
cocos2dx 3.x tolua 分析
查看>>
oracle 外网访问
查看>>
jdbc连接数据库方式问题
查看>>
一步一回头撞在了南墙上
查看>>
POJ2965 The Pilots Brothers' refrigerator
查看>>
C# 2.0 中的新增功能01 分布类与分部方法
查看>>
关于腾讯ip接口一个流传很广的错误用法
查看>>
XMU 1056 瞌睡 vs 听课 【动态规划】
查看>>
openlayers3中应用proj4js
查看>>
java 浅拷贝和深拷贝
查看>>
对于数组排序类算法的终极解决方案
查看>>
Android 学习 豆瓣学习 sd卡缓存 内存缓存 下拉刷新 日志编辑等
查看>>
如何配置git send-email相关的邮箱信息?
查看>>