DDD开发框架ABP之导航菜单
每一个网站都会有导航菜单(通常不止一个),ASP.NET Boilerplate(后文简称ABP)提供了一种创建和使用菜单的通用架构,利用架构我们可以方便的创建菜单并显示给用户。本文主要说明菜单的创建,以及结合AngularJS上菜单的显示,如何从数据库动态取得菜单数据不再本文范围。
创建菜单
一个应用程序可能有多个不同的模块,每个模块有它对应的菜单项。为了定义这些菜单项,我们需要创建一个继承自 NavigationProvider 的子类。
假设我们有一个如下所示的主菜单:
工作台任务留言板系统管理用户管理角色管理
这里面系统管理菜单有两个子菜单项。建立一个这样菜单的类ZeroNavigationProvider,如下:
1 public class ZeroNavigationProvider : NavigationProvider 2 { 3 public override void SetNavigation(INavigationProviderContext context) 4 { 5 context.Manager.MainMenu 6 .AddItem( 7 new MenuItemDefinition( 8 "Dashboard", 9 new LocalizableString("HomePage", "Zero"), 10 url: "#/", 11 icon: "icon-home" 12 ) 13 ).AddItem( 14 new MenuItemDefinition( 15 "Task", 16 new LocalizableString("Task", "Zero"), 17 url: "#/tasklist", 18 icon: "icon-tag" 19 ) 20 ).AddItem( 21 new MenuItemDefinition( 22 "QA", 23 new LocalizableString("QA", "Zero"), 24 url: "#/qa", 25 icon: "icon-question" 26 ) 27 ).AddItem( 28 new MenuItemDefinition( 29 "SystemAdmin", 30 new LocalizableString("SystemAdmin", "Zero"), 31 icon: "icon-wrench" 32 ).AddItem( 33 new MenuItemDefinition( 34 "UserManage", 35 new LocalizableString("UserManage", "Zero"), 36 url: "/systemadmin/users", 37 icon: "icon-users" 38 ) 39 ).AddItem( 40 new MenuItemDefinition( 41 "RoleManage", 42 new LocalizableString("RoleManage", "Zero"), 43 url: "/systemadmin/role", 44 icon: "icon-briefcase" 45 ) 46 ); 47 } 48 }
一个MenuItemDefinition对象可能拥有一个唯一的命名,一个本地化显示的名称,一个URL地址以及一个图标。一个菜单项也可能需要拥有特定权限的用户才可以浏览。
1 new MenuItemDefinition( 2 "RoleManage", 3 new LocalizableString("RoleManage", "Zero"), 4 url: "/systemadmin/role", 5 icon: "icon-briefcase", 6 requiredPermissionName: "systemadmin", 7 requiresAuthentication:true 8 )
本地化显示的名称来自于资源文件,LocalizableString第二个参数就是系统中资源文件的名称。这时候需要确保资源文件存在,比如:Zero-zh-CN.xml,而且根据第一个代码参数必须能够正常取出对应的文本内容,否则菜单可能无法显示。
INavigationProviderContext 提供了一些方法接口,用于得到已经存在的菜单项,添加菜单以及子菜单。因此不同的模块能够添加自己的菜单项。
一个应用程序可能有多个菜单,context.Manager.MainMenu 只是对应默认的主菜单。我们可以利用 context.Manager.Menus 属性自己创建并添加更多的菜单。
创建了 NavigationProvider 之后,我们需要将它注册到ABP的配置项中,这个动作应该放在我们模块的 PreInitialize 事件中。比如我们网站的Web层有一个 ZeroWebModule,在其中添加代码:
1 public override void PreInitialize() 2 { 3 // other configuration code, like localization 4 // Configure navigation/menu 5 Configuration.Navigation.Providers.Add<ZeroNavigationProvider>(); 6 }
显示菜单
我们能够在服务器端创建菜单。Abp.Application.Navigation 命名空间下的 IUserNavigationManager 接口通过依赖注入,实现菜单项的取得和显示。服务器端创建菜单通常用于ASP.NET MVC 的多页面网站,这里略过不表。
我们也可以在客户端创建菜单。ABP自动产生Javascript API ,使得我们在客户端可以轻松取得菜单和菜单项。做到这一点,我们只需要在网页引入下面的一行代码(动态生成的Javascript):
<script src="~/AbpScripts/GetScripts" type="text/javascript"></script>
在调试状态下,我们可以查看动态生成的Javascript代码,其中有一段关于导航菜单的定义:
1 (function() { 2 abp.nav = {}; 3 abp.nav.menus = { 4 'MainMenu': { 5 name: 'MainMenu', 6 displayName: 'Main menu', 7 items: [{ 8 name: 'Dashboard', 9 icon: 'icon-home', 10 url: '#/', 11 displayName: '工作台', 12 items: [] 13 } , { 14 name: 'Task', 15 icon: 'icon-tag', 16 url: '#/task', 17 displayName: '任务', 18 items: [] 19 } , { 20 name: 'QA', 21 icon: 'icon-question', 22 url: '#/qa', 23 displayName: '留言板', 24 items: [] 25 } , { 26 name: 'SystemAdmin', 27 icon: 'icon-wrench', 28 displayName: '系统管理', 29 items: [{ 30 name: 'UserManage', 31 icon: 'icon-users', 32 url: '/systemadmin/users', 33 displayName: '用户管理', 34 items: [] 35 } , { 36 name: 'RoleManage', 37 icon: 'icon-briefcase', 38 url: '/systemadmin/rolelist', 39 displayName: '角色管理', 40 items: [] 41 }] 42 }; 43 } 44 })();
在Javascript 里面我们就可以使用 abp.nav 命名空间下的方法和属性,比如:abp.nav.menus.MainMenu 用于取得应用程序的主菜单。
转载于:https://www.cnblogs.com/defzhu/p/4843292.html
DDD开发框架ABP之导航菜单相关推荐
- 基于DDD的现代ASP.NET开发框架--ABP系列之1、ABP总体介绍
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是"ASP.NET Boilerplate Project (ASP.NET样 ...
- ABP入门系列(6)——定义导航菜单
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手 ...
- abp.ajax get,ABP框架中导航菜单的使用及JavaScript API获取菜单的方法
每一个WEB应用程序都有导航菜单,Abp也为用户提供了通用的创建和显示菜单方式. 创建菜单一个应用程序可能包含不同的模块,而每个模块都可能有它自己的菜单项.在Abp中,需要创建一个派生自Navigat ...
- 【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- web应用程序安全性测试_Web应用程序导航菜单的可访问性
web应用程序安全性测试 A few years ago when I started my journey in the field of frontend engineering at that ...
- css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片 第二步: 在网页 区添加样式定义 [code] /* = ...
- 导航条——收缩式导航菜单
1.概述 在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点 本实例主要是应用JavaScript控 ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce& ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
最新文章
- 哪一类功率放大电路效率最高_最简单逆变器电路讲解计算,电工电子动手学技术,电路好案例推荐...
- NFS简单应用场景及简单的环境搭建
- Python学习之使用Python生成PDF报告
- 又发现一个关于R文件丢失的问题
- xor eax,eax
- 有关函数模板和类模板的说法
- python mysql ssh隧道_在python中使用ssh隧道连接mysql
- 详解各种锁:CAS、共享锁、排它锁、互斥锁、悲观锁、乐观锁、行级锁、表级锁、页级锁、死锁、JAVA对CAS的支持、ABA问题、AQS原理
- java右键弹出菜单_javascript自定义右键弹出菜单实现方法
- redis 版的 hello world
- linux服务器静态,为Linux服务器设置静态IP的方法
- matplotlib绘图跳过时间段的处理方案
- java继承类长方形面积_java_java用接口、多态、继承、类计算三角形和矩形周长及面积的方法,本文实例讲述了java用接口、多 - phpStudy...
- 订单失效怎么做的_虾皮Shopee新加坡电商做什么产品好呢?订单少得可怜怎么办呢...
- Android项目持续集成之Jenkins的使用
- golang 数组组合成最小的整数_Redis之整数集合底层实现
- 无耗传输线 matlab,基于Matlab模块化的微波工程Smith圆图辅助教学方法
- 那些年我们用过的SSD
- 网络0323和网络2303分类过程的比较
- 利用java打印心型图案
热门文章
- kubernetes kubeadm init kube-apiserver.yaml already exists
- JavaWeb中的问题 ---- Servlet和Jsp
- 2020-07-07
- lua数据结构php,Lua数据结构
- idea2019配置
- K3s(Kubernetes)环境使用Let‘s Encrypt证书的部署及自动配置https域名-阿里云域名解析管理
- window 下 git SERVER 自动部署/生成更新项目 批处理
- 系统级程序设计结课实验-第一部分
- MyBatis3_[tp_41-42-43]-_动态sql_trim_自定义字符串截取_choose分支选择_update的set与if-trim 结合的动态更新...
- Ansible 命令