如何在 ASP.NET Core MVC 中使用 Razor 视图引擎

译文
开发
如何在ASP.NET Core MVC中使用Razor视图引擎。

 [[406847]]

【51CTO.com快译】ASPX 视图引擎是在 ASP.NET MVC 中构建的传统视图引擎。Razor 视图引擎更高级,现在是 ASP.NET Core MVC 的默认视图引擎。本文简要比较了这两种视图引擎,然后讨论如何在 ASP.NET Core MVC 中使用 Razor 视图引擎。

要使用本文提供的代码示例,您应该在系统中安装 Visual Studio 2019。

在 Visual Studio 中创建 ASP.NET Core MVC 项目

首先,在 Visual Studio 2019 中创建一个 ASP.NET Core项目。按照这些步骤将在 Visual Studio 2019 中创建一个新的 ASP.NET Core MVC 5 项目。

1. 启动 Visual Studio IDE。

2. 单击“创建新项目”。

3. 在“创建新项目”窗口中,从显示的模板列表中选择“ASP.NET Core Web App (Model-View-Controller)”。

4. 点击“下一步”。

5. 在“配置新项目”窗口中,指定新项目的名称和位置。

6. 根据您的首选项,也可以选中 “将解决方案和项目放置在同一目录中”复选框。

7. 点击“下一步”。

8. 在接下来显示的“附加信息”窗口中,从顶部的下拉列表中选择 .NET 5.0 作为目标框架。将将“Authentication Type”保留为“None”(默认)。

9. 确保“Enable Docker”、“Configure for HTTPS”和“Enable Razor runtime compilation”复选框未选中,因为我们不会在这里使用任何这些特性。

10. 单击“创建”。

将创建一个新的 ASP.NET Core MVC 5 项目。在本文的后续部分中,我们将使用这个项目来处理Razor视图。

什么是视图引擎?

视图引擎将服务器端模板转换为 HTML 标记,并在控制器的操作方法触发时在web浏览器中呈现它。ASP.NET MVC 最初与 ASPX 视图引擎一起提供,但后来的版本中添加了 Razor 视图引擎。Razor 视图引擎现在是 ASP.NET Core MVC 应用程序的默认视图引擎。

虽然 ASPX 视图引擎作为 System.Web.Mvc.WebFormViewEngine 命名空间的一部分可用,但 Razor 视图引擎在 Microsoft.AspNetCore.Mvc.Razor 命名空间中可用。

视图引擎如何工作?

每个视图引擎包含三个组件:ViewEngine 类、view类和模板解析器。ViewEngine 类扩展了 IViewEngine 接口并实现其成员,这个类负责定位视图模板。view类扩展了 IView 接口并实现了其成员。这个类负责将模板与数据结合,然后将其转换为 HTML 标记,以便在 Web 浏览器中呈现。模板解析器是一个将视图编译成可执行代码的解析引擎。

您还可以在 ASP.NET Core 中创建自己的自定义视图引擎。为此,您需要创建一个类,来扩展与 Microsoft.AspNetCore.Mvc.ViewEngines 命名空间相关的 IView 和 IViewEngine 接口。然后实现 IViewEngine 接口的两个方法,即 GetView 和 FindView。还可以实现 IView 接口的 RenderAsync 方法。此方法负责在运行时呈现视图引擎。

在 ASP.NET Core MVC 中创建新的 Razor 视图

在上面创建的新 ASP.NET Core MVC 应用程序中,让我们创建一个简单的视图。为此,请编辑 HomeController.cs 文件并添加以下代码:

  1. public IActionResult Welcome(){ 
  2.     ViewData["Message"] = "Hello World!"
  3.     return View(); 

接下来,在 Views/Home 文件夹中新建一个名为 Welcome.cshtml 的新视图文件,并输入以下代码:

  1. @ViewData [ “Message” ] 

删除 ASP.NET Core MVC 中的默认视图引擎

创建自定义视图引擎时,可以删除 Razor 视图引擎和 ASPX 视图引擎,然后添加自己的自定义视图引擎,如下面给出的代码片段所示。

  1. services.AddMvc() 
  2.             .AddViewOptions(options => 
  3.             { 
  4.                 options.ViewEngines.Clear(); 
  5.                 options.ViewEngines.Add(typeof(MyCustomViewEngine)); 
  6.             });  

在 Razor 视图引擎中使用 if 构造

在本节中,我们将研究如何使用 Razor 语法对视图进行编程。让我们首先使用一些常见的结构,例如 if、if else 和 switch case 语句。
以下代码片段演示了如何在Razor中使用if语句。

  1. @{var x = 10;}          
  2.           @if (x > 5)  
  3.            {             
  4. The value of x is greater than 5. 
  5.  
  6.            }  
  7.          

下一个代码片段展示了如何在 Razor 中使用 if else 语句。

  1. @{var x = 2;}               
  2.           @if (x > 5)  
  3.            {                
  4. The value of x is greater than 5. 
  5.  
  6.            }  
  7.            else  
  8.            {      
  9. The value of x is less than 5. 
  10.  
  11.            }    

在 Razor 视图引擎中使用 switch case 语句

以下是如何在Razor中使用switch case语句。

  1. @{ 
  2. var weekday=DateTime.Now.DayOfWeek.ToString(); 
  3. var text=string.Empty; 
  4. @switch(weekday) 
  5. case "Monday"
  6.     text="This is the first working day of the week."
  7.     break; 
  8. case "Friday"
  9.     text="This is the last working day of the week"
  10.     break; 
  11. default
  12.     text="Today is: " + weekday; 
  13.     break; 
  14. @text 

如果当天是星期一,当您运行该应用程序时,您将在 Web 浏览器中看到以下输出。

图 1. 运行中的 Razor 视图

在 Razor 视图引擎中使用循环

您可以在 Razor 视图中使用循环来执行重复操作。以下代码片段演示了如何在 Razor 中使用循环。 

  1. <html>  
  2. <body>  
  3.      <p>Displaying numbers 1 to 10</p> 
  4.           @for(var i = 1; i <= 10; i++)  
  5.            {               
  6.               <p>@i</p> 
  7.            }  
  8. </body>  
  9. </html>  
  10.    

在处理集合时,可以利用 foreach 循环。以下代码片段演示了如何显示与 Request.Headers 集合相关的所有键。

  1.  <html> 
  2. <body> 
  3. <ul> 
  4. @foreach (var k in this.Context.Request.Headers) 
  5.     { 
  6.         <li>@k.Key</li> 
  7.     } 
  8. </ul> 
  9. </body> 
  10. </html> 

如果想要在视图中使用模型,应该创建一个模型类,如下面给出的代码片段所示。

  1. public class Author 
  2.     { 
  3.         public int Id { get; set; } 
  4.         public string FirstName { get; set; } 
  5.         public string LastName { get; set; } 
  6.     }  

为简单起见,在 Models 解决方案文件夹中创建model类。可以在视图中使用此模型,如下面给出的代码片段所示:

  1. @model Author      <ul>          <li>Author Id: @Model.Id</li>          <li>First Name: @Model.FirstName</li>          <li>LastName: @Model.LastName</li>      </ul>    

Razor 视图引擎比以前版本更高级,为从模板生成 HTML 代码提供了更友好的语法。请注意,Razor 是一个通用模板引擎——您可以在任何地方使用它来呈现 HTML。
您还可以在 ASP.NET Core MVC 中使用第三方视图引擎,例如 Spark、SharpDOM 和 NDjango。

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

责任编辑:梁菲 来源: InfoWord
相关推荐

2012-06-26 10:24:51

Asp.Net框架Razor

2021-01-07 07:39:07

工具接口 Swagger

2021-03-10 09:40:43

LamarASP容器

2021-01-28 22:39:35

LoggerMessa开源框架

2021-02-28 20:56:37

NCache缓存框架

2021-02-03 13:35:25

ASPweb程序

2021-01-31 22:56:50

FromServiceASP

2021-03-03 22:37:16

MediatR中介者模式

2021-03-17 09:45:31

LazyCacheWindows

2021-02-02 16:19:08

Serilog日志框架

2021-02-06 21:40:13

SignalR通讯TypeScript

2021-02-07 17:29:04

监视文件接口

2021-01-26 14:57:00

中间件应用模块化

2021-04-12 07:03:10

轻量级模块化框架

2021-01-04 05:44:54

框架日志

2011-01-19 11:17:36

2010-11-18 08:46:27

ASP.NET MVC

2009-07-22 09:36:54

使用UpdataModASP.NET MVC

2012-05-09 13:29:42

ASP.NET

2022-08-01 08:00:00

开发工具跟踪侦听器
点赞
收藏

51CTO技术栈公众号