概述
Razor是微软在MVC3时引入的视图引擎的名称,在MVC4中进行了修订,但改动很小。视图引擎的作用是处理ASP.NET的内容并寻找其中的指令,将动态内容插入到响应中。
微软维护了两种视图引擎。一种是使用了多年的ASPX引擎,使用的标签是<%%>。另一种就是本文要介绍的Razor,它使用@符号。
一般来说,Razor是和MVC紧密联系在一起的。但在ASP.NET 4.5中,这种视图引擎也可以为Web Pages开发提供支持。
创建Example
定义Model,代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MartinMvc.Models { public class Product { public int ProductID { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string Category { get; set; } } }
定义Controller:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MartinMvc.Models; namespace MartinMvc.Controllers { public class ProductController : Controller { // // GET: /Product/ Product myProduct = new Product { ProductID =1, Name="Martin", Category = "A boat", Description = "WaterSprots", Price = 275M }; public ActionResult Index() { return View(myProduct); } } }
这里定义了一个Index的action,调用View()时没有指定View的名称,那么系统会使用默认的View。
在Index的action上点击右键,选择“Add View...”,在弹出的界面中选择“Create a strongly-typed view”,如下图:
点击“Add”后得到下面的页面:
@model MartinMvc.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>
在具体学习Razor前,有一点要牢记心中,那就是,视图的作用就是将模型的一个或多个部分信息展示给用户。也就是说,最后生成的页面中的数据来自于模型。
使用Model Object
首先看视图中的第一行:
@model MartinMvc.Models.Product
Razor表达式起始于@符号。在这里@model定义了从action传送给view的model object。我们可以通过@Model像使用普通的Product对象一样来操作,比如得到它的属性,调用它的方法。比如:
@model MartinMvc.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @Model.Name </div> </body> </html>
执行该页面,可以在页面上看到action传递给view的product的Name属性值。
使用了@model表达式后,我们告诉MVC使用的是什么类型的对象,然后MVC会在我们使用@Model的属性或方法时给出提示,就像在后台代码中使用一样。
使用Layouts
看下面的语句。
@{
Layout = null;
}
这是一个Razor代码块,允许我们在其中编写C#代码。开始于@{,结束于}。
从上面的代码可以看到,我们定义了Layout属性为null。在MVC应用程序中,Razor View最终是编译成C#类的,而它的基类定义了一个Layout属性。这些后续文章会介绍。将Layout设置为null就是告诉MVC,这个View是自包含的。
在真实的项目中会有很多View,我们一般希望在这些整个Web页面上保持一致性。这时,Layout作为一个模板就可以发挥很大的作用。它可以定义各个页面需要的JS库,定义一致的页面风格,这和母版页的作用一致。
创建Layout
要创建一个Layout,在Views文件夹上右键,选择“Add New Item”,然后选择“MVC 4 Layout Page(Razor)”。
我们会发现创建的Layout文件名是以“_”开头的。这是因为在Views文件夹中有两类文件,一类是返回给用户的,一类是帮助文件不直接返回给用户,Layout就属于帮助文件。
一个简单的Layout代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>
@RenderBody()部分会插入action方法指定的视图内容。还有一个@ViewBag在这里是为了设置页面Title,@ViewBag.Title的值可以在每个View中自定义。
设置Layout
为了把Layout设置到我们的View,我们只需要定义View中的Layout属性。
设置了Layout的View如下:
@model MartinMvc.Models.Product
@{
Layout = "~/Views/_Layout.cshtml";
ViewBag.Title = "Product Name";
}
Product Name: @Model.Name
这里可以看出Layout的两个好处。一个是可以简化我们的View,二是假如要改变所有View的布局或风格,我们只需要修改Layout。
使用视图起始文件(View Start File)
如果我们的每个View都设置使用了Layout,当需要换一个Layout时,就需要修改每个View,这样枯燥乏味的工作让人厌倦。幸运的是,我们有视图起始文件。当渲染一个View时,MVC会寻找一个_ViewStart.cshtml。这个文件中的内容会被认为包含在每一个View中,我们可以在这里为所有View设置Layout。
下面是视图起始文件的内容:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
非常简单,只是设置了Layout。相应的,我们可以把别的View中设置的Layout代码去除。
MVC会自动寻找这个文件并使用其中的内容。我们在View中设置的内容可以覆盖这里设置的内容,就像子类方法覆盖基类方法。
演示Shared Layout