认识Razor

简介

和众多的模版引擎一样,Razor也提供了诸如循环,条件判断,变量定义,方法调用等语法;

其实ASPX也是一种模版引擎,所以在asp.net mvc2中就是使用aspx作为模版引擎。

Asp、php、jsp(html+动态语言,内嵌进去一中语法)

aspx示例代码

<html>
<body>
<%for(int i=0;i<10;i++){%>
<img src="http://www.foxdevelop.com/on.jpg" />
<%}%>
</body>
</html>Code language: JavaScript (javascript)

本课程建立在mvc课程基础之上。

在 asp.net mvc3、4、5 以上版本,razor作为一种模版,直接集成到VS中,视图文件后缀为 .cshtml,项目中存在_ViewStart.cshtml文件。

开发工具

只需要安装了mvc3+的 VS2010+ 就能使用 razor。创建视图的时候,可以选择 aspx 或者 razor。

  • 本课环境:ASP.NET MVC4.5,开发工具 VS2015
  • 未安装MVC组件,可以到微软官网下载安装
  • 安装地址:http://go.microsoft.com/fwlink/?LinkId=210710.

文件类型

Razor支持两种文件类型:

  1. .cshtml:服务器代码使用C#语法
  2. .vbhtml:服务器代码使用 vb.net 语法

Razor本质:服务器代码和HTML混写的代码模板,类似于没有后置代码的.aspx文件。

布局页 _Layout.cshtml 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf‑8" />
    <meta name="viewport" content="width=device‑width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>Code language: HTML, XML (xml)

关键方法说明:

  • @RenderBody():渲染子页面主体内容
  • @RenderSection("scripts", required: false):渲染可选的scripts代码段
  • @Styles.Render / @Scripts.Render:捆绑包输出css、js

Razor 的好处

传统aspx语法需要成对写 <%= %>,闭合标签写起来麻烦。

aspx引入js写法

<script src="<%=Url.Content("~/Scripts/jquery1.4.4.min.js")%>">Code language: HTML, XML (xml)

Razor引入js写法

<script src="@Url.Content("~/Scripts/jquery1.4.4.min.js")">Code language: HTML, XML (xml)

Razor只需要写@不需要手动写闭合标签,Razor引擎自动识别代码结束位置,代码更简洁。


总结

  1. Razor是ASP.NET MVC3推出的视图模板引擎,MVC2仅支持aspx模板。
  2. NuGet包:Microsoft.AspNetCore.Razor(ASP.NET Core);老Framework版本内置Razor。
  3. 区分:.cshtml(C#) / .vbhtml(VB.NET),项目绝大多数使用cshtml。
  4. _ViewStart.cshtml:全局指定默认布局页面,所有视图默认套用Layout。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注