ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的方法
來(lái)源:易賢網(wǎng) 閱讀:2781 次 日期:2016-08-05 16:38:08
溫馨提示:易賢網(wǎng)小編為您整理了“ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的方法”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了使用PowerShell .Net獲取電腦中的UUID 的相關(guān)資料,需要的朋友可以參考下

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

創(chuàng)建菜單

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

假設(shè)我們有一個(gè)這樣的主菜單:

1.Tasks

2.Reports

3.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)可能需要與特定用戶(hù)權(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可以注入、獲取和顯示菜單??梢栽诜?wù)器端創(chuàng)建菜單。

Abp自動(dòng)生成的javascript API使得用戶(hù)能夠在客戶(hù)端獲取菜單,對(duì)應(yīng)的方法和對(duì)象在命名空間abp.nav中。例如,在客戶(hù)端使用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ì)有以下步驟:

在客戶(hù)端,你需要提供一個(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í),你需要給出類(lèi)似正在處理或者相關(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í)返回客戶(hù)端想要的數(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ù)自己的需要寫(xiě)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類(lèi)型,你可以鏈?zhǔn)骄幊虒?xiě)如下的方法:

.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 類(lèi)型包裝了返回值. 實(shí)際的返回值類(lèi)型如下:

{

 "success": true, //正確處理標(biāo)志

 "result": {

  "personId": 42 //返回的數(shù)據(jù)

 },

 "error": null, //如果發(fā)生錯(cuò)誤,result為null,此處為錯(cuò)誤信息的對(duì)象,包含message和details兩個(gè)屬性

 "targetUrl": null, //可以提供一個(gè)url供客戶(hù)端重定向,例如自動(dòng)構(gòu)建下一頁(yè)的url

 "unAuthorizedRequest": false //是否通過(guò)了授權(quán),如果返回true,客戶(hù)端應(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ì)按照如下寫(xiě)法,做一個(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);

});

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)