在MVC中，我們經常使用區域(Area)來區分各個模塊，比如后台我們可以寫一個Admin的Area。
到了Blazor時代，已經不推薦這么做了，現在推薦的做法是通過Url來區分，比如Admin可以配置@page /Admin/Article，實現與原來Admin的Area差不多的用法。
但是有時候我們有需求在Blazor中使用Area。比如我的Jx.Cms,前台使用MVC，后台使用Blazor。由於兩者相對獨立，這里使用Area進行區分更加合適。這里我就借用Jx.Cms的代碼來說一下如何創建一個Admin Area。
1、添加一個獨立的razor文件，作為Blazor的啟動頁面。
在Jx.Cms中，我添加了一個AppStartup.razor文件，其代碼如下：
@using Microsoft.AspNetCore.Components.Authorization
<BootstrapBlazorRoot>
<Router AppAssembly="typeof(Startup).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="routeData">
<NotAuthorized>
<RedirectToLogin></RedirectToLogin>
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<h2>抱歉！找不到頁面。</h2>
</NotFound>
</Router>
</BootstrapBlazorRoot>
這個頁面就是Blazor默認的起始頁，沒有什么特殊內容。
2、添加一個對應的cshtml頁面作為Blazor回落的接收頁面。
在Jx.Cms中，這個頁面_AdminHost.cshtml，代碼如下：
@page "/Admin"
@using Jx.Cms.Web
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>后台管理 - JX.CMS</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="author" content="JX">
<link rel="stylesheet" href="/_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
<link rel="stylesheet" href="/_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" />
<link rel="stylesheet" href="/Admin/css/font-awesome.min.css">
<link rel="stylesheet" href="/Jx.Cms.Web.styles.css">
<base href="~/Admin/" />
</head>
<body>
<component type="typeof(AppStartup)" render-mode="Server"/>
<script type="text/javascript" src="/_framework/blazor.server.js"></script>
<script src="/_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
<script src="/Admin/js/summernote-zh-CN.min.js"></script>
<script src="/_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"></script>
</body>
</html><component type="typeof(AppStartup)" render-mode="Server"/>這里的AppStartup是第一步創建的AppStartup.razor，第一個就是<base href="~/Admin/">這里必須要寫，基礎路徑要跟后面添加的Area一致，否則顯示不出來。
這里還需要注意一個問題，就是render-mode建議設置為Server，因為Blazor有個預渲染的BUG(到.Net6尚未修復)，即預渲染的時候查找的是全路徑，正式連接用用的是去掉Area的路徑。
3、添加Area的endpoint。
在app.UseEndpoints中添加對應的區域設置，代碼如下：
endpoints.MapAreaControllerRoute("admin", "Admin", "/Admin/{controller=Home}/{action=Index}/{id?}");
endpoints.MapBlazorHub("~/Admin/_blazor");
endpoints.MapFallbackToAreaPage("~/Admin/{*clientroutes:nonfile}","/_AdminHost", "Admin");
4、添加razor文件。
這里用外觀設置里的內容做講解吧。代碼如下：
@page "/Appearance"
@using Jx.Cms.Common.Attribute
@inject NavigationManager NavigationManager
@attribute [Menu(MenuIds.AppearanceId, "外觀", "/Appearance", iconClass:"fa fa-newspaper-o")]
@code {
protected override void OnInitialized()
{
base.OnInitialized();
NavigationManager.NavigateTo("/Admin/Appearance/Theme");
}
}這里的代碼沒有任何內容，就是注意兩個地方即可，一是@page "/Appearance"里不能加/Admin，否則會報404，找不到頁面。但是如果你用render-mode="ServerPrerendered"的話，開始的預渲染會報404，然后才顯示正確的內容。
二就是NavigationManager.NavigateTo這個方法跳轉的時候，是需要加上/Admin的。
這樣就可以在Blazor中使用Area了。
感謝您的觀看。