@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精選營";
}

<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精選營";
}

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

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

@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 (userRole == "Admin")
{
   <p>歡迎管理員！</p>
}
else if (userRole == "User")
{
   <p>歡迎普通用戶！</p>
}
else
{
   <p>請登錄。</p>
}
@code {
   private string userRole = "Admin";
}

<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簡介和快(kuai)速(su)入門三（布局和路由）》的所有內容，感謝你(ni)(ni)的閱讀，希望對你(ni)(ni)有所收獲。如果可(ke)用的話，給我(wo)點個(ge)贊(zan)??吧。