Abp添加菜单

在abp模板中添加菜单,EntityFramework+Angular.js模板,使用的Abp版本为3.8.1。

创建Abp项目模板,例如名称叫做LawAndRegulation。

服务端添加菜单项

找到Mpa或者Spa项目,也就是LawAndRegulation.WebMpa或者LawAndRegulation.WebSpaAngular。

项目中找到LawAndRegulationNavigationProvider类,在类中找到SetNavigation方法,按照模板中提供的菜单添加方法添加MenuItemDefinition。

MenuItemDefinition即为我们需要添加的菜单项,菜单项包含几个重要的属性:

  • 【name】,菜单项名称,在View层添加菜单项时对应的名称;
  • 【displayName】,显示名称,本地化显示在名称,也就是多语言需要解释的名称;
  • 【url】,导航的路由名称;
  • 【icon】,图标名称;
  • 【requireAuthentication】,登陆认证及权限认证;

设置好这几项后在服务端导航的内容已经设置完成。

示例代码:

public class LawAndRegulationNavigationProvider : NavigationProvider
{
public override void SetNavigation(INavigationProviderContext context)
{
context.Manager.MainMenu
.AddItem(
new MenuItemDefinition(
"DictionaryManager",
L("DictionaryManager"),
url: "#DictionaryManager",
icon: "fa fa-info",
requiresAuthentication: true
)
);
} private static ILocalizableString L(string name)
{
return new LocalizableString(name, LawAndRegulationConsts.LocalizationSourceName);
}
}

客户端添加菜单

在LawAndRegulation.WebSpaAngular项目中找到App/Main/views/layout/sidebar-nav.js文件,在文件中编辑属性menuItems,属性menuItems为数组,在数组中添加对象通过createMenuItem方法,方法中参数:

  • 1.本地化标题;
  • 2.权限名称;
  • 3.图标名称;
  • 4.路由名称,也可以是Url链接;
  • 5.子项集合,可选参数;

实例代码:

vm.menuItems = [
createMenuItem(App.localize("HomePage"), "", "home", "home"),
createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
createMenuItem(App.localize("LawAndRegulation"), "", "info", "LawAndRegulation"),
createMenuItem(App.localize("About"), "", "info", "about")
];

其中LawAndRegulation为我们添加的菜单项。

客户端添加路由

在WebSpaAngular项目中找到app.js文件,app.js文件在App/Mian/路径下。

找到app.config,在function方法中找到回调函数中$stateProvider参数,调用参数的state方法。

state方法有两个参数:

  • 【navigationName】字符串,导航名称;
  • 【route】对象,对象包含三个属性,服务端Url、客户端页面Url以及菜单名称(本地化的名称);

设置完以上,客户端路由已经设置完成。

实例代码如下:

            $stateProvider
.state('DictionaryManager', {
url: '/DictionaryManger',
templateUrl: '',
menu:'DictionaryManager'
});

添加多级菜单

服务器端

服务器端添加多级菜单非常方便,只需要调用MenuItemDefinition的方法AddItem,在第一节内容基础上扩展,代码如下:

public class LawAndRegulationNavigationProvider : NavigationProvider
{
public override void SetNavigation(INavigationProviderContext context)
{
context.Manager.MainMenu
.AddItem(
new MenuItemDefinition(
"DictionaryManager",
L("DictionaryManager"),
url: "#DictionaryManager",
icon: "fa fa-info",
requiresAuthentication: true
).AddItem(
new MenuItemDefinition(
"Law",
L("Law"),
url: "#Law",
icon: "fa fa-info",
requiresAuthentication: true))
)
);
} private static ILocalizableString L(string name)
{
return new LocalizableString(name, LawAndRegulationConsts.LocalizationSourceName);
}
}

客户端添加路由

在第二节基础上扩展app.js文件中关于路由的内容,代码如下:

$stateProvider
.state('DictionaryManager', {
url: '/DictionaryManger',
templateUrl: '',
menu:'DictionaryManager'
})
.state('Law', {
url: '/Law',
templateUrl: '/App/Main/views/LawAndRegulation/index.cshtml',
menu: 'Law'
});

客户端添加多级菜单

在第三节的基础上添加客户端多级菜单,多级客户端菜单其实就是在最后一个参数内添加一个菜单项数组:

vm.menuItems = [
createMenuItem(App.localize("HomePage"), "", "home", "home"),
createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
createMenuItem(App.localize("LawAndRegulation"), "", "info", "LawAndRegulation",
[createMenuItem(App.localize("Law"), "", "info", "Law")]),
createMenuItem(App.localize("About"), "", "info", "about")
];

Abp添加菜单的更多相关文章

  1. abp添加动态菜单

    abp中MenuDefinition封装了导航栏上的主菜单的属性,MenuItemDefinition则封装了子菜单的属性,子菜单可以引用其他子菜单构成一个菜单树. MenuDefinitio成员如下 ...

  2. abp实战-ContosoUniversity Abp版-2添加菜单与创建实体

    这里略过理论篇,但需要了解abp分层,对于小项目来说abp分层有点复杂,这里只是演示,个别地方没有完全按照ddd理论去写,后期我将会完善. 1. 创建ContosoUniversity相关功能的菜单 ...

  3. .net core3.1 abp动态菜单和动态权限(动态菜单实现和动态权限添加) (三)

    我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...

  4. Qt自适应大小显示图片,添加菜单

    由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...

  5. MFC 对话框添加菜单

    1.在Resource View 里右击菜单里选择Add Resource,选择menu,添加一个IDR_MENU1的菜单.在编辑器编辑菜单,添加菜单项,命名各个菜单项的ID. 2.在所要添加菜单的对 ...

  6. 【Android】添加菜单和监听菜单方法详解

    添加菜单 可以在onCreateOptionsMenu或者onPrepareOptionsMenu方法中来添加菜单 代码添加: menu.add((int groupId, int itemId, i ...

  7. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

  8. EcShop后台添加菜单[步骤]

    1. 添加菜单的链接地址:打开文件[/后台目录/includes/inc_menu.php],在结尾加入例如:$modules['dashi']['dashi_list'] = 'join_dashi ...

  9. menuStrip1动态添加菜单及快捷键

    public partial class FormMkTest : Form { public FormMkTest() { InitializeComponent(); } private void ...

随机推荐

  1. Visual code 搭建Vue项目

    使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像  淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...

  2. Java页面中EL的${}与<%= request.getParameter%>有什么区别? el 取不到值

    ${requestScope}操作的是request的作用域,相当于request.getAttribute();不过EL比这个更智能些,它不用强制类型转换就可以拿到了真实对象的值.request.g ...

  3. 494. Target Sum - Unsolved

    https://leetcode.com/problems/target-sum/#/description You are given a list of non-negative integers ...

  4. Bootstrap之javascript组件

    一 模态框 模态框放在body标签里面的,是body标签的子元素 静态实例: <div class="modal fade" tabindex="-1" ...

  5. C++中栈和队列的基本操作

    栈操作: s.push(item)    // 将item压入栈中 s.pop()            // 删除栈顶元素,不返回值 s.top()             // 读取栈顶元素,返回 ...

  6. 2018.11.09 bzoj4773: 负环(倍增+floyd)

    传送门 跟上一道题差不多. 考虑如果环上点的个数跟最短路长度有单调性那么可以直接上倍增+floyd. 然而并没有什么单调性. 于是我们最开始给每个点初始化一个长度为0的自环,于是就有单调性了. 代码: ...

  7. 如何将本地代码通过git上传到码云

    ps:同部署到GitHub上一样 http://www.cnblogs.com/pcx105/p/7777932.html

  8. MySql Cast与Convert函数

    两者具体的语法如下: Cast(value as type): Convert(value ,type): type不是都可以滴,可以转换的type如下: 二进制,同带binary前缀的效果 : BI ...

  9. Windows窗口消息大全

    ////////////////////////////////////////////////////////////////////////// #include "AFXPRIV.H& ...

  10. 添加全局函数$.extend和对象方法$.fn

    ## $(function () { $.fn.shadow = function (opts) { return this.each(function () { var defaults = { / ...