原文鏈接：https://blazor-university.com/layouts/

布局

Blazor 布局類似于 ASP Webforms 母版頁的概念，與 ASP MVC 中的 Razor 布局相同。

幾乎網絡上的每個網站都有一個模板用于整個網站（頁面頂部的品牌，底部的版權）或網站的特定子部分（例如站點管理頁面上的特定菜單結構）。

這是通過創建一個視圖來實現的，該視圖充當當前頁面內容的 HTML 包裝器，模板包含一個占位符，指示包裝頁面的內容應該出現在哪里。

<h1>This?is?the?start?of?my?reusable?layout</h1> <div?class="Content">--?Some?kind?of?indicator?to?specify?the?page's?content?will?go?here?-- </div> <footer>This?is?the?end?of?the?layout </footer>

然后，各個頁面可以選擇指定一個布局，希望將其內容包含在其中。

--?Some?way?of?indicating?which?template?to?wrap?this?page's?content?in?-- <h1>This?is?the?content?of?your?embedded?page</h1>

生成的 HTML 看起來像這樣

<h1>This?is?the?start?of?my?reusable?layout</h1> <div?class="Content"><h1>This?is?the?content?of?your?embedded?page</h1> </div> <footer>This?is?the?end?of?the?layout </footer>

創建 Blazor 布局

源代碼^[1]

您打算用作頁面布局模板的任何內容都必須來自 LayoutComponentBase 類。要指示您希望頁面內容出現在哪里，您只需輸出 Body 屬性的內容。

@inherits?LayoutComponentBase <div?class="main"><header><h1>This?is?the?header</h1></header><div?class="content">@Body</div><footer>This?is?the?footer</footer> </div>

請注意，這不是整個 HTML 頁面。Blazor 布局僅適用于 Blazor 在 wwwroot\index.html 頁面中定義的 HTML 部分，在默認的 Blazor 應用程序中，這是 <app> 元素中的所有內容。目前無法在此范圍之外更改 HTML 元素的屬性，除非使用 JavaScript 互操作。

使用布局

為應用程序指定默認布局

指定布局的最通用方法是編輯 /Pages/_Imports.razor 文件并編輯單行代碼以標識不同的布局。

@layout?MainLayout

布局的名稱是強類型的。如果存在指定名稱的布局，Blazor 會高亮正確語法的代碼，如果標識符不正確，編譯會失敗。

注意：當然，如果您只想更改現有布局的外觀，您可以更改 /Shared/MainLayout.razor 文件。

為應用程序的某個區域指定默認模板

源代碼^[2]

如果您的應用程序有單獨的區域，例如“Admin”區域，則可以指定用于該區域內所有頁面的默認布局，只需將它們分組到具有自己的 _Imports.razor 文件的子文件夾中。

創建一個新的 Blazor 客戶端應用程序，然后更新導航菜單以包含指向我們將很快創建的新頁面的鏈接。

• 打開 /Shared/NavMenu.razor 文件。

• 找到最后一個 <li> 元素，它應該包含一個 <NavLink> 元素。

• 復制 <li> 元素。

• 將 NavLink 的 href 屬性更改為 admin/users。

• 將鏈接的文本更改為管理員用戶。

接下來我們將創建一個非常基本的頁面

在解決方案資源管理器中展開 /Pages 節點。

創建一個名為 Admin 的文件夾。

在文件夾中創建一個名為 AdminUsers.razor 的新文件。

@page?"/admin/users" <h2>Users</h2

注意： 頁面的 URL 不必反映文件夾結構。

現在運行應用程序，該應用程序將具有一個名為“管理員用戶”的新菜單項。當您單擊該菜單項時，它將顯示一個非常基本的頁面，其中僅顯示“Users”。接下來，我們將為所有管理頁面創建一個默認布局。

在 Admin 文件夾中創建另一個名為 _Imports.razor 的新文件。

輸入以下代碼。

@layout?AdminLayout

此時，應用程序中沒有名為 AdminLayout 的文件，因此您應該在 Visual Studio 中看到名稱下方有一條紅線，表示找不到該文件。您可以通過在 /Shared 文件夾中創建 AdminLayout.razor 來解決此問題。

@inherits?LayoutComponentBase <h1>Admin</h1> @Body

如果您現在運行該應用程序并單擊管理員用戶鏈接，您將看到僅由 <h1> 和 <h2> 組成的簡陋頁面。我們將在嵌套布局部分解決這個問題，但現在我們將使用它作為練習，了解如何從頁面本身顯式指定布局。

為單個頁面顯式指定布局

源代碼^[3]

到目前為止，我們已經看到可以在 /Pages/_Imports.razor 文件中指定默認布局。我們還看到，可以通過 Blazor 找到更接近其正在呈現的頁面的更具體的 _Imports.razor 文件來覆蓋此設置。指定要使用的模板的最后（也是最明確的）級別是使用 @layout 指令在頁面本身中指定它。

@page?"/admin/users" @layout?MainLayout <h2>Users</h2>

再次運行應用程序并單擊管理員用戶鏈接現在將使用應用程序的標準布局顯示基本頁面。

嵌套布局

源代碼^[4]

指定 @layout（顯式或通過 _Imports.razor 文件）時，Blazor 將使用 LayoutAttribute 裝飾生成的目標類。

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))] public?class?AdminUsers?:?Microsoft.AspNetCore.Components.ComponentBase { }

注意： 生成的 .cs 文件可以在項目的 obj\Debug\netstandard2.0\Razor\ 文件夾中找到。

Blazor 將為任何 ComponentBase 的子類使用 LayoutAttribute。不僅頁面來自這個類，而且 LayoutComponentBase 也是如此！這意味著自定義布局也可以有自己的父布局。

接下來，我們將創建一個自定義布局

編輯 /Shared/AdminLayout.razor 文件。

通過添加 @layout MainLayout 明確聲明它使用 MainLayout 作為其父級。

@inherits?LayoutComponentBase @layout?MainLayout <h1>Admin</h1> @Body

首先，我們從 LayoutComponentBase 繼承視圖，然后告訴 Blazor 我們希望此布局包含在 MainLayout Razor 視圖中，最后我們通過輸出 Body 屬性的內容來呈現使用者視圖聲明的任何內容。

為了確保 AdminUsers 頁面使用 AdminLayout，請確保 AdminUsers.razor 文件頂部沒有顯式的 layout。這將告訴 Blazor 使用 Pages/Admin/_Imports.razor 中指定的布局。

@page?"/admin/users"<h2>Users</h2>

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/CreatingALayout

[2]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/UsingALayout

[3]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/SpecifyingALayoutExplicitly

[4]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Layouts/NestedLayouts

總結

以上是生活随笔為你收集整理的Blazor University （2）布局 — 创建 Blazor 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。