每一個WEB應(yīng)用程序都有導(dǎo)航菜單，Abp也為用戶提供了通用的創(chuàng)建和顯示菜單方式。
創(chuàng)建菜單
一個應(yīng)用程序可能包含不同的模塊，而每個模塊都可能有它自己的菜單項。在Abp中，需要創(chuàng)建一個派生自NavigationProvider的類來定義一個菜單項。
假設(shè)我們有一個這樣的主菜單：
- Tasks
- Reports
- Administration 1 User Management 2 Role Management
由上可知，Administration菜單項有兩個子菜單項。對應(yīng)的生成方法如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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ù)進(jìn)行驗證，執(zhí)行服務(wù)端代碼，如果發(fā)生錯誤或者驗證失敗，應(yīng)給出具體的原因，成功時返回客戶端想要的數(shù)據(jù)。
ABP服務(wù)端支持標(biāo)準(zhǔn)的ajax的請求/輸出。建議大家使用abp.jquery.js中提供的ajax請求方法，這個方法基于jquery的ajax方法，可以自動處理服務(wù)端的異常信息，當(dāng)然，如果你對js很熟練的話，也可以根據(jù)自己的需要寫ajax。
ASP.NET Boilerplate的ajax請求實例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//構(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è)置一下默認(rèn)請求參數(shù)，dataType 設(shè)置為 'json', type 設(shè)置為 'POST' and contentType 設(shè)置為 'application/json，在發(fā)送請求時需要將js對象轉(zhuǎn)換成json字符串，和$.ajax一樣，你也可以傳遞參數(shù)覆蓋abp.ajax的默認(rèn)參數(shù)abp.ajax返回一個promise類型，你可以鏈?zhǔn)骄幊虒懭缦碌姆椒ǎ?/p>
|
1
2
3
|
.done() //成功,.fail() //失敗，.then() //回調(diào)嵌套。 |
下面的一個簡單的例子展示ajax請求PeopleController的SavePerson方法，在.done()中可以獲取到服務(wù)端創(chuàng)建記錄成功后返回的記錄id。
|
1
2
3
4
5
6
7
8
9
10
|
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 上標(biāo)記了 HttpPost 特性 abp.ajax默認(rèn)以 POST 方式請求. 返回值被簡化成了一個匿名對象。
SavePersonModel 包含name,age等屬性. SavePerson 上標(biāo)記了 HttpPost 特性 abp.ajax默認(rèn)以 POST 方式請求. 返回值被簡化成了一個匿名對象。
AJAX 返回值(AJAX return messages)
我們直接返回了一個匿名對象, ABP 通過 MvcAjaxResponse 類型包裝了返回值. 實際的返回值類型如下:
|
1
2
3
4
5
6
7
8
9
|
{ "success": true, //正確處理標(biāo)志 "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)
返回值如下:
|
1
2
3
4
5
6
7
8
9
10
|
{ "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ā)生異常時默認(rèn)會調(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ù):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//通常我們使用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);}); |
