大家好，我是码农刚子。本文介绍了Blazor中的布局、路由和条件渲染功能。在布局方面，详细讲解了如何创建和应用布局组件（继承LayoutComponentBase），包括默认布局MainLayout的使用、嵌套布局的实现方式以及如何控制特定页面不应用布局（如登录页）。在路由和导航部分，简要提及了基本配置方法。最后，重点阐述了条件渲染（@if语句）和循环渲染（@foreach等）的语法和实际应用场景，通过学生信息列表等示例展示了数据绑定和动态UI生成的实现方式。这些核心功能共同构成了Blazor组件化开发的基础框架。
一、创建和应用Blazor 布局
网站应用往往有许多公共的视图部分，比如顶部导航nav,底部的footer，管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。
Blazor 布局是一个 Razor 组件，它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。
1、创建布局（可以理解为母版页）
新建一个razor文件，文件顶部使用@inherits LayoutComponentBase 表示继承自LayoutComponentBase ，说明这是个母版页，使@Body作为占位。
@inherits LayoutComponentBase
Doctor Who® Database
Doctor Who® Database
2、MainLayout 组件
在从 Blazor 项目模板创建的应用中，MainLayout 组件就是应用的默认布局。
Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 MainLayout 组件。 按照惯例，样式由相同名称的随附样式表 MainLayout.razor.css 提供。
3、应用布局
在razor文件顶部申明“@layout 模板页名”来设置母版页，
如果一个页面没有设置模板页，（就像blazor默认项目那样），他就会使用在app.razor文件中定义的默认模板页
如何不设置任何模板页?
比如我们的登录的页面是不需要加通用模板的，通过@if 控制 RouteView的DefaultLayout即可
@if (routeData.PageType == typeof(Pages.LayoutSample)){}else{} Not found Sorry, there's nothing at this address.
4、嵌套布局
组件可以引用一个布局，该布局又可以引用另一个布局。 例如，嵌套布局可用于创建多级菜单结构。
以下示例演示如何使用嵌套布局:
@inherits LayoutComponentBase
@layout ProductionsLayout
Doctor Who® Database
Doctor Who® Database
ProductionsLayout 组件包含顶级布局元素，其中包含有标头 (<header>...</header>) 和页脚 (<footer>...</footer>) 元素。 带有DoctorWhoLayout组件的 Episodes 会在@Body出现的位置显示。
@inherits LayoutComponentBase
Productions
以下呈现的 HTML 标记由前面的嵌套布局生成:
Productions
Doctor Who® Database
更多参考：
https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/layouts?view=aspnetcore-9.0
二、路由配置和导航
ASP.NET Core Blazor 路由配置和导航
https://blog.csdn.net/SC2LQ/article/details/153776798
三、条件渲染和循环渲染
第一章中已经讲过了Blazor的语法。
1、Blazor 条件渲染
Blazor 中的 @if 语法用于根据条件动态渲染页面元素。它类似于 C# 的 if 语句，但专门用于处理 UI 渲染。请看以下示例：
@if (isLoading)
{加载中...
}
else
{加载完成！
}
@code {private bool isLoading = true;protected override void OnInitialized(){// 模拟加载完成Task.Delay(2000).ContinueWith(_ =>{isLoading = false;InvokeAsync(StateHasChanged);});}
}你可以嵌套多个 @if 或结合 else if 使用：
@if (userRole == "Admin")
{欢迎管理员！
}
else if (userRole == "User")
{欢迎普通用户！
}
else
{请登录。
}
@code {private string userRole = "Admin";
}2、Blazor 循环渲染
下面我们有一个list需要显示多个学生信息,@for,@do…while,@while 与foreach类似这里就不在赘述
用户列表
@foreach (var item in list){@switch (item.Gender){case 0:{break;}case 1:{break;}case 2:{break;}}}Name Age Gender @item.Name @item.Age 男 女 未知
@code {List list = new List();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: 未知}
} 