ASP.NET MVC - 剃刀

在本章中，我们将了解 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 文件的生命周期，那么您可能会意识到，解析和执行这些 ASPX 文件依赖于 ASP.NET 运行时。微软希望 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 项目。

剃刀 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>

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

剃刀输出