HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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 文件的生命周期，那么您可能会意识到，解析和执行这些 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 项目。

Razor MVC 项目

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

project_name

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

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

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

Razor 控制器文件夹

选择MVC 5 Controller – Empty选项并单击"添加"按钮，然后将出现"添加控制器"对话框。

HomeController

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

在 Visual Studio 中编辑

右键单击Index操作并选择添加视图...

Index操作添加视图

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

创建 Index.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>

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

Razor 输出
❮ 上一节 下一节 ❯