Blazor使用区域(Area)
在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>
@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一致,否则显示不出来。
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/">对应起来。
@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)的更多相关文章
- Asp.Net MVC part4 异步、校验、区域Area
异步方式1:使用jquery的异步函数方式2:使用MVC的AjaxHelper行为的返回值设置:JsonResult对象,使用Json方法接收一个对象,在内部会完成对象的js序列化,向输出流中输出js ...
- MVC区域area
1.当项目业务比较庞大,可以通过区域来分拆. 2.添加区域时,默认会生成一下文件. 3.Application_Start()必需含有AreaRegistration.RegisterAllAreas ...
- ASP.NET MVC 右键点击添加没有区域(Area)、控制器、试图等选项
在MVC项目中准备添加控制器.区域时发现没有控制器这个选项,当时没有在意以为VS出问题了,网上所搜了一下,有人说没有安装:Microsoft.AspNet.Mvc或者需要升级. 本次的解决如下: 1) ...
- MVC5 Api Area 区域
到Area区分不同的模块让项目结构更加的清晰 TODO 步骤如下: 项目 –> 添加 -> 区域 (Area) 添加路由规则 public static class WebApiConfi ...
- ASP.NET MVC Area 区域
大型网站或项目通常有很多子系统或功能模块,如大型网站可能包含酒店.旅游.机票子系统,通过二级域名来访问,或者一个网站的前台和后台模块,每个团队负责某一子系统或模块,为了各团队进行协同开发,我们可以分不 ...
- mvc Area(区域)相关技术
ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...
- MVC 添加Area
在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...
- ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- Nancy之区域和分部视图的使用
一.前言 在MVC中,区域(Area)和分部视图(PartialView)应该是我们用的十分频繁的两个东西 今天我们就在Nancy中,把这两个东西简单的用起来! 二.简单使用之区域 区域,无论是对 ...
随机推荐
- 详解数据库三种删除方法: delete drop truncate
Delete Delete :删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行). 删除某一行:Delete from 数据表名称 where 列名称=值: 删除所有行:Del ...
- Reverse Shell Cheat Sheet
Reverse Shell Cheat Sheet If you're lucky enough to find a command execution vulnerability during a ...
- CF1504X Codeforces Round #712
CF1504D Flip the Cards(找规律+贪心) 题目大意:给你n张牌,正反面都有数字,保证所有牌上的数字在$[1,2n]$内且互不相同.你可以翻转任意张牌,接下来需要把牌按正面的数字从小 ...
- Java时间处理类LocalDate和LocalDateTime常用方法
Java时间处理类LocalDate和LocalDateTime常用方法 https://blog.csdn.net/weixin_42579074/article/details/93721757
- Mysql之B+树索引实战
索引代价 空间上的代价 一个索引都对应一棵B+树,树中每一个节点都是一个数据页,一个页默认会占用16KB的存储空间,所以一个索引也是会占用磁盘空间的. 时间上的代价 索引是对数据的排序,那么当对表中的 ...
- Kafka学习(一)
作者:普适极客链接:https://www.zhihu.com/question/53331259/answer/1321992772来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- vue渐进式?
小到可以只使用核心功能,比如单文件组件作为一部分嵌入:大到使用整个工程,vue init webpack my-project来构建项目:VUE的核心库及其生态系统也可以满足你的各式需求(core+v ...
- 什么是Netflix Feign?它的优点是什么?
Feign是受到Retrofit,JAXRS-2.0和WebSocket启发的java客户端联编程序.Feign的第一个目标是将约束分母的复杂性统一到http apis,而不考虑其稳定性.在emplo ...
- Anonymous Inner Class(匿名内部类)是否可以继承其它类?是否可以实现接口?
可以继承其他类或实现其他接口,在 Swing 编程和 Android 开发中常用此方式来 实现事件监听和回调.
- Oracle入门基础(十二)一一储存过程及触发器
1.第一个存储过程 打印Hello World 调用存储过程: 1.exec sayhelloworld(); 2.begin sayhelloworld(); sayhelloworld(); en ...