Blazor使用区域(Area)
阅读原文时间:2023年07月08日阅读:5

在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>
&nbsp;&nbsp;&nbsp;&nbsp;<Router&nbsp;AppAssembly="typeof(Startup).Assembly">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Found&nbsp;Context="routeData">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<AuthorizeRouteView&nbsp;RouteData="routeData">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<NotAuthorized>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<RedirectToLogin></RedirectToLogin>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</NotAuthorized>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</AuthorizeRouteView>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Found>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<NotFound>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h2>抱歉!找不到页面。</h2>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</NotFound>
&nbsp;&nbsp;&nbsp;&nbsp;</Router>
</BootstrapBlazorRoot>

这个页面就是Blazor默认的起始页,没有什么特殊内容。

2、添加一个对应的cshtml页面作为Blazor回落的接收页面。

在Jx.Cms中,这个页面_AdminHost.cshtml,代码如下:

@page&nbsp;"/Admin"
@using&nbsp;Jx.Cms.Web
@addTagHelper&nbsp;*,Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE&nbsp;html>
<html&nbsp;lang="zh">
<head>
<meta&nbsp;charset="utf-8">
<meta&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1,&nbsp;maximum-scale=1,&nbsp;user-scalable=no"&nbsp;/>
<title>后台管理&nbsp;-&nbsp;JX.CMS</title>
<link&nbsp;rel="icon"&nbsp;href="favicon.ico"&nbsp;type="image/ico">
<meta&nbsp;name="author"&nbsp;content="JX">
<link&nbsp;rel="stylesheet"&nbsp;href="/_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
<link&nbsp;rel="stylesheet"&nbsp;href="/_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css"&nbsp;/>
<link&nbsp;rel="stylesheet"&nbsp;href="/Admin/css/font-awesome.min.css">
<link&nbsp;rel="stylesheet"&nbsp;href="/Jx.Cms.Web.styles.css">
<base&nbsp;href="~/Admin/"&nbsp;/>
</head>
<body>
&nbsp;&nbsp;&nbsp;&nbsp;<component&nbsp;type="typeof(AppStartup)"&nbsp;render-mode="Server"/>
&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"&nbsp;src="/_framework/blazor.server.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="/_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
<script&nbsp;src="/Admin/js/summernote-zh-CN.min.js"></script>
<script&nbsp;src="/_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"></script>
</body>
</html>

这里面有两个地方需要注意,一个是<component&nbsp;type="typeof(AppStartup)"&nbsp;render-mode="Server"/>这里的AppStartup是第一步创建的AppStartup.razor,第一个就是这里必须要写,基础路径要跟后面添加的Area一致,否则显示不出来。

这里还需要注意一个问题,就是render-mode建议设置为Server,因为Blazor有个预渲染的BUG(到.Net6尚未修复),即预渲染的时候查找的是全路径,正式连接用用的是去掉Area的路径。

3、添加Area的endpoint。

在app.UseEndpoints中添加对应的区域设置,代码如下:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endpoints.MapAreaControllerRoute("admin",&nbsp;"Admin",&nbsp;"/Admin/{controller=Home}/{action=Index}/{id?}");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endpoints.MapBlazorHub("~/Admin/_blazor");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endpoints.MapFallbackToAreaPage("~/Admin/{*clientroutes:nonfile}","/_AdminHost",&nbsp;"Admin");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

这里需要注意的地方为MapFallbackToAreaPage里第一段的路径要与对应起来。

4、添加razor文件。

这里用外观设置里的内容做讲解吧。代码如下:

@page&nbsp;"/Appearance"
@using&nbsp;Jx.Cms.Common.Attribute
@inject&nbsp;NavigationManager&nbsp;NavigationManager

@attribute&nbsp;[Menu(MenuIds.AppearanceId,&nbsp;"外观",&nbsp;"/Appearance",&nbsp;iconClass:"fa&nbsp;fa-newspaper-o")]

@code&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;override&nbsp;void&nbsp;OnInitialized()
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base.OnInitialized();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NavigationManager.NavigateTo("/Admin/Appearance/Theme");
&nbsp;&nbsp;&nbsp;&nbsp;}
}

这里的代码没有任何内容,就是注意两个地方即可,一是@page "/Appearance"里不能加/Admin,否则会报404,找不到页面。但是如果你用render-mode="ServerPrerendered"的话,开始的预渲染会报404,然后才显示正确的内容。

二就是NavigationManager.NavigateTo这个方法跳转的时候,是需要加上/Admin的。

这样就可以在Blazor中使用Area了。

感谢您的观看。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章