ABP(現代ASP.NET樣板開發框架)系列之21、ABP展現層——Javascript函式庫
基於DDD的現代ASP.NET開發框架--ABP系列之21、ABP展現層——Javascript函式庫
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。
ASP.NET Boilerplate的js庫提供了一些讓javascript開發更方便的方法和物件,以下介紹一下庫中的API列表。
Ajax
現代的應用經常會使用AJAX,尤其是單頁應用,幾乎是和伺服器通訊的唯一手段,執行AJAX通常會有以下步驟:
在客戶端,你需要提供一個URL,選擇一個和伺服器通訊的方法(GET,POST,PUT,DELETE)。在請求完成後執行回撥函式,請求結果可更是成功或失敗,失敗時你需要給出提示,成功時你需要根據返回值執行操作。通常情況下,在請求開始時,你需要給出類似正在處理或者相關的繁忙等待資訊(如頁面遮蓋),請求完成後恢復。
服務端接收到請求後,對請求引數進行驗證,執行服務端程式碼,如果發生錯誤或者驗證失敗,應給出具體的原因,成功時返回客戶端想要的資料。
ABP服務端支援標準的ajax的請求/輸出。建議大家使用abp.jquery.js中提供的ajax請求方法,這個方法基於jquery的ajax方法,可以自動處理服務端的異常資訊,當然,如果你對js很熟練的話,也可以根據自己的需要寫ajax。
ASP.NET Boilerplate的ajax請求例項:
//構建要傳輸的引數物件 var newPerson = { name: 'Dougles Adams', age: 42 };//呼叫abp的ajax方法 abp.ajax({ url: '/People/SavePerson', data: JSON.stringify(newPerson) //轉換成json字串 }).done(function(data) { abp.notify.success('created new person with id = ' + data.personId); });
你也可以使用jquery的ajax方法呼叫,但是需要設定一下預設請求引數,dataType 設定為 'json', type 設定為 'POST' and contentType 設定為 'application/json,在傳送請求時需要將js物件轉換成json字串,和$.ajax一樣,你也可以傳遞引數覆蓋abp.ajax的預設引數abp.ajax返回一個promise型別,你可以鏈式程式設計寫如下的方法:
.done() //成功, .fail() //失敗, .then() //回撥巢狀。
下面的一個簡單的例子展示ajax請求PeopleController的SavePerson方法,在.done()中可以獲取到服務端建立記錄成功後返回的記錄id。
public class PeopleController : AbpController { [HttpPost] public JsonResult SavePerson(SavePersonModel person) { //TODO: save new person to database and return new person's id //TODO: 建立一個新的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 //返回的資料 }, "error": null, //如果發生錯誤,result為null,此處為錯誤資訊的物件,包含message和details兩個屬性 "targetUrl": null, //可以提供一個url供客戶端重定向,例如自動構建下一頁的url "unAuthorizedRequest": false //是否通過了授權,如果返回true,客戶端應重新登入 }
如果你繼承了AbpController,Json方法返回的物件總會被這樣包裝,如果未發生錯誤,你在abp.ajax的done(function(result,data){})中,第一個引數result是{"personId": 42}物件,data是原始物件,WebApi中繼承AbpApiController也是同樣的機制。
錯誤處理(Handling errors)
返回值如下:
{ "targetUrl": null, "result": null, "success": false, //代表出現異常 "error": { "message": "An internal error occured during your request!", //未捕捉到的異常,通常為系統異常,會自動記錄日誌,具體提示資訊在配置檔案配置,可以搜尋一下,如果是業務丟擲的UserFriendlyException異常,message為具體的錯誤資訊 "details": "..." //發生異常時預設會呼叫abp.message.error函式,你可以在abp.jquery.js修改,統一處理錯誤資訊。 }, "unAuthorizedRequest": false }
動態WebAPI(Dynamic Web API Layer)
此處會根據Services動態生成WebAPI呼叫函式:
//通常我們使用ajax會按照如下寫法,做一個簡單的封裝來重用ajax,此處框架可以幫你生成簡單的呼叫方法 var savePerson = function(person) { return abp.ajax({ url: '/People/SavePerson', data: JSON.stringify(person) }); }; //呼叫時你需要構建引數 var newPerson = { name: 'Dougles Adams', age: 42 }; //直接呼叫方法,如何生成上面的呼叫方法可以參考原始碼中的Abp.Web.Api專案中/ WebApi/ Controllers/ Scripting/ jQuery下的實現 savePerson(newPerson).done(function(data) { abp.notify.success('created new person with id = ' + data.personId); });
通知
通知會顯示在右下角,稍後自動消失
abp.notify.success('a message text', 'optional title'); abp.notify.info('a message text', 'optional title'); abp.notify.warn('a message text', 'optional title'); abp.notify.error('a message text', 'optional title');
通知API是依賴於toastr庫,你需要在專案中引用toastr的js和css,然後引用ABP專案的abp.toastr.js,notify.success呼叫後的樣子:
你可以執行樣板專案,在瀏覽器的控制檯測試這幾種提示訊息,另外,當ajax出現異常時,你可以修改abp.jquery.js的原始檔,來呼叫abp.notify.error方法實現友好的提示資訊。
如果你有其他的的通知外掛也可以使用,引用相應的js庫就可以了,提示訊息的js是可選的。
訊息
用於向用戶顯示對話方塊,展示訊息或者得到使用者的確認,ABP預設採用的sweetalert庫實現的對話方塊資訊,使用時你需要引用sweetalert的樣式和js,並且引用abp.sweet-alert.js就可以使用下列API了:
abp.message.info('some info message', 'some optional title'); abp.message.success('some success message', 'some optional title'); abp.message.warn('some warning message', 'some optional title'); abp.message.error('some error message', 'some optional title');
呼叫abp.message.success會展示如下的對話方塊:
Confirmation 確認對話方塊:
abp.message.confirm( 'User admin will be deleted.', //確認提示 'Are you sure?',//確認提示(可選引數) function (isConfirmed) { if (isConfirmed) { //...delete user 點選確認後執行 } } );
預設ABP的js庫中可能會引用到訊息API,比如ajax呼叫失敗會呼叫abp.message.error。
使用者介面的繁忙提示
ABP提供了設定頁面的某部分繁忙的API。
UI Block API
設定一個半透明層,阻止點選頁面元素,可以覆蓋區域性或者整個頁面,例子如下:
abp.ui.block(); //覆蓋整個頁面 abp.ui.block($('#MyDivElement')); //覆蓋指定元素,可以把jquery物件作為引數 abp.ui.block('#MyDivElement'); //或者直接使用選擇器引數 abp.ui.unblock(); //整個頁面解除覆蓋 abp.ui.unblock('#MyDivElement'); //指定元素解除覆蓋
UI Block API使用blockUI這個js庫來實現效果的,如果使用這個api需要在頁面引用blockUI的js庫和abp.blockUI.js檔案。
UI Busy API 指示頁面繁忙的API,如ajax請求中:
abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');
第一個引數可以直接使用jquery選擇器如’#id’或者使用jquery物件如$(‘#id’),如果傳null或者‘body’則標記整個頁面為繁忙狀態,第二個引數可以接收一個promise,promise完成後會自動解除頁面繁忙狀態。
abp.ui.setBusy( $('#MyLoginForm'), abp.ajax({ ... }) //返回值是promise,如果需要了解promise的更多資訊,可以參考jQuery的 Deferred );
UI Busy API 使用的是spin.js,你需要在頁面中引用spin.js和abp.spin.js。
Js日誌介面
這個主要是對瀏覽器console.log('...') 進行的包裝,可以支援所有瀏覽器,例子如下:
abp.log.debug('...'); abp.log.info('...'); abp.log.warn('...'); abp.log.error('...'); abp.log.fatal('...');
你可以通過設定abp.log.level來控制日誌輸出,和服務端一樣,如設定了abp.log.levels為INFO時就不會輸出debug日誌了,你也可以根據你的需要定製重新這些API。
Javascript公共方法
ABP提供了一些常用的公共方法。
建立命名空間別名(abp.utils.createNamespace)
通過建立名稱空間讓js方法分類更加明確,使用更加方便,下面是例子:
//建立或者獲取名稱空間 abp.utils = abp.utils || {}; abp.utils.strings = abp.utils.strings || {}; abp.utils.strings.formatting = abp.utils.strings.formatting || {}; //在名稱空間中增加一個方法 abp.utils.strings.formatting.format = function() { ... }; 你可以向下面一樣用 //建立命名空間別名 var formatting = abp.utils.createNamespace(abp, 'utils.strings.formatting'; //在formatting名稱空間下增加/修改一個方法 formatting.format = function() { ... };
別名簡化了以前長長的名字,需要注意的是,第一個引數是必須存在的根名稱空間。
格式化字串(abp.utils.formatString)
和C#的string.Format一樣的用法
var str = abp.utils.formatString('Hello {0}!', 'World'); //str = 'Hello World!' var str = abp.utils.formatString('{0} number is {1}.', 'Secret', 42); //str = 'Secret number is 42'
希望更多國內的架構師能關注到ABP這個專案,也許這其中有能幫助到您的地方,也許有您的參與,這個專案可以發展得更好。
歡迎加QQ群:
相關推薦
ABP(現代ASP.NET樣板開發框架)系列之21、ABP展現層——Javascript函式庫
基於DDD的現代ASP.NET開發框架--ABP系列之21、ABP展現層——Javascript函式庫 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 ASP.NET Boilerplate的js庫提供了一些讓java
ABP(現代ASP.NET樣板開發框架)系列之10、ABP領域層——實體
基於DDD的現代ASP.NET開發框架--ABP系列之10、ABP領域層——實體 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由深圳-Carl提供翻譯 實體是DDD(領域驅動設計)的核心概念之一。Eric Eva
ABP(現代ASP.NET樣板開發框架)系列之4、ABP模組系統
基於DDD的現代ASP.NET開發框架--ABP系列之4、ABP模組系統 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由東莞-天道提供翻譯 ABP模組系統簡介 ABP框架提供了建立和組裝模組的基礎,一個模組
ABP(現代ASP.NET樣板開發框架)系列之6、ABP依賴注入
基於DDD的現代ASP.NET開發框架--ABP系列之6、ABP依賴注入 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由 上海-半冷 提供翻譯 什麼是依賴注入 如果你已經知道依賴注入的概念,建構函式和屬性注入
ABP(現代ASP.NET樣板開發框架)系列之9、ABP設定管理
基於DDD的現代ASP.NET開發框架--ABP系列之9、ABP設定管理 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由山東-李偉提供翻譯 介紹 每個應用程式需要儲存一些設定並在應用程式的某個地方使用這些設定。
ABP(現代ASP.NET樣板開發框架)系列之2、ABP入門教程
基於DDD的現代ASP.NET開發框架--ABP系列之2、ABP入門教程 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程式的新起點,它旨在成為一個通用的
ABP(現代ASP.NET樣板開發框架)系列之17、ABP應用層——引數有效性驗證
基於DDD的現代ASP.NET開發框架--ABP系列之17、ABP應用層——引數有效性驗證 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 應用程式的輸入資料首先應該被檢驗是否有效。輸入的資料能被使用者或其他應用程式提
ABP(現代ASP.NET樣板開發框架)系列之16、ABP應用層——資料傳輸物件(DTOs)
基於DDD的現代ASP.NET開發框架--ABP系列之16、ABP應用層——資料傳輸物件(DTOs) ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 資料傳輸物件(Data Transfer Objects)用於應用層
ABP(現代ASP.NET樣板開發框架)系列之13、ABP領域層——資料過濾器(Data filters)
基於DDD的現代ASP.NET開發框架--ABP系列之13、ABP領域層——資料過濾器(Data filters) ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 介紹 在資料庫開發中,我們一般會運用軟刪除(soft
ABP(現代ASP.NET樣板開發框架)系列之14、ABP領域層——領域事件(Domain events)
基於DDD的現代ASP.NET開發框架--ABP系列之14、ABP領域層——領域事件(Domain events) ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 在C#中,一個類可以定義其專屬的事件並且其它類可以註冊該事
ABP(現代ASP.NET樣板開發框架)系列之5、ABP啟動配置
基於DDD的現代ASP.NET開發框架--ABP系列之5、ABP啟動配置 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由 東莞-天道 提供翻譯 譯者注:在看這一節的內容之前,建議大家先下載module-ze
ABP(現代ASP.NET樣板開發框架)系列之3、ABP分層架構
基於DDD的現代ASP.NET開發框架--ABP系列之3、ABP分層架構 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 前言 為了減少複雜性和提高程式碼的可重用性,採用分層架構是一種被廣泛接受的技術。為了實現分層的
ABP(現代ASP.NET樣板開發框架)系列之19、ABP應用層——審計日誌
基於DDD的現代ASP.NET開發框架--ABP系列之19、ABP應用層——審計日誌 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 維基百科定義:審計跟蹤(也稱為稽核日誌)是一個安全相關的時間順序記錄,記錄這些記錄的
ABP(現代ASP.NET樣板開發框架)系列之15、ABP應用層——應用服務(Application services)
基於DDD的現代ASP.NET開發框架--ABP系列之15、ABP應用層——應用服務(Application services) ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由東莞-天道提供翻譯 應用服務用於將領
ABP(現代ASP.NET樣板開發框架)系列之23、ABP展現層——異常處理
基於DDD的現代ASP.NET開發框架--ABP系列之23、ABP展現層——異常處理 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 在 web 應用程式中,異常通常是在 MVC Controller actions
ABP(現代ASP.NET樣板開發框架)系列之8、ABP日誌管理
基於DDD的現代ASP.NET開發框架--ABP系列之8、ABP日誌管理 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 本文由東莞-天道提供翻譯 Server side(伺服器端) ASP.NET Boilerpla
ABP(現代ASP.NET樣板開發框架)系列之1、ABP總體介紹
基於DDD的現代ASP.NET開發框架--ABP系列之1、ABP總體介紹 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程式的新起點,它旨在成為一個通用的
ABP(現代ASP.NET樣板開發框架)系列之12、ABP領域層——工作單元(Unit Of work)
基於DDD的現代ASP.NET開發框架--ABP系列之12、ABP領域層——工作單元(Unit Of work) ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 通用連線和事務管理方法 連線和事務管理是使用資料庫的應用程
ABP(現代ASP.NET樣板開發框架)系列之22、ABP展現層——導航欄設定
基於DDD的現代ASP.NET開發框架--ABP系列之22、ABP展現層——導航欄設定 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 每一個WEB應用程式都有導航選單,Abp也為使用者提供了通用的建立和顯示選單方式。
ABP(現代ASP.NET樣板開發框架)系列之7、ABP Session管理
基於DDD的現代ASP.NET開發框架--ABP系列之7、ABP Session管理 ABP是“ASP.NET Boilerplate Project (ASP.NET樣板專案)”的簡稱。 簡介 如果一個應用程式需要登入,則它必須知道當前使用者執行了什麼操作。因此ASP.