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

布局

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

幾乎網(wǎng)絡(luò)上的每個(gè)網(wǎng)站都有一個(gè)模板用于整個(gè)網(wǎng)站（頁(yè)面頂部的品牌，底部的版權(quán)）或網(wǎng)站的特定子部分（例如站點(diǎn)管理頁(yè)面上的特定菜單結(jié)構(gòu)）。

這是通過創(chuàng)建一個(gè)視圖來(lái)實(shí)現(xiàn)的，該視圖充當(dāng)當(dāng)前頁(yè)面內(nèi)容的 HTML 包裝器，模板包含一個(gè)占位符，指示包裝頁(yè)面的內(nèi)容應(yīng)該出現(xiàn)在哪里。

<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>

然后，各個(gè)頁(yè)面可以選擇指定一個(gè)布局，希望將其內(nèi)容包含在其中。

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

生成的 HTML 看起來(lái)像這樣

<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>

創(chuàng)建 Blazor 布局

源代碼^[1]

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

@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>

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

使用布局

為應(yīng)用程序指定默認(rèn)布局

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

@layout?MainLayout

布局的名稱是強(qiáng)類型的。如果存在指定名稱的布局，Blazor 會(huì)高亮正確語(yǔ)法的代碼，如果標(biāo)識(shí)符不正確，編譯會(huì)失敗。

注意：當(dāng)然，如果您只想更改現(xiàn)有布局的外觀，您可以更改 /Shared/MainLayout.razor 文件。

為應(yīng)用程序的某個(gè)區(qū)域指定默認(rèn)模板

源代碼^[2]

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

創(chuàng)建一個(gè)新的 Blazor 客戶端應(yīng)用程序，然后更新導(dǎo)航菜單以包含指向我們將很快創(chuàng)建的新頁(yè)面的鏈接。

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

• 找到最后一個(gè) <li> 元素，它應(yīng)該包含一個(gè) <NavLink> 元素。

• 復(fù)制 <li> 元素。

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

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

接下來(lái)我們將創(chuàng)建一個(gè)非常基本的頁(yè)面

在解決方案資源管理器中展開 /Pages 節(jié)點(diǎn)。

創(chuàng)建一個(gè)名為 Admin 的文件夾。

在文件夾中創(chuàng)建一個(gè)名為 AdminUsers.razor 的新文件。

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

注意： 頁(yè)面的 URL 不必反映文件夾結(jié)構(gòu)。

現(xiàn)在運(yùn)行應(yīng)用程序，該應(yīng)用程序?qū)⒕哂幸粋€(gè)名為“管理員用戶”的新菜單項(xiàng)。當(dāng)您單擊該菜單項(xiàng)時(shí)，它將顯示一個(gè)非常基本的頁(yè)面，其中僅顯示“Users”。接下來(lái)，我們將為所有管理頁(yè)面創(chuàng)建一個(gè)默認(rèn)布局。

在 Admin 文件夾中創(chuàng)建另一個(gè)名為 _Imports.razor 的新文件。

輸入以下代碼。

@layout?AdminLayout

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

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

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

為單個(gè)頁(yè)面顯式指定布局

源代碼^[3]

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

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

再次運(yùn)行應(yīng)用程序并單擊管理員用戶鏈接現(xiàn)在將使用應(yīng)用程序的標(biāo)準(zhǔn)布局顯示基本頁(yè)面。

嵌套布局

源代碼^[4]

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

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

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

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

接下來(lái)，我們將創(chuàng)建一個(gè)自定義布局

編輯 /Shared/AdminLayout.razor 文件。

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

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

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

為了確保 AdminUsers 頁(yè)面使用 AdminLayout，請(qǐng)確保 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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。