ASP.NET Core - Razor 佈局檢視

在本章中，我們將瞭解 Razor 佈局檢視。大多數網站和 Web 應用程式都希望建立呈現一些公共元素的頁面。

您通常會在每個頁面的頂部區域顯示徽標和導航選單。
您可能還會在側邊欄中新增其他連結和資訊，以及頁面底部的頁尾，其中包含一些內容。
應用程式的每個頁面都希望擁有這些公共因素。在這裡，我們利用佈局檢視來避免在編寫的每個頁面中重複因素。

佈局檢視

現在讓我們瞭解什麼是佈局檢視。

佈局檢視是一個帶有*.cshtml副檔名的 Razor 檢視。您可以根據需要命名佈局檢視。在本章中，我們將使用名為_Layout.cshtml的佈局檢視。
這是佈局檢視的常用名稱，並且不需要前導下劃線。這只是一個許多開發人員遵循的約定，用於識別不是檢視的檢視；您將其作為控制器操作的檢視結果呈現。
這是一種特殊的檢視，但是一旦我們有了佈局檢視，我們就可以設定我們的控制器檢視，例如主頁的 Index 檢視。

我們可以設定此檢視以在特定位置的佈局檢視內呈現。
這種佈局檢視方法意味著 Index.cshtml 不需要了解徽標或頂級導航的任何資訊。
Index 檢視只需要呈現控制器操作為此檢視提供的模型的特定內容，而佈局檢視則負責其他所有操作。

示例

讓我們舉一個簡單的例子。

如果您有多個檢視，那麼您會看到所有檢視都包含一定數量的重複標記。它們都將具有一個開始HTML 標籤、一個head 標籤和一個body 標籤。

即使我們在此應用程式中沒有導航選單，但在實際應用程式中也可能存在，我們不想在每個檢視中重複該標記。

讓我們建立一個佈局檢視，我們將佈局檢視新增到Views資料夾內名為 Shared 的新資料夾中。這是一個 MVC 框架了解的常規資料夾。它知道這裡面的檢視可能被應用程式中多個控制器的使用。讓我們右鍵單擊 Shared 資料夾並選擇新增→新建項。

在中間窗格中，選擇 MVC 檢視佈局頁面。這裡的預設名稱是 _Layout.cshtml。根據使用者選擇要在執行時使用的佈局檢視。現在，單擊新增按鈕。這是您為新佈局檢視預設獲得的內容。

我們希望佈局檢視負責管理 head 和 body。現在，由於此檢視位於 Razor 檢視中，因此我們可以使用 C# 表示式。我們仍然可以新增文字。我們現在有一個顯示 DateTime.Now 的 div。現在讓我們只新增年份。

<!DOCTYPE html> 
<html> 
   
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>@ViewBag.Title</title> 
   </head> 

   <body> 
      <div> 
        @DateTime.Now 
      </div> 
      
      <div> 
        @RenderBody() 
      </div> 
      
   </body> 
</html>

在上面的程式碼中，您將看到諸如RenderBody和ViewBag.Title之類的表示式。當 MVC 控制器操作呈現 Index 檢視時，並且其中涉及佈局頁面；然後 Index 檢視及其生成的 HTML 將放置在 Index 檢視中。

這就是呼叫 RenderBody 方法存在的地方。我們可以預期我們應用程式中的所有內容檢視都出現在呼叫 RenderBody 的 div 內部。

此檔案中的另一個表示式是 ViewBag.Title。ViewBag 是一種資料結構，可以新增到任何屬性和任何您想要新增到 ViewBag 的資料中。我們可以新增 ViewBag.Title、ViewBag.CurrentDate 或我們想要在 ViewBag 上的任何屬性。

現在讓我們轉到 index.cshtml 檔案。

@model FirstAppDemo.Controllers.HomePageViewModel 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   
   <head> 
      <title>Home</title> 
   </head> 

   <body> 
      <h1>Welcome!</h1> 
      
      <table> 
         @foreach (var employee in Model.Employees) { 
            <tr> 
               <td> 
                  @Html.ActionLink(employee.Id.ToString(), "Details", new 
                     { id = employee.Id }) 
               </td> 
               <td>@employee.Name</td> 
            </tr> 
         } 
      </table> 
      
   </body> 
</html>

刪除 Index 檢視中不再需要的標記。因此，我們可以刪除諸如 HTML 標籤和 head 標籤之類的東西。我們也不需要開始 body 元素或結束標籤，如以下程式所示。

@model FirstAppDemo.Controllers.HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}
<h1>Welcome!</h1> 
<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td> 
            @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
         </td> 
         <td>@employee.Name</td> 
      </tr> 
   } 
</table>

我們仍然需要做兩件事：

首先，我們需要告訴 MVC 框架我們想從此檢視使用佈局檢視。
其次，我們需要透過向 ViewBag 新增一些資訊來設定相應的標題，如上程式碼所示。

讓我們儲存所有檔案並執行應用程式。執行應用程式後，您將看到以下主頁。

列印頁面