Blazor中的布局页面以及嵌套

定义布局页面

布局页面(layout)，习惯上我更喜欢称之为模板页，或者母版页。她的作用是用来呈现页面上的一些公共元素，或者托管一些公共的逻辑代码。

先来看看Blazor的默认布局：

图中红色区域即是布局页里面的内容，对应的代码是MainLayout.razor，如下：

@inherits LayoutComponentBase

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

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">Abouta>
    div>

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

她包含了两个定义布局页面的基本要素：

1. 使用@inherits指令来继承LayoutComponentBase，从而声明该页面为一个布局页。
2. 在合适区域添加@Body指令，该区域将用来呈现子页面的内容。

嵌套布局页面

考虑以下这种常见的布局：

她包含了三层结构

1. 蓝色区域为全局的公共元素，比如说页头页尾，LOGO，菜单等。
2. 橙色区域为一个子模块的公共元素，比如用户管理，订单管理等，通常会包含更深层次的菜单。
3. 绿色区域为主内容区，或者主操作区。

针对这种场景，如果只用一个布局页很显然是不够的，因此就需要用到布局页的嵌套。

以用户管理为例，我们添加一个UserLayout.razor，以此作为用户管理子系统的布局页：

@layout MainLayout
@inherits LayoutComponentBase
    <h1>Usersh1>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <NavLink class="nav-link" href="/users/1">
                User 1
            NavLink>
        li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/users/2">
                User 2
            NavLink>
        li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/users/3">
                User 3
            NavLink>
        li>
    ul>
    <div class="container">
        @Body
    div>  

同普通布局页一样，她包含了@inherits以及@Body两个要素，同时由于她是主布局页的嵌套，因此添加了以下指令：

@layout MainLayout

来声明她本身也使用了MainLayout来作为布局。

定义完布局页面之后，对于用户管理子系统里面的其他页面，我们都可以添加以下指令来使用新添加的这个布局：

@layout UserLayout

更灵活的嵌套布局

通过以上的方法已经可以实现布局页的嵌套，但是有个缺点，就是需要在每个页面单独添加@layout指令，这样维护起来就很麻烦。

其实Blazor还提供了_Imports.razor的方式，让我们可以为整个文件夹指定统一的布局。

首先建立文件夹Users，然后添加文件_Imports.razor，并添加以下指令@layout UserLayout，这样整个Users文件夹里面的页面都会自动使用UserLayout来作为布局（除非你单独为页面添加了layout指令,_Imports.razor不仅可以声明layout，还可以使用using来引用程序集）。

目录结构如下：