ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的方法

字號:


    這篇文章主要介紹了使用PowerShell .Net獲取電腦中的UUID 的相關(guān)資料,需要的朋友可以參考下
    每一個WEB應(yīng)用程序都有導(dǎo)航菜單,Abp也為用戶提供了通用的創(chuàng)建和顯示菜單方式。
    創(chuàng)建菜單
    一個應(yīng)用程序可能包含不同的模塊,而每個模塊都可能有它自己的菜單項。在Abp中,需要創(chuàng)建一個派生自NavigationProvider的類來定義一個菜單項。
    假設(shè)我們有一個這樣的主菜單:
    1.Tasks
    2.Reports
    3.Administration 1 User Management 2 Role Management
    由上可知,Administration菜單項有兩個子菜單項。對應(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可以有一個唯一的名字,一個用于本地化顯示的名字,一個url和一個icon,此外,菜單項可能需要與特定用戶權(quán)限相結(jié)合(相關(guān)權(quán)限系統(tǒng)正在開發(fā),暫時還沒有說明文檔)。
    InavigationProviderContext方法能夠獲取現(xiàn)有的菜單項、添加菜單或菜單項。因此,不同的模塊可以添加各自的菜單。
    創(chuàng)建完成導(dǎo)航后,還需要在對應(yīng)模塊預(yù)初始化時注冊到Abp配置文件中:
    Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>();
    顯示菜單
    IuserNavigationManager可以注入、獲取和顯示菜單。可以在服務(wù)器端創(chuàng)建菜單。
    Abp自動生成的javascript API使得用戶能夠在客戶端獲取菜單,對應(yīng)的方法和對象在命名空間abp.nav中。例如,在客戶端使用abp.nav.menus.MainMenu可以用來獲取主菜單。
    下面我們就來看一下JavaScript的相關(guān)方面。
    Ajax
    現(xiàn)代的應(yīng)用經(jīng)常會使用AJAX,尤其是單頁應(yīng)用,幾乎是和服務(wù)器通信的唯一手段,執(zhí)行AJAX通常會有以下步驟:
    在客戶端,你需要提供一個URL,選擇一個和服務(wù)器通信的方法(GET,POST,PUT,DELETE)。在請求完成后執(zhí)行回調(diào)函數(shù),請求結(jié)果可更是成功或失敗,失敗時你需要給出提示,成功時你需要根據(jù)返回值執(zhí)行操作。通常情況下,在請求開始時,你需要給出類似正在處理或者相關(guān)的繁忙等待信息(如頁面遮蓋),請求完成后恢復(fù)。
    服務(wù)端接收到請求后,對請求參數(shù)進行驗證,執(zhí)行服務(wù)端代碼,如果發(fā)生錯誤或者驗證失敗,應(yīng)給出具體的原因,成功時返回客戶端想要的數(shù)據(jù)。
    ABP服務(wù)端支持標準的ajax的請求/輸出。建議大家使用abp.jquery.js中提供的ajax請求方法,這個方法基于jquery的ajax方法,可以自動處理服務(wù)端的異常信息,當然,如果你對js很熟練的話,也可以根據(jù)自己的需要寫ajax。
    ASP.NET Boilerplate的ajax請求實例:
    //構(gòu)建要傳輸?shù)膮?shù)對象
    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è)置一下默認請求參數(shù),dataType 設(shè)置為 'json', type 設(shè)置為 'POST' and contentType 設(shè)置為 'application/json,在發(fā)送請求時需要將js對象轉(zhuǎn)換成json字符串,和$.ajax一樣,你也可以傳遞參數(shù)覆蓋abp.ajax的默認參數(shù)abp.ajax返回一個promise類型,你可以鏈式編程寫如下的方法:
    .done() //成功,
    .fail() //失敗,
    .then() //回調(diào)嵌套。
    下面的一個簡單的例子展示ajax請求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)建一個新的person記錄并返回此記錄的id
        return Json(new {PersonId = 42});
      }
    }
    SavePersonModel 包含name,age等屬性. SavePerson 上標記了 HttpPost 特性 abp.ajax默認以 POST 方式請求. 返回值被簡化成了一個匿名對象。
    SavePersonModel 包含name,age等屬性. SavePerson 上標記了 HttpPost 特性 abp.ajax默認以 POST 方式請求. 返回值被簡化成了一個匿名對象。
    AJAX 返回值(AJAX return messages)
    我們直接返回了一個匿名對象, ABP 通過 MvcAjaxResponse 類型包裝了返回值. 實際的返回值類型如下:
    {
     "success": true, //正確處理標志
     "result": {
      "personId": 42 //返回的數(shù)據(jù)
     },
     "error": null, //如果發(fā)生錯誤,result為null,此處為錯誤信息的對象,包含message和details兩個屬性
     "targetUrl": null, //可以提供一個url供客戶端重定向,例如自動構(gòu)建下一頁的url
     "unAuthorizedRequest": false //是否通過了授權(quán),如果返回true,客戶端應(yīng)重新登錄
    }
    如果你繼承了AbpController,Json方法返回的對象總會被這樣包裝,如果未發(fā)生錯誤,你在abp.ajax的done(function(result,data){})中,第一個參數(shù)result是{"personId": 42}對象,data是原始對象,WebApi中繼承AbpApiController也是同樣的機制。
    錯誤處理(Handling errors)
    返回值如下:
    {
     "targetUrl": null,
     "result": null,
     "success": false, //代表出現(xiàn)異常
     "error": {
      "message": "An internal error occured during your request!", //未捕捉到的異常,通常為系統(tǒng)異常,會自動記錄日志,具體提示信息在配置文件配置,可以搜索一下,如果是業(yè)務(wù)拋出的UserFriendlyException異常,message為具體的錯誤信息
      "details": "..." //發(fā)生異常時默認會調(diào)用abp.message.error函數(shù),你可以在abp.jquery.js修改,統(tǒng)一處理錯誤信息。
     },
     "unAuthorizedRequest": false
    }
    動態(tài)WebAPI(Dynamic Web API Layer)
    此處會根據(jù)Services動態(tài)生成WebAPI調(diào)用函數(shù):
    //通常我們使用ajax會按照如下寫法,做一個簡單的封裝來重用ajax,此處框架可以幫你生成簡單的調(diào)用方法
    var savePerson = function(person) {
      return abp.ajax({
        url: '/People/SavePerson',
        data: JSON.stringify(person)
      });
    };
    //調(diào)用時你需要構(gòu)建參數(shù)
    var newPerson = {
      name: 'Dougles Adams',
      age: 42
    };
    //直接調(diào)用方法,如何生成上面的調(diào)用方法可以參考源碼中的Abp.Web.Api項目中/ WebApi/ Controllers/ Scripting/ jQuery下的實現(xiàn)
    savePerson(newPerson).done(function(data) {
      abp.notify.success('created new person with id = ' + data.personId);
    });