练习 - 添加 Blazor 布局以减少代码中的重复

4 分钟

将页面添加到 Blazing Pizza 应用后，你会注意到我们一直在复制导航 HTML。 Blazor 已经支持在一处创建此类页面基架。它们被称为 Blazor 布局。

现在，多个页面上有大量重复的 HTML。接下来，你将为整个应用创建一个布局，将导航和公司信息都添加到一个位置。

在此练习中，你将创建 MainLayout 组件。你将了解如何将此布局用于特定页面，然后将它设置为整个应用的默认布局。

添加 MainLayout 组件

在 Visual Studio Code 的菜单上，选择“文件”“新建文本文件”。
选择 ASP.NET Razor 作为语言。

创建布局组件，然后从任何页面复制导航 HTML。

@inherits LayoutComponentBase

<div id="app">

  <header class="top-bar">
    <a class="logo" href="">
      <img src="img/logo.svg" />
    </a>

    <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
      <img src="img/pizza-slice.svg" />
      <div>Get Pizza</div>
    </NavLink>

    <NavLink href="myorders" class="nav-tab">
      <img src="img/bike.svg" />
      <div>My Orders</div>
    </NavLink>
  </header>

  <div class="content">
    @Body
  </div>

  <footer>
    &copy; Blazing Pizza @DateTime.UtcNow.Year
  </footer>

</div>

此布局使用 _Host.cshtml 中的一些标记，因此我们需要从中删除它。

通过选择 Ctrl+S 保存更改。
对于文件名，请使用 MainLayout.razor。请确保将文件保存在 Shared 目录中。
在文件资源管理器中，展开“页面”。然后选择“_Host.cshtml”。

将 Blazor 应用组件周围的元素从以下代码：

<div id="app">
    <div class="content">
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </div>
</div>

更改为以下代码：

<component type="typeof(App)" render-mode="ServerPrerendered" />

在页面组件上使用 Blazor 布局

在文件资源管理器中，展开“页面”。然后选择“Index.razor”。
删除 top-bar div 元素，并在 @page 指令下添加对新布局的引用。
```
@layout MainLayout
```
我们还会删除旧 <h1>Blazing Pizzas</h1> 元素。因为我们已将顶栏置于布局中，因此不再需要此元素。
在 Visual Studio Code 中，选择 F5。在“运行”菜单上，选择“开始调试”。

新主页将包含今年的版权页脚，它将自动更新。若要查看未使用此布局的页面的外观，请选择“我的订单”。或转到无效页面，如 (http://localhost:5000/help)。目前，我们尚未对“404 找不到页面”进行品牌化。
若要停止应用，请选择 Shift + F5。

将所有页面更新为新布局

现在，你可以将 @layout MainLayout 指令添加到应用中的所有页面，但 Blazor 有更好的解决方案。首先删除刚添加到 Index.razor 的布局指令。

在 Index.razor 组件中删除。
在文件资源管理器中，展开“页面”。然后选择“MyOrders.razor”。
删除 top-bar div 元素。
在文件资源管理器中，展开“页面”。然后选择“OrderDetail.razor”。
删除 top-bar div 元素。
在文件资源管理器中，展开“页面”。然后选择“Checkout.razor”。
删除 top-bar div 元素。

可以在 App.razor 组件中更改页面路由方式，还可告知 Blazor 使用默认布局。

在文件资源管理器中，选择“App.razor”。
将 DefaultLayout="typeof(MainLayout)" 声明添加到 RouteView 元素。
将 Layout="typeof(MainLayout)" 添加到 LayoutView。

App.razor 现在应类似于以下示例：

<Router AppAssembly="typeof(Program).Assembly" Context="routeData">
    <Found>
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <div class="main">Sorry, there's nothing at this address.</div>
        </LayoutView>
    </NotFound>
</Router>

测试新布局

在 Visual Studio Code 中，选择 F5。在“运行”菜单上，选择“开始调试”。

使用默认布局的好处是，可以将它应用于所有页面，并将其用于“未找到”页面的布局视图。
若要停止应用，请选择 Shift + F5。

在本模块中，你已完成需要对应用进行的操作。若要了解如何处理表单和验证，请完成本学习路径中的下一模块。

练习 - 添加 Blazor 布局以减少代码中的重复

添加 MainLayout 组件

在页面组件上使用 Blazor 布局

将所有页面更新为新布局

测试新布局

反馈