如何在 ASP.NET Core MVC 中使用 Razor 視圖引擎
譯文【51CTO.com快譯】ASPX 視圖引擎是在 ASP.NET MVC 中構(gòu)建的傳統(tǒng)視圖引擎。Razor 視圖引擎更高級，現(xiàn)在是 ASP.NET Core MVC 的默認(rèn)視圖引擎。本文簡要比較了這兩種視圖引擎，然后討論如何在 ASP.NET Core MVC 中使用 Razor 視圖引擎。
要使用本文提供的代碼示例，您應(yīng)該在系統(tǒng)中安裝 Visual Studio 2019。
在 Visual Studio 中創(chuàng)建 ASP.NET Core MVC 項(xiàng)目
首先，在 Visual Studio 2019 中創(chuàng)建一個(gè) ASP.NET Core項(xiàng)目。按照這些步驟將在 Visual Studio 2019 中創(chuàng)建一個(gè)新的 ASP.NET Core MVC 5 項(xiàng)目。
1. 啟動 Visual Studio IDE。
2. 單擊“創(chuàng)建新項(xiàng)目”。
3. 在“創(chuàng)建新項(xiàng)目”窗口中，從顯示的模板列表中選擇“ASP.NET Core Web App (Model-View-Controller)”。
4. 點(diǎn)擊“下一步”。
5. 在“配置新項(xiàng)目”窗口中，指定新項(xiàng)目的名稱和位置。
6. 根據(jù)您的首選項(xiàng)，也可以選中 “將解決方案和項(xiàng)目放置在同一目錄中”復(fù)選框。
7. 點(diǎn)擊“下一步”。
8. 在接下來顯示的“附加信息”窗口中，從頂部的下拉列表中選擇 .NET 5.0 作為目標(biāo)框架。將將“Authentication Type”保留為“None”（默認(rèn)）。
9. 確保“Enable Docker”、“Configure for HTTPS”和“Enable Razor runtime compilation”復(fù)選框未選中，因?yàn)槲覀儾粫谶@里使用任何這些特性。
10. 單擊“創(chuàng)建”。
將創(chuàng)建一個(gè)新的 ASP.NET Core MVC 5 項(xiàng)目。在本文的后續(xù)部分中，我們將使用這個(gè)項(xiàng)目來處理Razor視圖。
什么是視圖引擎？
視圖引擎將服務(wù)器端模板轉(zhuǎn)換為 HTML 標(biāo)記，并在控制器的操作方法觸發(fā)時(shí)在web瀏覽器中呈現(xiàn)它。ASP.NET MVC 最初與 ASPX 視圖引擎一起提供，但后來的版本中添加了 Razor 視圖引擎。Razor 視圖引擎現(xiàn)在是 ASP.NET Core MVC 應(yīng)用程序的默認(rèn)視圖引擎。
雖然 ASPX 視圖引擎作為 System.Web.Mvc.WebFormViewEngine 命名空間的一部分可用，但 Razor 視圖引擎在 Microsoft.AspNetCore.Mvc.Razor 命名空間中可用。
視圖引擎如何工作？
每個(gè)視圖引擎包含三個(gè)組件：ViewEngine 類、view類和模板解析器。ViewEngine 類擴(kuò)展了 IViewEngine 接口并實(shí)現(xiàn)其成員，這個(gè)類負(fù)責(zé)定位視圖模板。view類擴(kuò)展了 IView 接口并實(shí)現(xiàn)了其成員。這個(gè)類負(fù)責(zé)將模板與數(shù)據(jù)結(jié)合，然后將其轉(zhuǎn)換為 HTML 標(biāo)記，以便在 Web 瀏覽器中呈現(xiàn)。模板解析器是一個(gè)將視圖編譯成可執(zhí)行代碼的解析引擎。
您還可以在 ASP.NET Core 中創(chuàng)建自己的自定義視圖引擎。為此，您需要?jiǎng)?chuàng)建一個(gè)類，來擴(kuò)展與 Microsoft.AspNetCore.Mvc.ViewEngines 命名空間相關(guān)的 IView 和 IViewEngine 接口。然后實(shí)現(xiàn) IViewEngine 接口的兩個(gè)方法，即 GetView 和 FindView。還可以實(shí)現(xiàn) IView 接口的 RenderAsync 方法。此方法負(fù)責(zé)在運(yùn)行時(shí)呈現(xiàn)視圖引擎。
在 ASP.NET Core MVC 中創(chuàng)建新的 Razor 視圖
在上面創(chuàng)建的新 ASP.NET Core MVC 應(yīng)用程序中，讓我們創(chuàng)建一個(gè)簡單的視圖。為此，請編輯 HomeController.cs 文件并添加以下代碼：
- public IActionResult Welcome(){
- ViewData["Message"] = "Hello World!";
- return View();
- }
接下來，在 Views/Home 文件夾中新建一個(gè)名為 Welcome.cshtml 的新視圖文件，并輸入以下代碼：
- @ViewData [ “Message” ]
刪除 ASP.NET Core MVC 中的默認(rèn)視圖引擎
創(chuàng)建自定義視圖引擎時(shí)，可以刪除 Razor 視圖引擎和 ASPX 視圖引擎，然后添加自己的自定義視圖引擎，如下面給出的代碼片段所示。
- services.AddMvc()
- .AddViewOptions(options =>
- {
- options.ViewEngines.Clear();
- options.ViewEngines.Add(typeof(MyCustomViewEngine));
- });
在 Razor 視圖引擎中使用 if 構(gòu)造
在本節(jié)中，我們將研究如何使用 Razor 語法對視圖進(jìn)行編程。讓我們首先使用一些常見的結(jié)構(gòu)，例如 if、if else 和 switch case 語句。
以下代碼片段演示了如何在Razor中使用if語句。
- @{var x = 10;}
- @if (x > 5)
- {
- The value of x is greater than 5.
- }
下一個(gè)代碼片段展示了如何在 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
如果當(dāng)天是星期一，當(dāng)您運(yùn)行該應(yīng)用程序時(shí)，您將在 Web 瀏覽器中看到以下輸出。
圖 1. 運(yùn)行中的 Razor 視圖
在 Razor 視圖引擎中使用循環(huán)
您可以在 Razor 視圖中使用循環(huán)來執(zhí)行重復(fù)操作。以下代碼片段演示了如何在 Razor 中使用循環(huán)。
- <html>
- <body>
- <p>Displaying numbers 1 to 10</p>
- @for(var i = 1; i <= 10; i++)
- {
- <p>@i</p>
- }
- </body>
- </html>
在處理集合時(shí)，可以利用 foreach 循環(huán)。以下代碼片段演示了如何顯示與 Request.Headers 集合相關(guān)的所有鍵。
- <html>
- <body>
- <ul>
- @foreach (var k in this.Context.Request.Headers)
- {
- <li>@k.Key</li>
- }
- </ul>
- </body>
- </html>
如果想要在視圖中使用模型，應(yīng)該創(chuàng)建一個(gè)模型類，如下面給出的代碼片段所示。
- public class Author
- {
- public int Id { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- }
為簡單起見，在 Models 解決方案文件夾中創(chuàng)建model類?？梢栽谝晥D中使用此模型，如下面給出的代碼片段所示：
- @model Author <ul> <li>Author Id: @Model.Id</li> <li>First Name: @Model.FirstName</li> <li>LastName: @Model.LastName</li> </ul>
Razor 視圖引擎比以前版本更高級，為從模板生成 HTML 代碼提供了更友好的語法。請注意，Razor 是一個(gè)通用模板引擎——您可以在任何地方使用它來呈現(xiàn) HTML。
您還可以在 ASP.NET Core MVC 中使用第三方視圖引擎，例如 Spark、SharpDOM 和 NDjango。
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
