网站应用往往有许多公共的视图部分，比如顶部导航nav,底部的footer，管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。
Blazor 布局是一个 Razor 组件，它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。
新建一个razor文件，文件顶部使用@inherits LayoutComponentBase 表示继承自LayoutComponentBase ，说明这是个母版页，使@Body作为占位。
@inherits LayoutComponentBase <PageTitle>Doctor Who® Database</PageTitle> <header> <h1>Doctor Who® Database</h1> </header> <nav> <a href="main-list">Main Episode List</a> <a href="search">Search</a> <a href="new">Add Episode</a> </nav> @Body <footer> @TrademarkMessage </footer> @code { public string TrademarkMessage { get; set; } ="CSharp精选营"; }
在从 Blazor 项目模板创建的应用中，MainLayout 组件就是应用的默认布局。
Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 MainLayout 组件。 按照惯例，样式由相同名称的随附样式表 MainLayout.razor.css 提供。
在razor文件顶部申明“@layout 模板页名”来设置母版页，
如果一个页面没有设置模板页，（就像blazor默认项目那样），他就会使用在app.razor文件中定义的默认模板页
如何不设置任何模板页?
比如我们的登录的页面是不需要加通用模板的，通过@if 控制 RouteView的DefaultLayout即可
<Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> @if (routeData.PageType == typeof(Pages.LayoutSample)) { <RouteView RouteData="@routeData" /> } else { <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>
组件可以引用一个布局，该布局又可以引用另一个布局。 例如，嵌套布局可用于创建多级菜单结构。
以下示例演示如何使用嵌套布局:
@inherits LayoutComponentBase @layout ProductionsLayout <PageTitle>Doctor Who® Database</PageTitle> <header> <h1>Doctor Who® Database</h1> </header> <nav> <a href="main-episode-list">Main Episode List</a> <a href="episode-search">Search</a> <a href="new-episode">Add Episode</a> </nav> @Body <footer> @TrademarkMessage </footer> @code { public string TrademarkMessage { get; set; } = "CSharp精选营"; }
ProductionsLayout 组件包含顶级布局元素，其中包含有标头 (<header>...</header>) 和页脚 (<footer>...</footer>) 元素。 带有DoctorWhoLayout组件的 Episodes 会在@Body出现的位置显示。
@inherits LayoutComponentBase <header> <h1>Productions</h1> </header> <nav> <a href="main-production-list">Main Production List</a> <a href="production-search">Search</a> <a href="new-production">Add Production</a> </nav> @Body <footer> Footer of Productions Layout </footer>
以下呈现的 HTML 标记由前面的嵌套布局生成:
<header><h1>Productions</h1></header> <nav><a href="main-production-list">Main Production List</a> <a href="production-search">Search</a> <a href="new-production">Add Production</a> </nav> <header><h1>Doctor Who® Database</h1></header> <nav><a href="main-episode-list">Main Episode List</a> <a href="episode-search">Search</a> <a href="new-episode">Add Episode</a> </nav> <footer>CSharp精选营</footer> <footer> Footer of Productions Layout </footer>
更多参考：
ASP.NET Core Blazor 路由配置和导航 - 码农刚子 - 博客园
第一章中已经讲过了Blazor的语法。
Blazor 中的 @if 语法用于根据条件动态渲染页面元素。它类似于 C# 的 if 语句，但专门用于处理 UI 渲染。请看以下示例：
@if (isLoading) { <p>加载中...</p> } else { <p>加载完成！</p> } @code { private bool isLoading = true; protected override void OnInitialized() { // 模拟加载完成 Task.Delay(2000).ContinueWith(_ => { isLoading = false; InvokeAsync(StateHasChanged); }); } }
你可以嵌套多个 @if 或结合 else if 使用：
@if (userRole == "Admin") { <p>欢迎管理员！</p> } else if (userRole == "User") { <p>欢迎普通用户！</p> } else { <p>请登录。</p> } @code { private string userRole = "Admin"; }
下面我们有一个list需要显示多个学生信息,@for,@do…while,@while 与foreach类似这里就不在赘述
<h3>用户列表</h3> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> @foreach (var item in list) { <tr> <td>@item.Name</td> <td>@item.Age</td> @switch (item.Gender) { case 0: { <td>男</td> break; } case 1: { <td>女</td> break; } case 2: { <td>未知</td> break; } } </tr> } </tbody> </table> @code { List<User> list = new List<User>(); User User1 = new User() { Name = "John", Age = 20, Gender = 2, }; User User2 = new User() { Name = "Sub", Age = 22, Gender = 0, }; protected override void OnInitialized() { list.Add(User1); list.Add(User2); } public class User { public string Name { get; set; } = string.Empty; public int Age { get; set; } public int Gender { get; set; } // 0: 男, 1: 女, 2: 未知 } }
以上就是《ASP.NET Core Blazor简介和快速入门三（布局和路由）》的所有内容，感谢你的阅读，希望对你有所收获。如果可用的话，给我点个赞👍吧。
评论已关闭。
