关注我们

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 Vs ASPX

Razor与ASPX文件的工作原理非常相似。 ASPX文件是模板，其中包含文字文本和一些C#代码，这些代码指定应在何处显示数据。
ASPX文件对ASP.NET运行时具有依赖性，可以用来解析和执行这些ASPX文件。 Razor没有这种依赖性。
与ASPX文件不同，Razor具有一些不同的设计目标。
无涯教程网

Goals

如果您熟悉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>
<%}%>

但是Microsoft基本上将这些Web表单重新用于与早期版本的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#代码。

创建视图

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

链接：https://www.learnfk.comhttps://www.learnfk.com/asp.net_mvc/asp.net-mvc-razor.html

来源：LearnFk无涯教程网

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

为简单起见，请选择"Empty"选项，然后在"Add folders and core references for"部分中选中" MVC"复选框，然后单击"OK"。

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

要Add Controller，请在Solution Explorer中右键单击控制器文件夹，然后选择Add→Controller。它将显示"Add Scaffold"对话框。

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

将名称设置为HomeController，然后单击"Add"按钮，您将在Controllers文件夹中看到一个新的C#文件" HomeController.cs"，该文件也可以在Visual Studio中进行编辑。

右键单击"Index"操作，然后选择"Add View"。

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

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

当您运行此应用程序时，您将看到空白的网页，因为我们已经从"Empty"模板创建了"View"。

让我们添加一些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>