Blazor学习之旅(7)布局

大家好，我是Edison。

本篇，我们来了解下在Blazor中的布局。

什么是布局

Blazor 中的布局可以让我们编写的页面具有相同的导航菜单和页头页脚部分，提高通用代码的复用性，通过一次性的编写通用代码从而减少重复劳动。

默认Blazor布局

如果从 Blazor 项目模板创建了 Blazor 应用，则该应用的默认布局为 Shared/MainLayout.razor 组件。

查看MainLayout.razor组件，我们可以发现：

（1）布局组件必须继承于LayoutComponentBase类

（2）必须要在引用组件的位置添加@Body指令

（3）不包含@page指令因为它不直接处理请求

@inherits LayoutComponentBase

<PageTitle>EDT.BlazorServer.App</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

编写Blazor布局

编写一个Blazor布局组件和其他组件类似，通常将其放在"Shared"目录下供所有页面共享。例如，下面就编写一个布局组件的示例（来源于Microsoft Learn）—BlazingPizzasMainLayout.razor：

@inherits LayoutComponentBase

<header>
<h1>Blazing Pizza</h1>
</header>

<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
@new MarkdownString(TrademarkMessage)
</footer>

@code {
  public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2022";
}

在这个示例中，满足了刚刚所说的3个要点，接下来就在组建中来使用这个布局。

使用Blazor布局

这里我们假设在另一个组件中使用上面编写的那个Blaozr布局，通过@layout指令即可快速应用布局：

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
  [Parameter]
  public string Favorite { get; set; }
}

下图说明了组件和布局如何一起呈现最终的HTML效果：

通常在Blazor应用中，我们会直接在App.razor中设置默认的布局组件，这样就可以将布局应用于该Blazor应用中的所有组件。

在App.razor中，通过在标签中设置DefaultLayout属性即可：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

此外也可以在_Imports.razor文件中覆盖默认布局设置，如下所示：

@using System.Net.Http
......
@layout BlazingPizzasMainLayout

小结

本篇，我们了解了在Blazor中的布局。

下一篇，我们学习一下MudBlazor这个UI组件库，有了它我们就可以快速开发一个好看的企业级应用系统了。

参考资料

Microsoft Learn，《使用Blazor构建Web应用程序》

作者：周旭龙

出处：https://edisonchou.cnblogs.com

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。