ASP.NET Core Blazor簡介和快速入門三（布局和路由）
一、創(chuàng)建和應(yīng)用Blazor 布局
網(wǎng)站應(yīng)用往往有許多公共的視圖部分，比如頂部導(dǎo)航nav,底部的footer，管理系統(tǒng)的左邊的menu菜單等等。Layout可以輕松實現(xiàn)以上的效果。
Blazor 布局是一個 Razor 組件，它與引用該布局的組件共享標(biāo)記。 布局可以使用數(shù)據(jù)綁定、依賴關(guān)系注入和組件的其他功能。
1、創(chuàng)建布局（可以理解為母版頁）
新建一個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 項目模板創(chuàng)建的應(yīng)用中，MainLayout 組件就是應(yīng)用的默認布局。
Blazor 的 CSS 隔離功能將獨立 CSS 樣式應(yīng)用于 MainLayout 組件。 按照慣例，樣式由相同名稱的隨附樣式表 MainLayout.razor.css 提供。
?
3、應(yīng)用布局
在razor文件頂部申明“@layout 模板頁名”來設(shè)置母版頁，
如果一個頁面沒有設(shè)置模板頁，（就像blazor默認項目那樣），他就會使用在app.razor文件中定義的默認模板頁
?
如何不設(shè)置任何模板頁?
比如我們的登錄的頁面是不需要加通用模板的，通過@if 控制 RouteView的DefaultLayout即可
4、嵌套布局
組件可以引用一個布局，該布局又可以引用另一個布局。 例如，嵌套布局可用于創(chuàng)建多級菜單結(jié)構(gòu)。
以下示例演示如何使用嵌套布局:
@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 組件包含頂級布局元素，其中包含有標(biāo)頭 (<header>...</header>) 和頁腳 (<footer>...</footer>) 元素。 帶有DoctorWhoLayout組件的 Episodes 會在@Body出現(xiàn)的位置顯示。
@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>以下呈現(xiàn)的 HTML 標(biāo)記由前面的嵌套布局生成:
<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>更多參考：
二、路由配置和導(dǎo)航
ASP.NET Core Blazor 路由配置和導(dǎo)航 - 碼農(nóng)剛子 - 博客園
三、條件渲染和循環(huán)渲染
第一章中已經(jīng)講過了Blazor的語法。
1、Blazor 條件渲染
Blazor 中的 @if 語法用于根據(jù)條件動態(tài)渲染頁面元素。它類似于 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 或結(jié)合 else if 使用：
@if (userRole == "Admin")
{
<p>歡迎管理員！</p>
}
else if (userRole == "User")
{
<p>歡迎普通用戶！</p>
}
else
{
<p>請登錄。</p>
}
@code {
private string userRole = "Admin";
}2、Blazor 循環(huán)渲染
下面我們有一個list需要顯示多個學(xué)生信息,@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簡介和快速入門三（布局和路由）》的所有內(nèi)容，感謝你的閱讀，希望對你有所收獲。如果可用的話，給我點個贊??吧。
浙公網(wǎng)安備 33010602011771號