定州市网站建设_网站建设公司_SSL证书_seo优化

、创建和应用Blazor 布局

网站应用往往有许多公共的视图部分，比如顶部导航nav,底部的footer，管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。

Blazor 布局是一个 Razor 组件，它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。

1、创建布局（可以理解为母版页）

新建一个razor文件，文件顶部使用@inherits LayoutComponentBase 表示继承自LayoutComponentBase ，说明这是个母版页，使@Body作为占位。

17db26a2fc59811f252472259a25564c

@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 提供。

4e72d0845945faae717cbd8bc4e4dc47

e2f8774f69788dd6c9469c6be0cee86a​

3、应用布局

在razor文件顶部申明“@layout 模板页名”来设置母版页，

bc1edcdda470ec5d61fc422465d5e24e

如果一个页面没有设置模板页，（就像blazor默认项目那样），他就会使用在app.razor文件中定义的默认模板页

07c69bc84df89396eb47a0f95384f6b9​

如何不设置任何模板页?

比如我们的登录的页面是不需要加通用模板的，通过@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>

4、嵌套布局

组件可以引用一个布局，该布局又可以引用另一个布局。 例如，嵌套布局可用于创建多级菜单结构。

以下示例演示如何使用嵌套布局:

@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>

点击并拖拽以移动

更多参考：

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/layouts?view=aspnetcore-9.0

二、路由配置和导航

ASP.NET Core Blazor 路由配置和导航 - 码农刚子 - 博客园

三、条件渲染和循环渲染

第一章中已经讲过了Blazor的语法。

1、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";

}

点击并拖拽以移动

2、Blazor 循环渲染

下面我们有一个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: 未知

}

}