练习 - 添加 Blazor 布局以减少代码中的重复
将页面添加到 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> © 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 组件中删除
@layout MainLayout
。 - 在文件资源管理器中,展开“页面”。 然后选择“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 以停止应用。
在本模块中,你已完成需要对应用进行的操作。 若要了解如何处理表单和验证,请完成本学习路径中的下一模块。