（转）Asp.Net Mvc视图引擎Razor介绍

Asp.Net Mvc视图引擎Razor介绍

1.Razor介绍

程序园原创，转载请注明：http://www.kwstu.com/ArticleView/dabaomvc_201408240820545275

1）ASP.NET MVC3 带来了一种新的名为Razor 的视图引擎，提供了下列优点：

• Razor 的语法简单且清晰，只需要最小化的输入
• Razor 容易学习，语法类似于 C# 和 VB
• Visual Studio 对于 Razor 提供了智能提示和语法着色
• Razor 视图不需要允许程序或者启动 Web 服务器就可以进行测试

2）Razor 现在提供了一些新的特征：

• @model 用来指定传到视图的 Model 类型
• @* * 注释语法
• 对于整个站点可以一次性设定默认项目，例如布局。
• Html.Raw 方法提供了没有进行 HTML 编码的输出
• 支持在多个视图之间共享代码 ( _viewstart.cshtml 或者 _viewstart.vbhtml )

3）Razor 还包含新的 HTML Helper，例如：

• Chart. 生成图表
• WebGrid, 生成数据表格，支持完整的分页和排序
• Crypto，使用 Hash 算法来创建 Hash 和加盐的口令
• WebImage, 生成图片
• WebMail, 发送电子邮件

2.Razor的文件类型

　　Razor支持两种文件类型，分别是.cshtml 和.vbhtml，其中.cshtml 的服务器代码使用了c#的语法，.vbhtml 的服务器代码使用了vb.net的语法。

　　由此也可以看出，Razor其实是一种服务器代码和HTML代码混写的代码模板，类似于没有后置代码的.aspx文件。

3.Razor语法之@符号

@字符是Razor中的一个重要符号，它被定义为Razor服务器代码块的开始符号。如果我们希望在网页中输出一个变量，或者当前日期，我们可以使用如下代码：

@{string productName = "台灯";}    
<span>@productName</span>    
<span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

当你在完成这段代码的时候，你会发现VS 2012为我们提供了代码着色和智能感知：

运行这段代码，让我们看看浏览器的显示内容：

有这个示例可以看出，@符号标记了一个HTML代码的输出，在其后的变量、方法返回值和表达式运算结果会进行输出。

4.Razor语法之代码块定义

你可以使用@{code}来定义一段代码块。

@{    int num1 =10;  
  int num2 =5;    
 int sum = num1 + num2;    
@sum;}

在代码块中，我们编写代码的方式和通常服务器端代码的方式是一样的。另外，如果需要输出，例如上面的在页面中输出结果，我们可以使用@sum完成输出

另外，@(code)可以输出一个表达式的运算结果，上面的代码我们也可以写成这样：

@{       
int num1 =10;   
int num2 =5;         
int sum = num1 + num2;        
@(num1 +num2);    
}

5.Razor语法之代码混写

Razor支持代码混写。在代码块中插入HTML、在HTML中插入Razor语句都是可以的。

@{    
int num1 =10;    
int num2 =5;     
int sum = num1 + num2;    
string color ="Red";    
<font color="@color">@sum</font>
}

值得称赞的是，即使我们这样混写，也不影响VS2012的智能感知功能。

• 输出@符号：@@
• 输出Email地址：Razor模板会自动识别出Email地址，所以不需要我们进行任何的转换。而在代码块中，只需要使用 @:Tom@gmail.com 即可。@:表示后面的内容为文本。
• 输出HTML代码（包含标签）：直接输出，string html = "<font color='red'>文本</font>"; @html
• 输 出HTML内容（不包含标签）：有两种方法，第一种：IHtmlString html=new HtmlString("<font color='red'>文本</font>"); @html; 第二种：string html = "<font color='red'>文本</font>"; @Html.Raw(html);

6.Razor语法之注释

　　这里所说的注释是指服务器端的注释，在Razor代码块中，可以使用C#的注释方式来进行注释，分别是//:（单行注释）和/**/（多行注释）。

　　另外，Razor还提供了一种新的服务器段代码注释，可以即注释C#代码，同时可以注释HTML代码，@**@，这种注释方式不受代码块的限制，在Razor代码中的任何位置都额可以。

    @*    这是一个注释    <b>这个是注释</b>    *@

7.Razor布局 

ASP.NET MVC3中新增的 Razor 视图引擎有很多的优势，本篇将简单的介绍下 MVC3 中 Razor 视图引擎中页面布局。

使用 Razor 视图引擎，我们会发现不同于 .ASPX 视图，它没有使用母板页。下边我们看看 Razor 布局技术，首先看看我们项目中的公共视图，如下：

可见，我们分别定义了页面的页头、页脚等，Razor 中布局是非常简单的，类似我们以前使用的include加载方法。首先，我们看看"_layout.cshtml"中的代码，它类似于"ASPX"视图引擎中的母版页，如下：

第4行中，使用了ViewBag.Title，这样我们可以在各视图页指定各页面标题的名称，同理第8行指定body 的 id。如在Home页中：

第10行、21行使用了HtmlHelper.Partial()方法，分别将页头和页脚的局部视图加载进来，也没有太多可说的。16行中 RenderBody()将各视图页的主体部分全部加载了进来，这样我们在"_layout.cshtml"页中完成了我们页面的布局，达到了复用的目 的。最后在"_ViewStart.cshtml"中指定 Layout为我们定义的"_layout.cshtml"页，当然，我们还可以在"_ViewStart.cshtml"中根据需要加载不同的布局。

以上这些是 Razor 中基本的布局方法，很明显，如果复用的部分并不是静态的内容，想想我们在WebForm中使用的自定义控件。那么我们怎样在 Razor 视图中实现自定义控件一样的效果呢？在第18行中我们就实现了这个目的，下边就让我们看看，首先，我们在项目中添加了 App_Code 文件夹，并添加了名为“Latest.cshtml”的文件，如下：

接下来，我们使用helper类来定义了一个名为“Lastest()”的方法(方法名没取好)，用来显示我们最近发表的文章，我这里并没有具体的实现，而是取出了所有的文章，下图为方法定义：

最后，我们在需要显示的页面中调用这个方法即可。所以我在"_Layout.cshtml"页中调用了这个方法，如第18行。