如何在 ASP.NET Core MVC 中使用 Razor 視圖引擎
譯文【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 文件并添加以下代碼：
- public IActionResult Welcome(){
- ViewData["Message"] = "Hello World!";
- return View();
- }
接下來，在 Views/Home 文件夾中新建一個名為 Welcome.cshtml 的新視圖文件，并輸入以下代碼：
- @ViewData [ “Message” ]
刪除 ASP.NET Core MVC 中的默認視圖引擎
創建自定義視圖引擎時，可以刪除 Razor 視圖引擎和 ASPX 視圖引擎，然后添加自己的自定義視圖引擎，如下面給出的代碼片段所示。
- services.AddMvc()
- .AddViewOptions(options =>
- {
- options.ViewEngines.Clear();
- options.ViewEngines.Add(typeof(MyCustomViewEngine));
- });
在 Razor 視圖引擎中使用 if 構造
在本節中，我們將研究如何使用 Razor 語法對視圖進行編程。讓我們首先使用一些常見的結構，例如 if、if else 和 switch case 語句。
以下代碼片段演示了如何在Razor中使用if語句。
- @{var x = 10;}
- @if (x > 5)
- {
- The value of x is greater than 5.
- }
下一個代碼片段展示了如何在 Razor 中使用 if else 語句。
- @{var x = 2;}
- @if (x > 5)
- {
- The value of x is greater than 5.
- }
- else
- {
- The value of x is less than 5.
- }
在 Razor 視圖引擎中使用 switch case 語句
以下是如何在Razor中使用switch case語句。
- @{
- var weekday=DateTime.Now.DayOfWeek.ToString();
- var text=string.Empty;
- }
- @switch(weekday)
- {
- case "Monday":
- text="This is the first working day of the week.";
- break;
- case "Friday":
- text="This is the last working day of the week";
- break;
- default:
- text="Today is: " + weekday;
- break;
- }
- @text
如果當天是星期一，當您運行該應用程序時，您將在 Web 瀏覽器中看到以下輸出。
圖 1. 運行中的 Razor 視圖
在 Razor 視圖引擎中使用循環
您可以在 Razor 視圖中使用循環來執行重復操作。以下代碼片段演示了如何在 Razor 中使用循環。
- <html>
- <body>
- <p>Displaying numbers 1 to 10</p>
- @for(var i = 1; i <= 10; i++)
- {
- <p>@i</p>
- }
- </body>
- </html>
在處理集合時，可以利用 foreach 循環。以下代碼片段演示了如何顯示與 Request.Headers 集合相關的所有鍵。
- <html>
- <body>
- <ul>
- @foreach (var k in this.Context.Request.Headers)
- {
- <li>@k.Key</li>
- }
- </ul>
- </body>
- </html>
如果想要在視圖中使用模型，應該創建一個模型類，如下面給出的代碼片段所示。
- public class Author
- {
- public int Id { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- }
為簡單起見，在 Models 解決方案文件夾中創建model類。可以在視圖中使用此模型，如下面給出的代碼片段所示：
- @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】
