ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的示例分析

這篇文章主要介紹了ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

每一個(gè)WEB應(yīng)用程序都有導(dǎo)航菜單，Abp也為用戶提供了通用的創(chuàng)建和顯示菜單方式。

創(chuàng)建菜單
一個(gè)應(yīng)用程序可能包含不同的模塊，而每個(gè)模塊都可能有它自己的菜單項(xiàng)。在Abp中，需要?jiǎng)?chuàng)建一個(gè)派生自NavigationProvider的類來(lái)定義一個(gè)菜單項(xiàng)。
假設(shè)我們有一個(gè)這樣的主菜單：

• Tasks

• Reports

• Administration 1 User Management 2 Role Management

由上可知，Administration菜單項(xiàng)有兩個(gè)子菜單項(xiàng)。對(duì)應(yīng)的生成方法如下：

 public class SimpleTaskSystemNavigationProvider : NavigationProvider
{
  public override void SetNavigation(INavigationProviderContext context)
  {
    context.Manager.MainMenu
      .AddItem(
        new MenuItemDefinition(
          "Tasks",
          new LocalizableString("Tasks", "SimpleTaskSystem"),
          url: "/Tasks",
          icon: "fa fa-tasks"
          )
      ).AddItem(
        new MenuItemDefinition(
          "Reports",
          new LocalizableString("Reports", "SimpleTaskSystem"),
          url: "/Reports",
          icon: "fa fa-bar-chart"
          )
      ).AddItem(
        new MenuItemDefinition(
          "Administration",
          new LocalizableString("Administration", "SimpleTaskSystem"),
          icon: "fa fa-cogs"
          ).AddItem(
            new MenuItemDefinition(
              "UserManagement",
              new LocalizableString("UserManagement", "SimpleTaskSystem"),
              url: "/Administration/Users",
              icon: "fa fa-users",
              requiredPermissionName: "SimpleTaskSystem.Permissions.UserManagement"
              )
          ).AddItem(
            new MenuItemDefinition(
              "RoleManagement",
              new LocalizableString("RoleManagement", "SimpleTaskSystem"),
              url: "/Administration/Roles",
              icon: "fa fa-star",
              requiredPermissionName: "SimpleTaskSystem.Permissions.RoleManagement"
              )
          )
      );
  }
}

 
MenuItemDefinition可以有一個(gè)唯一的名字，一個(gè)用于本地化顯示的名字，一個(gè)url和一個(gè)icon，此外，菜單項(xiàng)可能需要與特定用戶權(quán)限相結(jié)合（相關(guān)權(quán)限系統(tǒng)正在開(kāi)發(fā)，暫時(shí)還沒(méi)有說(shuō)明文檔）。
InavigationProviderContext方法能夠獲取現(xiàn)有的菜單項(xiàng)、添加菜單或菜單項(xiàng)。因此，不同的模塊可以添加各自的菜單。
創(chuàng)建完成導(dǎo)航后，還需要在對(duì)應(yīng)模塊預(yù)初始化時(shí)注冊(cè)到Abp配置文件中：
Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>();

顯示菜單
IuserNavigationManager可以注入、獲取和顯示菜單?？梢栽?a title="服務(wù)器" target="_blank" href="http://www.kemok4.com/">服務(wù)器端創(chuàng)建菜單。
Abp自動(dòng)生成的javascript API使得用戶能夠在客戶端獲取菜單，對(duì)應(yīng)的方法和對(duì)象在命名空間abp.nav中。例如，在客戶端使用abp.nav.menus.MainMenu可以用來(lái)獲取主菜單。
下面我們就來(lái)看一下JavaScript的相關(guān)方面。

Ajax
現(xiàn)代的應(yīng)用經(jīng)常會(huì)使用AJAX，尤其是單頁(yè)應(yīng)用，幾乎是和服務(wù)器通信的唯一手段，執(zhí)行AJAX通常會(huì)有以下步驟：
在客戶端，你需要提供一個(gè)URL，選擇一個(gè)和服務(wù)器通信的方法（GET,POST,PUT,DELETE）。在請(qǐng)求完成后執(zhí)行回調(diào)函數(shù)，請(qǐng)求結(jié)果可更是成功或失敗，失敗時(shí)你需要給出提示，成功時(shí)你需要根據(jù)返回值執(zhí)行操作。通常情況下，在請(qǐng)求開(kāi)始時(shí)，你需要給出類似正在處理或者相關(guān)的繁忙等待信息（如頁(yè)面遮蓋），請(qǐng)求完成后恢復(fù)。
服務(wù)端接收到請(qǐng)求后，對(duì)請(qǐng)求參數(shù)進(jìn)行驗(yàn)證，執(zhí)行服務(wù)端代碼，如果發(fā)生錯(cuò)誤或者驗(yàn)證失敗，應(yīng)給出具體的原因，成功時(shí)返回客戶端想要的數(shù)據(jù)。
ABP服務(wù)端支持標(biāo)準(zhǔn)的ajax的請(qǐng)求/輸出。建議大家使用abp.jquery.js中提供的ajax請(qǐng)求方法，這個(gè)方法基于jquery的ajax方法，可以自動(dòng)處理服務(wù)端的異常信息，當(dāng)然，如果你對(duì)js很熟練的話，也可以根據(jù)自己的需要寫ajax。
ASP.NET Boilerplate的ajax請(qǐng)求實(shí)例：
 

//構(gòu)建要傳輸?shù)膮?shù)對(duì)象
var newPerson = {
  name: 'Dougles Adams',
  age: 42
};
//調(diào)用abp的ajax方法
abp.ajax({
  url: '/People/SavePerson',
  data: JSON.stringify(newPerson) //轉(zhuǎn)換成json字符串
}).done(function(data) {
abp.notify.success('created new person with id = ' + data.personId);
});

 
你也可以使用jquery的ajax方法調(diào)用，但是需要設(shè)置一下默認(rèn)請(qǐng)求參數(shù)，dataType 設(shè)置為 'json', type 設(shè)置為 'POST' and contentType 設(shè)置為 'application/json，在發(fā)送請(qǐng)求時(shí)需要將js對(duì)象轉(zhuǎn)換成json字符串，和$.ajax一樣，你也可以傳遞參數(shù)覆蓋abp.ajax的默認(rèn)參數(shù)abp.ajax返回一個(gè)promise類型，你可以鏈?zhǔn)骄幊虒懭缦碌姆椒ǎ?/p>

.done() //成功,
.fail() //失敗，
.then() //回調(diào)嵌套。

下面的一個(gè)簡(jiǎn)單的例子展示ajax請(qǐng)求PeopleController的SavePerson方法，在.done()中可以獲取到服務(wù)端創(chuàng)建記錄成功后返回的記錄id。

public class PeopleController : AbpController
{
  [HttpPost]
  public JsonResult SavePerson(SavePersonModel person)
  {
    //TODO: save new person to database and return new person's id
//TODO: 創(chuàng)建一個(gè)新的person記錄并返回此記錄的id
    return Json(new {PersonId = 42});
  }
}

 
SavePersonModel 包含name,age等屬性. SavePerson 上標(biāo)記了 HttpPost 特性 abp.ajax默認(rèn)以 POST 方式請(qǐng)求. 返回值被簡(jiǎn)化成了一個(gè)匿名對(duì)象。

SavePersonModel 包含name,age等屬性. SavePerson 上標(biāo)記了 HttpPost 特性 abp.ajax默認(rèn)以 POST 方式請(qǐng)求. 返回值被簡(jiǎn)化成了一個(gè)匿名對(duì)象。

AJAX 返回值(AJAX return messages)

我們直接返回了一個(gè)匿名對(duì)象, ABP 通過(guò) MvcAjaxResponse 類型包裝了返回值. 實(shí)際的返回值類型如下:

{
 "success": true, //正確處理標(biāo)志
 "result": {
  "personId": 42 //返回的數(shù)據(jù)
 },
 "error": null, //如果發(fā)生錯(cuò)誤，result為null，此處為錯(cuò)誤信息的對(duì)象，包含message和details兩個(gè)屬性
 "targetUrl": null, //可以提供一個(gè)url供客戶端重定向，例如自動(dòng)構(gòu)建下一頁(yè)的url
 "unAuthorizedRequest": false //是否通過(guò)了授權(quán)，如果返回true，客戶端應(yīng)重新登錄
}

 
如果你繼承了AbpController，Json方法返回的對(duì)象總會(huì)被這樣包裝，如果未發(fā)生錯(cuò)誤，你在abp.ajax的done(function(result,data){})中，第一個(gè)參數(shù)result是{"personId": 42}對(duì)象，data是原始對(duì)象,WebApi中繼承AbpApiController也是同樣的機(jī)制。

錯(cuò)誤處理(Handling errors)

返回值如下:
 

{
 "targetUrl": null,
 "result": null,
 "success": false, //代表出現(xiàn)異常
 "error": {
  "message": "An internal error occured during your request!", //未捕捉到的異常，通常為系統(tǒng)異常，會(huì)自動(dòng)記錄日志，具體提示信息在配置文件配置，可以搜索一下，如果是業(yè)務(wù)拋出的UserFriendlyException異常，message為具體的錯(cuò)誤信息
  "details": "..." //發(fā)生異常時(shí)默認(rèn)會(huì)調(diào)用abp.message.error函數(shù)，你可以在abp.jquery.js修改，統(tǒng)一處理錯(cuò)誤信息。
 },
 "unAuthorizedRequest": false
}

 
動(dòng)態(tài)WebAPI（Dynamic Web API Layer）

此處會(huì)根據(jù)Services動(dòng)態(tài)生成WebAPI調(diào)用函數(shù):

//通常我們使用ajax會(huì)按照如下寫法，做一個(gè)簡(jiǎn)單的封裝來(lái)重用ajax，此處框架可以幫你生成簡(jiǎn)單的調(diào)用方法
var savePerson = function(person) {
  return abp.ajax({
    url: '/People/SavePerson',
    data: JSON.stringify(person)
  });
};
//調(diào)用時(shí)你需要構(gòu)建參數(shù)
var newPerson = {
  name: 'Dougles Adams',
  age: 42
};
//直接調(diào)用方法，如何生成上面的調(diào)用方法可以參考源碼中的Abp.Web.Api項(xiàng)目中/ WebApi/ Controllers/ Scripting/ jQuery下的實(shí)現(xiàn)
savePerson(newPerson).done(function(data) {
  abp.notify.success('created new person with id = ' + data.personId);
});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!