ASP.NET MVC - Razor - Gingerdoc 姜知笔记

笔记首页 >> asp.net_mvc >> ASP.NET MVC – Razor

ASP.NET MVC – Razor

在本章中，我们将了解 ASP.NET MVC 应用程序中的 Razor 视图引擎以及 Razor 存在的一些原因。Razor 是一种标记语法，可让您使用 C# 和 VB.Net 将基于服务器的代码嵌入到网页中。它不是一种编程语言。它是一种服务器端标记语言。

Razor 与 ASP.NET MVC 没有关系，因为 Razor 是一个通用模板引擎。您可以在任何地方使用它来生成 HTML 等输出。只是 ASP.NET MVC 实现了一个视图引擎，允许我们在 MVC 应用程序中使用 Razor 来生成 HTML。

查看引擎

您将拥有一个混合了一些文字文本和一些代码块的模板文件。您将该模板与一些数据或特定模型结合起来，其中模板指定数据应该出现的位置，然后执行该模板以生成输出。

Razor 与 ASPX

Razor 与 ASPX 文件的工作方式非常相似。ASPX 文件是模板，其中包含文字文本和一些指定数据应显示位置的 C# 代码。我们执行这些来为我们的应用程序生成 HTML。
ASPX 文件依赖于 ASP.NET 运行时可用于解析和执行这些 ASPX 文件。Razor 没有这样的依赖。
与 ASPX 文件不同，Razor 有一些不同的设计目标。

目标

微软希望 Razor 易于使用和学习，并在 Visual Studio 等工具中工作，以便 IntelliSense 可用，调试器可用，但他们希望 Razor 与特定技术无关，如 ASP.NET 或ASP.NET MVC。

如果您熟悉 ASPX 文件的生命周期，那么您可能知道依赖 ASP.NET 运行时可用于解析和执行这些 ASPX 文件。微软希望 Razor 更智能，让开发人员的工作更轻松。

让我们看一下来自 ASPX 文件的示例代码，其中包含一些文字文本。这是我们的 HTML 标记。它还包含少量 C# 代码。

<% foreach (var item in Model) { %>
   <tr>
      <td>
         <%: Html.ActionLink("Edit", "Edit", new { id = item.ID })%> |
         <%: Html.ActionLink("Details", "Details", new { id = item.ID }) %>|
         <%: Html.ActionLink("Delete", "Delete", new { id = item.ID })%>
      </td>
		
      <td>
         <%: item.Name %>
      </td>
		
      <td>
         <%: String.Format("{0,g}", item.JoiningDate) %>
      </td>
		
   </tr>
<%}%>

但是这些 Web 表单基本上被 Microsoft 重新利用以与早期版本的 MVC 一起使用，这意味着 ASPX 文件从来都不是 MVC 的完美匹配。

当您需要从 C# 代码转换回 HTML 以及从 HTML 代码转换回 C# 代码时，语法有点笨拙。IntelliSense 还会提示您做一些在 MVC 项目中没有意义的事情，例如将输出缓存和用户控件的指令添加到 ASPX 视图中。

现在看看这个产生相同输出的代码，不同之处在于它使用了 Razor 语法。

@foreach (var item in Model) {
   <tr>
      <td>
         @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
         @Html.ActionLink("Details", "Details", new { id = item.ID }) |
         @Html.ActionLink("Delete", "Delete", new { id = item.ID })
      </td>
		
      <td>
         @item.Name
      </td>
		
      <td>
         @String.Format("{0,g}", item.JoiningDate)
      </td>
   </tr>
}

使用 Razor 语法，您可以使用“@”符号开始一些 C# 代码，Razor 解析将自动切换到解析这个语句，这个 foreach 语句，作为一点 C# 代码。

但是当我们完成 foreach 语句并且我们有了左花括号时，我们可以从 C# 代码转换为 HTML，而无需在其中放置显式标记，例如尖括号符号中的百分比。

Razor 解析器足够智能，可以在 C# 代码和 HTML 之间切换，当我们需要将右花括号放在这里时，可以再次从 HTML 切换回 C# 代码。如果您比较这两个代码块，我想您会同意 Razor 版本更易于阅读和编写。

使用 Razor 创建视图

让我们创建一个新的 ASP.Net MVC 项目。

Razor MVC 项目

在名称字段中输入项目名称，然后单击确定。

项目名称

为简单起见，请选择“空”选项并选中“添加文件夹和核心引用”部分中的 MVC 复选框，然后单击“确定”。它将创建一个具有最少预定义内容的基本 MVC 项目。

一旦 Visual Studio 创建了项目，您将在解决方案资源管理器窗口中看到许多文件和文件夹。由于我们已经从一个空的项目模板创建了 ASP.Net MVC 项目，因此目前该应用程序不包含任何要运行的内容。由于我们从一个空的应用程序开始，甚至没有一个控制器，让我们添加一个 HomeController。

要添加控制器，请右键单击解决方案资源管理器中的控制器文件夹，然后选择添加 → 控制器。它将显示“添加脚手架”对话框。

剃刀控制器文件夹

选择MVC 5 Controller – Empty选项并单击 Add 按钮，然后将出现 Add Controller 对话框。

家庭控制器

将名称设置为 HomeController 并单击“添加”按钮。您将在 Controllers 文件夹中看到一个新的 C# 文件“HomeController.cs”，该文件也已打开以在 Visual Studio 中进行编辑。

在 Visual Studio 中编辑

右键单击索引操作并选择添加视图…

索引操作添加视图

从模板下拉列表中选择空，然后单击添加按钮。Visual Studio 将在View/Home文件夹中创建一个 Index.cshtml 文件。

创建索引.cshtml

请注意，Razor 视图有一个 cshtml 扩展名。如果您使用 Visual Basic 构建 MVC 应用程序，它将是一个 VBHTML 扩展。这个文件的顶部是一个代码块，它显式地将此 Layout 属性设置为 null。

当您运行此应用程序时，您将看到空白网页，因为我们已经从空模板创建了一个视图。

空白网页

让我们添加一些 C# 代码，让事情变得更有趣。要在 Razor 视图中编写一些 C# 代码，我们要做的第一件事是键入“@”符号，告诉解析器它将在代码中执行某些操作。

让我们创建一个 FOR 循环，在花括号内指定 ‘@i’，这实质上是告诉 Razor 放置 i 的值。

@{
   Layout = null;
} 

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Index</title>
   </head>
	
   <body>
      <div>
         @for (int index = 0; index < 12; index++){
            <div>@index </div>
         }
      </div>
   </body>
	
</html>

运行此应用程序，您将看到以下输出。

剃刀输出