ASP.NET Core Blazor的布局和路由如何快速入门？
摘要：大家好，我是码农刚子。本文介绍了Blazor中的布局、路由和条件渲染功能。在布局方面，详细讲解了如何创建和应用布局组件（继承LayoutComponentBase），包括默认布局MainLayout的使用、嵌套布局的实现方式以及如何控制特
大家好，我是码农刚子。本文介绍了Blazor中的布局、路由和条件渲染功能。在布局方面，详细讲解了如何创建和应用布局组件（继承LayoutComponentBase），包括默认布局MainLayout的使用、嵌套布局的实现方式以及如何控制特定页面不应用布局（如登录页）。在路由和导航部分，简要提及了基本配置方法。最后，重点阐述了条件渲染（@if语句）和循环渲染（@foreach等）的语法和实际应用场景，通过学生信息列表等示例展示了数据绑定和动态UI生成的实现方式。这些核心功能共同构成了Blazor组件化开发的基础框架。
一、创建和应用Blazor 布局
网站应用往往有许多公共的视图部分，比如顶部导航nav,底部的footer，管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。
Blazor 布局是一个 Razor 组件，它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。
1、创建布局（可以理解为母版页）
新建一个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精选营";
}
2、MainLayout 组件
在从 Blazor 项目模板创建的应用中，MainLayout 组件就是应用的默认布局。
Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 MainLayout 组件。 按照惯例，样式由相同名称的随附样式表 MainLayout.razor.css 提供。