本篇文章我们一起来讨论ASP.NET MVC框架中的Razor视图引擎。主要包含以下内容:
1. Razor简介
2. Razor语法
3. Razor如何呈现页面
4. 布局页(Layout)
Razor简介
Razor是微软在ASP.NET MVC3中加入的新的视图引擎,由于Razor简单易用并且功能强大,迅速得到了大家的认可。但是,为了兼容以前的代码,之前的ASPX视图引擎(或称为Web Forms 视图引擎)还可以继续使用。
需要说明的是,在一个组织良好的ASP.NET MVC项目中,Action和View是有明确的分工的。Action方法负责获取数据并传递给View,但不关心如何来呈现数据。View负责如何呈现数据,但不关心数据从哪里来,更不直接调用相关的业务方法来直接获取数据。
Razor语法
在行内嵌入一个表达式
<p>现在是 @DateTime.Now.ToString()</p>
<p>今年是 @DateTime.Now.Year 年</p>
嵌入一个代码段
@{
string myString="hello,world";
int year=DateTime.Now.Year;
}
在这个代码段中可以声明变量,这些变量在这个视图的任何位置都可以访问,例如
<p>@myString</p>
<p>今年是 @year 年</p>
嵌入循环或判断
<td>
@if (ViewBag.ProductCount == 0) {
@:Out of Stock
} else if (ViewBag.ProductCount == 1) {
<b>Low Stock (@ViewBag.ProductCount)</b>
} else {
@ViewBag.ProductCount
}
</td>
注意: 在逻辑语句中,’@:’可以用来直接输出纯文本
<tbody>
@foreach (Product p in productList) {
<tr>
<td>@p.Name</td>
<td>$@p.Price</td>
</tr>
}
</tbody>
引用命名空间
如果需要在视图中引用某个命名空间,可以
@using System.IO
强类型视图
如果一个视图被定义成强类型的,通过下面的方式来指定:
@model Razor.Models.Person
指定为强类型视图后,该视图中便可以通过@Model来接受Action传递过来的对象,例如:
<td>@Model.Name</td>
<td>@Model.Age</td>
Action方法返回强类型视图的方式如下
public ActionResult GetPerson() {
Person person=new Person();
person.Name="Tom";
person.Age=23;
return View(person);
}
Razor如何呈现页面
为了提高性能,在Razor视图被首次被请求时,Razor视图引擎会编译这个视图,将cshtml视图编译为C#代码,将vbhtml编译为VB代码,这些编译过的代码负责输出HTML标签和其他标签给浏览器。这就是为什么我们可以方便地在视图页面嵌入C#代码的原因。编译后的代码大概是这个样子的
namespace ASP {
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Helpers;
using System.Web.Security;
using System.Web.UI;
using System.Web.WebPages;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Web.Mvc.Html;
using System.Web.Optimization;
using System.Web.Routing;
public class _Page_Views_Home_Index_cshtml : System.Web.Mvc.WebViewPage<string[]> {
public _Page_Views_Home_Index_cshtml() {
public override void Execute() {
ViewBag.Title = "Index";
WriteLiteral("\r\n\r\nThis is a list of fruit names:\r\n\r\n");
foreach (string name in Model) {
WriteLiteral(" <span><b>");
Write(name);
WriteLiteral("</b></span>\r\n");
}
}
}
我们可以看出来,这个类继承自System.Web.Mvc.WebViewPage< T>,强类型的视图应该是这么实现的。还能看出WriteLiteral这个方法会向浏览器输出HTML标签。
至于编译后的文件的存放位置,在ASP.NET MVC3时,还能在Temp文件夹中找到.cs文件,在MVC4时就不知道去哪里了,可能新的Razor视图引擎在编译完成以后会删除源文件吧。不管怎么样,这个不重要,不影响Razor视图引擎的正常工作。
布局页(Layout)
Layout比较类似于WebForm中的母版页,可以很轻松地是网站拥有相似的外观,并且很好地提高了代码的内聚性。
创建布局页
右击Views文件夹或Views的子文件夹,选择 ”添加“=>”新建项“=>”MVC4 布局页”,然后输入名字点击确定,布局页就创建好了,代码如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
当其它视图使用该布局页时,会将代码嵌入到该布局页的 @RenderBody 处。
使用布局页
在视图中指定使用的布局页
@{
Layout="MyLayout";
}
使用View Start文件
一般情况下,一个布局页会被很多视图使用,如果手动设置每个视图的Layout属性,会很麻烦,并且出现了重复代码,不利于重构。MVC框架在呈现一个视图之前,会先在Views文件夹中查找一个名叫_ViewStart.cshtml的文件,这个文件会被认为是视图文件的一部分。一般在这个文件中指定一个默认的Layout页面,如果视图文件不专门对Layout属性赋值的话,该视图就默认采用ViewStart文件中的布局页。当然,视图页面可以通过以下方式来指定该视图不使用布局页或使用其它布局页
不使用布局页
@{
Layout=null;
}
使用其它布局页
@{
Layout="OtherLayoutPath";
}
如果在新建MVC项目是选择”Internet应用程序“这个模板,那么项目模板会在Views文件夹下包含一个名为_ViewStart.cshtml的文件,代码如下
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}