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

这一系列文章跨度有点大,由于最近忙于其他事情,没有更新,今天重新安装了下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还有很多值得我们去挖掘,由于我不是一个专业的学术研究者,写的文章不够有条理,思路都是想到那些到哪,没有时间来规范这个从易到难或什么的来书写,给各位带来不好的浏览效果表示歉意。

时间: 2024-10-26 15:52:00

跟我一起学习ASP.NET 4.5 MVC4.0(六)的相关文章

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

今天我们继续ASP.NET 4.5 MVC 4.0,前两天熟悉了MVC4.0在VS11和win8下的更新,以及MVC中的基础语法和几个关键字的使用.了解了这些就可以对MVC进一步认识,相信很多人都对MVC中三个模块有一定的认识.今天我们主要来看一下Models模块,这个和我们三层里用的实体类有点相似,不同的是这里的属性需要添加一些验证属性(Attribute)或其他的一些Filter(过滤器).在MVC中验证属性主要包含在System.ComponentModel.DataAnnotations

学习ASP.NET Core Razor 编程系列七——修改列表页面

学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C

学习ASP.NET Core Razor 编程系列九——增加查询功能

学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C

学习ASP.NET Core Razor 编程系列十——添加新字段

学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解 在本章中,我们研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打开Models\Movie.cs 文件.先添加一个引用: <span style="font-size:14px;">using System.ComponentModel.DataAnnotations;</span> 然后在Movie类中添加以下代码: [Display(

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据 在本章中,我们将新建一个MoviesController 控制器,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. 在进行下一步之前,你需要先编译应用程序,否则在添加控制器的时候会出错. 在解决方法资源管理器的Controllers文件夹右键,选择"添加">"新建搭建基架项": 在"添加支架"对话框,选择 包含视图的MVC 5控制器(使用 En),然后单击

学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序

首先运行Visual Studio Express 2012或Visual Web Developer2010 Express或Visual Studio2010/SP1.Visual Studio是一个集成开发环境. 可以使用两种方式来创建新项目. 1) 菜单"文件->新建-->项目"来新建项目. 2) 第二种方法是从开始页面中选择"新建项目",如下图. 创建第一个ASP.NET MVC应用程序 接下来创建我的第一个ASP.NET MVC应用程序,在创

学习ASP .NET MVC5官方教程总结(八)搜索查询

学习ASP .NET MVC5官方教程总结(八)搜索查询 在本节中,我们为 Index 方法添加查询功能,使我们能够根据电影的题材或名称进行查找. 首先,我们需要更新 MoviesController 的 Index 方法,代码如下: public ActionResult Index(string searchString) { var movies = from m in db.Movies select m; if (!String.IsNullOrEmpty(searchString))

(转) 一步一步学习ASP.NET 5 (二)- 通过命令行和sublime创建项目

转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 注:昨天转发之后很多朋友指出了vNext的命名问题,原文作者已经做出了修改,后面的标题都适用 asp.net 5这个名称. 编者语 : 昨天发了第一篇文章,再次谢谢大家给的意见和反馈,这里说明因为现在ASP.NET 5还在beta阶段,很多的不确定性,我会不断修正,说不定正式版本也会有改,这里我还是要吐槽微软改名字....我尊重算了.        今天跟大家说说如何创建你的ASP.NET 5项目.或者用惯了Visual Studio 的模版