即使是写代码的本人，闭合也是一件麻烦的事情，并且VS对”“的自动缩进和对齐支持不很友好，看惯了整齐的代码，面对自己写出的凌乱的东西会很不爽。

看下面一段MVC 2.0的代码。

 

 %if (Model != null)  {%   p %＝Model% /p   %}%   %else  {%  //Do something   %}%  

 

们站在一个读者的立场上来看， % % 这种标记C#代码的方法是十分蛋疼的。

 

如果写这段代码的人没有良好的缩进和对齐习惯的话，一段逻辑较为复杂的代码就会堆砌着杂乱无章的 % 和 % --匹配它们就是一件头疼的事情，会让读者望而生畏。

 

即使是写代码的本人，闭合也是一件麻烦的事情，并且VS对 % % 的自动缩进和对齐支持不很友好，看惯了整齐的代码，面对自己写出的凌乱的东西会很不爽。

 

随着MVC 3.0的发布，新的Razor视图引擎解决了这个问题。

 

Razor的意思的就是 剃刀，可见它灰常犀利。引言中的代码，们用Razor的语法来写的话:

 

@if (Model != null)  {   p @Model /p  }  else  {  //Do something   } 

 

Razor使用了 @ 来标记一段C#代码，并帮们进行了内部的闭合，是不是感觉清爽多了?

 

Razor在减少代码冗余、增强代码可读性和vs 智能感知方面，都有着很大的优势。下面们来具体的介绍如何在ASP.NET MVC 3.0中使用Razor。

 

一，创建基于Razor的Web程序

 

首先开发环境必须安装.NET Framework4.0，然后在VS中新建项目时选择ASP.NET MVC 3 应用程序，在选项页面中选择视图引擎为Razor，如图1:

 

图1

 

然后创建项目，就会得到一个基于Razor的Web项目了，如图2。

 

图2

 

相信熟悉MVC的看官们对此结构并不陌生。注意红框部份，Razor的页面是以cshtml为后缀的，下面们来讲下如何使用Razor来进行页面布局。

 

二，使用Razor来进行页面布局

 

UI设计师们现在也讲究页面设计的语义化和结构化，把一个页面分成很多个模块，使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。

 

这里涉及到Razor的一些语法，大家可以不深究 @ 后面的内容，讲到页面布局，你只要专注与HTML代码就可以了。语法会在后面补充。

 

1.指定母版与加载机制

 

首先们来看_ViewStart.chhtml页面，它的内容很简单:

 

@{  Layout =  ~/Views/Shared/_Layout.cshtml ;  } 

 

这句代码指定了默认的母版的位置: 当前应用程序根目录下 ~ 的含义 的Views/Shared/_Layout.cshtml

 

除非特殊情况，比如视图是Partial视图，或显示的在视图中添加以下代码指示不使用母版:

 

@{  Layout = null;  } 

 

其他情况下，该指定页就是视图的母版页。

 

然后们来看看Razor母版页_Layout.cshtml的内容:

 

 !DOCTYPE html   html   head   meta http-equiv= Content-Type  content= text/html; charset=utf-8 /   title @ViewBag.Title /title   link href= @Url.Content( ~/Content/Site.css )  rel= stylesheet  type= text/css  /   script src= @Url.Content( ~/Scripts/jquery-1.5.1.min.js )  type= text/javascript /script   /head   meta http-equiv= Content-Type  content= text/html; charset=utf-8 /   body   div  >

注意@RenderBody()这个方法相当于一个占位符，假如们的首页视图Index.cshtml是这样，

@{  ViewBag.Title =  主页 ;  }   h2 @ViewBag.Message /h2   p  若要了解有关 ASP.NET MVC 的更多信息，请访问  a href= http://asp.net/mvc  title= ASP.NET MVC 网站 http://asp.net/mvc /a 。   /p  


一般的视图处理，比如当服务器响应一个HomeController.Index()请求的时候,需要返回Index视图，


首先会加载母版页_Layout.cshtml的内容，遇到@RenderBody()时，就用首页视图的内容置换到这里，最后处理完成返回静态页面。


2.使用Partial视图


MVC 2.0中，你需要使用 asp:Content /asp:Content 标签来进行页面分割，太多的话自己都忘记了哪个对应的是哪个部份。


在Razor中，可以将需要剥离出来的部份作为一个单独的Partial视图，比如网站的头部(Logo，导航等等..)，底部(友情链接，版权声明等等..)，或是某个功能模块(登陆框等等..)。


比如上面的母版页，们可以把它的头部和底部剥离出来，在Share文件夹下右键添加/视图,选择创建为分部视图，如图3:


图3


依照上述步骤创建 _HeaderPartial.cshtml 和 _FooterPartial.cshtml 两个视图


 !--_HeaderPartial.cshtml-- div id= header   div id= title   h1  MVC 应用程序 /h1   /div   div id= logindisplay  欢迎  strong @User.Identity.Name /strong !   /div   div id= menucontainer   ul id= menu   li @Html.ActionLink( 主页 ,  Index ,  Home ) /li   li @Html.ActionLink( 关于 ,  About ,  Home ) /li   /ul   /div   /div  


 !--_FooterPartial.cshtml-- div id= footer    2008-2015 John Connor All rights reserved.   /div  


可以看出，提取Partial视图很简单，就是把需要的内容提取出来，放在新建的Partial视图中。然后，们还需要干一件事情，


类似于一般视图，Partial视图使用自己特有的占位符来替换原内容。们这么干之后，原_Layout.cshtml页就变成了这样:


 !DOCTYPE html   html   head   meta http-equiv= Content-Type  content= text/html; charset=utf-8 /   title @ViewBag.Title /title   link href= @Url.Content( ~/Content/Site.css )  rel= stylesheet  type= text/css  /   script src= @Url.Content( ~/Scripts/jquery-1.5.1.min.js )  type= text/javascript /script   /head   meta http-equiv= Content-Type  content= text/html; charset=utf-8 /   body   div  >

这样，页面的布局是不是更清爽简洁了?如同一般视图，返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图，最后返回处理完成的静态页面。

三，Razor语法简介与应用

1.语法简介

如果们希望在HTML代码中绑定数据，比如说们有一个产品的对象Product，需要绑定产品的名称Product.Name，只需要在变量前面加 @ 即可，

也可以使用 @(expression) 绑定一个表达式:

 p @Product.Name /p   p @(Product.Price*0.8) /p  


Razor中使用 @{code} 来标识一段C#代码,代码段可以出现在任何位置，并且支持与HTML混写:


@｛  var product=new product();  product.Name= pen ;  product.Price=1.00;  p @product.Name /p   p @product.Price /p ｝ 


使用循环或条件语句时直接加 @ 前缀，可以控制页面逻辑:


@foreach(var product in products)  ｛   p @item.Name /p  ｝ 


Razor中注释是 @**@ ,即可以注释Html代码，也可以注释C#代码,在代码块中仍可使用C#的注释方式:


@{  var product=new product();  product.Name= pen ;  //product.Price=1.00;   p @product.Name /p  @* p @product.Price /p *@  } 


2.ASP.NET MVC3.0 Web中的应用


假设们有一个Product类位于JohnConnor.Data命名空间下,有Name和Price两个属性，HomeController.Index()方法返回一个List Product 对象给Index视图，打印所有产品名称，并且点击产品名称时，弹出产品价格。


HomeController.Index()方法如下:


using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.Mvc;  using JohnConnor.Data;  namespace JohnConnor.Web.Controllers  {  public class HomeController : Controller  {  public ActionResult Index()  {  var products = new List Product ()  {  new Product{ Name= 钢笔 , Price=11.55M},  new Product{ Name= 铅笔 , Price=2.17M},  new Product{ Name= 圆珠笔 , Price=5.98M},  };  return View(products);  }  }  } 


们来改一下Index视图演示一下Razor的简单应用。


@using JohnConnor.Data;  @model List Product  @{  ViewBag.Title =  主页 ;//母版中ViewBag.Title用于绑定Title标签，这里进行赋值。  }   h2 Razor /h2  @foreach (var product in Model)  {  //遍历所有的产品   input type= button  name= @product.Name  value= @product.Name  onclick= alert(@product.Price)  /  } 


在一般视图中，首先声明视图模型，即Action返回的ViewResult对象的类型 也可以不声明，如果有返回对象建议声明 。


这里的视图模型是一个List Product 集合，因为Product位于using JohnConnor.Data命名空间，所以先添加了引用。


在母版中ViewBag.Title用于绑定Title标签，在一般视图中就可以进行赋值来绑定页面的Title 。


如果你不想使用母版，就在代码块中添加 Layout = null; 。


最后是就是一些数据绑定，或者是逻辑的处理。


Razor的基本内容大概就讲这些了，当然它还有很丰富的底蕴，需要在实际的运用过程中去学习，一篇短文是无法涵盖所有信息的。


最后提一点，Razor暂时没有设计视图，这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题，可以在此提出，能力范围内的问题都可以提供帮助。