在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了。
感谢您的观看。
发表评论