当前位置：Gxlcms > asp.net > ABP框架中导航菜单的使用及JavaScript API获取菜单的方法

ABP框架中导航菜单的使用及JavaScript API获取菜单的方法

时间：2021-07-01 10:21:17 帮助过：8人阅读

每一个WEB应用程序都有导航菜单，Abp也为用户提供了通用的创建和显示菜单方式。

创建菜单
一个应用程序可能包含不同的模块，而每个模块都可能有它自己的菜单项。在Abp中，需要创建一个派生自NavigationProvider的类来定义一个菜单项。
假设我们有一个这样的主菜单：

  • Tasks
  • Reports
  • Administration 1 User Management 2 Role Management

由上可知，Administration菜单项有两个子菜单项。对应的生成方法如下：

  1.  public class SimpleTaskSystemNavigationProvider : NavigationProvider
  2. {
  3.   public override void SetNavigation(INavigationProviderContext context)
  4.   {
  5.     context.Manager.MainMenu
  6.       .AddItem(
  7.         new MenuItemDefinition(
  8.           "Tasks",
  9.           new LocalizableString("Tasks", "SimpleTaskSystem"),
  10.           url: "/Tasks",
  11.           icon: "fa fa-tasks"
  12.           )
  13.       ).AddItem(
  14.         new MenuItemDefinition(
  15.           "Reports",
  16.           new LocalizableString("Reports", "SimpleTaskSystem"),
  17.           url: "/Reports",
  18.           icon: "fa fa-bar-chart"
  19.           )
  20.       ).AddItem(
  21.         new MenuItemDefinition(
  22.           "Administration",
  23.           new LocalizableString("Administration", "SimpleTaskSystem"),
  24.           icon: "fa fa-cogs"
  25.           ).AddItem(
  26.             new MenuItemDefinition(
  27.               "UserManagement",
  28.               new LocalizableString("UserManagement", "SimpleTaskSystem"),
  29.               url: "/Administration/Users",
  30.               icon: "fa fa-users",
  31.               requiredPermissionName: "SimpleTaskSystem.Permissions.UserManagement"
  32.               )
  33.           ).AddItem(
  34.             new MenuItemDefinition(
  35.               "RoleManagement",
  36.               new LocalizableString("RoleManagement", "SimpleTaskSystem"),
  37.               url: "/Administration/Roles",
  38.               icon: "fa fa-star",
  39.               requiredPermissionName: "SimpleTaskSystem.Permissions.RoleManagement"
  40.               )
  41.           )
  42.       );
  43.   }
  44. }

 
MenuItemDefinition可以有一个唯一的名字，一个用于本地化显示的名字，一个url和一个icon，此外，菜单项可能需要与特定用户权限相结合（相关权限系统正在开发，暂时还没有说明文档）。
InavigationProviderContext方法能够获取现有的菜单项、添加菜单或菜单项。因此，不同的模块可以添加各自的菜单。
创建完成导航后，还需要在对应模块预初始化时注册到Abp配置文件中：
Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>();

显示菜单
IuserNavigationManager可以注入、获取和显示菜单。可以在服务器端创建菜单。
Abp自动生成的javascript API使得用户能够在客户端获取菜单，对应的方法和对象在命名空间abp.nav中。例如，在客户端使用abp.nav.menus.MainMenu可以用来获取主菜单。
下面我们就来看一下JavaScript的相关方面。

Ajax
现代的应用经常会使用AJAX，尤其是单页应用，几乎是和服务器通信的唯一手段，执行AJAX通常会有以下步骤：
在客户端，你需要提供一个URL，选择一个和服务器通信的方法（GET,POST,PUT,DELETE）。在请求完成后执行回调函数，请求结果可更是成功或失败，失败时你需要给出提示，成功时你需要根据返回值执行操作。通常情况下，在请求开始时，你需要给出类似正在处理或者相关的繁忙等待信息（如页面遮盖），请求完成后恢复。
服务端接收到请求后，对请求参数进行验证，执行服务端代码，如果发生错误或者验证失败，应给出具体的原因，成功时返回客户端想要的数据。
ABP服务端支持标准的ajax的请求/输出。建议大家使用abp.jquery.js中提供的ajax请求方法，这个方法基于jquery的ajax方法，可以自动处理服务端的异常信息，当然，如果你对js很熟练的话，也可以根据自己的需要写ajax。
ASP.NET Boilerplate的ajax请求实例：
 

  1. //构建要传输的参数对象
  2. var newPerson = {
  3.   name: 'Dougles Adams',
  4.   age: 42
  5. };
  6. //调用abp的ajax方法
  7. abp.ajax({
  8.   url: '/People/SavePerson',
  9.   data: JSON.stringify(newPerson) //转换成json字符串
  10. }).done(function(data) {
  11. abp.notify.success('created new person with id = ' + data.personId);
  12. });

 
你也可以使用jquery的ajax方法调用，但是需要设置一下默认请求参数，dataType 设置为 'json', type 设置为 'POST' and contentType 设置为 'application/json，在发送请求时需要将js对象转换成json字符串，和$.ajax一样，你也可以传递参数覆盖abp.ajax的默认参数abp.ajax返回一个promise类型，你可以链式编程写如下的方法：

  1. .done() //成功,
  2. .fail() //失败，
  3. .then() //回调嵌套。

下面的一个简单的例子展示ajax请求PeopleController的SavePerson方法，在.done()中可以获取到服务端创建记录成功后返回的记录id。

  1. public class PeopleController : AbpController
  2. {
  3.   [HttpPost]
  4.   public JsonResult SavePerson(SavePersonModel person)
  5.   {
  6.     //TODO: save new person to database and return new person's id
  7. //TODO: 创建一个新的person记录并返回此记录的id
  8.     return Json(new {PersonId = 42});
  9.   }
  10. }

 
SavePersonModel 包含name,age等属性. SavePerson 上标记了 HttpPost 特性 abp.ajax默认以 POST 方式请求. 返回值被简化成了一个匿名对象。

SavePersonModel 包含name,age等属性. SavePerson 上标记了 HttpPost 特性 abp.ajax默认以 POST 方式请求. 返回值被简化成了一个匿名对象。

AJAX 返回值(AJAX return messages)

我们直接返回了一个匿名对象, ABP 通过 MvcAjaxResponse 类型包装了返回值. 实际的返回值类型如下:

  1. {
  2.  "success": true, //正确处理标志
  3.  "result": {
  4.   "personId": 42 //返回的数据
  5.  },
  6.  "error": null, //如果发生错误，result为null，此处为错误信息的对象，包含message和details两个属性
  7.  "targetUrl": null, //可以提供一个url供客户端重定向，例如自动构建下一页的url
  8.  "unAuthorizedRequest": false //是否通过了授权，如果返回true，客户端应重新登录
  9. }

 
如果你继承了AbpController，Json方法返回的对象总会被这样包装，如果未发生错误，你在abp.ajax的done(function(result,data){})中，第一个参数result是{"personId": 42}对象，data是原始对象,WebApi中继承AbpApiController也是同样的机制。

错误处理(Handling errors)

返回值如下:
 

  1. {
  2.  "targetUrl": null,
  3.  "result": null,
  4.  "success": false, //代表出现异常
  5.  "error": {
  6.   "message": "An internal error occured during your request!", //未捕捉到的异常，通常为系统异常，会自动记录日志，具体提示信息在配置文件配置，可以搜索一下，如果是业务抛出的UserFriendlyException异常，message为具体的错误信息
  7.   "details": "..." //发生异常时默认会调用abp.message.error函数，你可以在abp.jquery.js修改，统一处理错误信息。
  8.  },
  9.  "unAuthorizedRequest": false
  10. }

 
动态WebAPI（Dynamic Web API Layer）

此处会根据Services动态生成WebAPI调用函数:

 

  1. //通常我们使用ajax会按照如下写法，做一个简单的封装来重用ajax，此处框架可以帮你生成简单的调用方法
  2. var savePerson = function(person) {
  3.   return abp.ajax({
  4.     url: '/People/SavePerson',
  5.     data: JSON.stringify(person)
  6.   });
  7. };
  8. //调用时你需要构建参数
  9. var newPerson = {
  10.   name: 'Dougles Adams',
  11.   age: 42
  12. };
  13. //直接调用方法，如何生成上面的调用方法可以参考源码中的Abp.Web.Api项目中/ WebApi/ Controllers/ Scripting/ jQuery下的实现
  14. savePerson(newPerson).done(function(data) {
  15.   abp.notify.success('created new person with id = ' + data.personId);
  16. });

 

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！