在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");

            

这里需要注意的地方为MapFallbackToAreaPage里第一段的路径要与<base href="~/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了。

感谢您的观看。

Blazor使用区域(Area)的更多相关文章

  1. Asp.Net MVC part4 异步、校验、区域Area

    异步方式1:使用jquery的异步函数方式2:使用MVC的AjaxHelper行为的返回值设置:JsonResult对象,使用Json方法接收一个对象,在内部会完成对象的js序列化,向输出流中输出js ...

  2. MVC区域area

    1.当项目业务比较庞大,可以通过区域来分拆. 2.添加区域时,默认会生成一下文件. 3.Application_Start()必需含有AreaRegistration.RegisterAllAreas ...

  3. ASP.NET MVC 右键点击添加没有区域(Area)、控制器、试图等选项

    在MVC项目中准备添加控制器.区域时发现没有控制器这个选项,当时没有在意以为VS出问题了,网上所搜了一下,有人说没有安装:Microsoft.AspNet.Mvc或者需要升级. 本次的解决如下: 1) ...

  4. MVC5 Api Area 区域

    到Area区分不同的模块让项目结构更加的清晰 TODO 步骤如下: 项目 –> 添加 -> 区域 (Area) 添加路由规则 public static class WebApiConfi ...

  5. ASP.NET MVC Area 区域

    大型网站或项目通常有很多子系统或功能模块,如大型网站可能包含酒店.旅游.机票子系统,通过二级域名来访问,或者一个网站的前台和后台模块,每个团队负责某一子系统或模块,为了各团队进行协同开发,我们可以分不 ...

  6. mvc Area(区域)相关技术

    ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...

  7. MVC 添加Area

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...

  8. ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  9. Nancy之区域和分部视图的使用

    一.前言 在MVC中,区域(Area)和分部视图(PartialView)应该是我们用的十分频繁的两个东西 今天我们就在Nancy中,把这两个东西简单的用起来!   二.简单使用之区域 区域,无论是对 ...

随机推荐

  1. VMware安装win7后，安装VMware Tools时报错安装程序无法继续。本程序需要您将此虚拟机上安装的操作系统更新到SP1

    具体报错: 倘若你用的是这样的镜像:cn_windows_7_enterprise_x64_dvd_x15-70741.iso 换镜像源.换镜像源.换镜像源! 换成带sp1的iso镜像:cn_wind ...

  2. 4月18日 python学习总结 异常处理、网络编程

    一. 异常 1.什么是异常 异常是错误发生的信号,程序一旦出错,如果程序中还没有相应的处理机制 那么该错误就会产生一个异常抛出来,程序的运行也随之终止 2.一个异常分为三部分: 1.异常的追踪信息 2 ...

  3. redis的事件处理机制

    redis的事件处理机制 redis是单进程,单线程模型,与nginx的多进程不同,与golang的多协程也不同,"工作的工人"那么少,可那么为什么redis能这么快呢? epol ...

  4. Zwibbler—前端Canvas绘图工具使用记录

    本人第一次发博客,用意在于记录自己在开发过程中用到的实用工具并分享出来,写的可能不好,请大家多多包涵!!! 工具官网:https://www.zwibbler.com 基于Canvas的一个前端绘画工 ...

  5. Rabbit MQ 怎么保证可靠性、幂等性、消费顺序？

    RabbitMQ如何保证消息的可靠性 RabbitMQ消息丢失的三种情况 生产者弄丢消息时的解决方法 方法一:生产者在发送数据之前开启RabbitMQ的事务(采用该种方法由于事务机制,会导致吞吐量下降 ...

  6. 为什么 char 数组比 Java 中的 String 更适合存储密码？

    另一个基于 String 的棘手 Java 问题,相信我只有很少的 Java 程序员可以正确回答这个问题.这是一个真正艰难的核心Java面试问题,并且需要对 String 的扎实知识才能回答这个问题. ...

  7. @Controller 注解？

    该注解表明该类扮演控制器的角色,Spring不需要你继承任何其他控制器基类或引用Servlet API.

  8. springcloud断路器的作用?

    当一个服务调用另一个服务由于网络原因或自身原因出现问题,调用者就会等待被调用者的响应 当更多的服务请求到这些资源导致更多的请求等待,发生连锁效应(雪崩效应) 断路器有完全打开状态:一段时间内 达到一定 ...

  9. js获取元素本身相关值

    Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集 ...

  10. 什么是 Spring 的依赖注入？

    依赖注入,是 IOC 的一个方面,是个通常的概念,它有多种解释.这概念是说你 不用创建对象,而只需要描述它如何被创建.你不在代码里直接组装你的组件和 服务,但是要在配置文件里描述哪些组件需要哪些服务, ...