<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法

        來源:懂視網 責編:小采 時間:2020-11-27 22:37:10
        文檔

        ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法

        ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法:每一個WEB應用程序都有導航菜單,Abp也為用戶提供了通用的創建和顯示菜單方式。 創建菜單 一個應用程序可能包含不同的模塊,而每個模塊都可能有它自己的菜單項。在Abp中,需要創建一個派生自NavigationProvider的類來定義一個菜單項。 假設我們有一個這樣的
        推薦度:
        導讀ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法:每一個WEB應用程序都有導航菜單,Abp也為用戶提供了通用的創建和顯示菜單方式。 創建菜單 一個應用程序可能包含不同的模塊,而每個模塊都可能有它自己的菜單項。在Abp中,需要創建一個派生自NavigationProvider的類來定義一個菜單項。 假設我們有一個這樣的

        每一個WEB應用程序都有導航菜單,Abp也為用戶提供了通用的創建和顯示菜單方式。

        創建菜單
        一個應用程序可能包含不同的模塊,而每個模塊都可能有它自己的菜單項。在Abp中,需要創建一個派生自NavigationProvider的類來定義一個菜單項。
        假設我們有一個這樣的主菜單:

      1. Tasks
      2. Reports
      3. Administration 1 User Management 2 Role Management
      4. 由上可知,Administration菜單項有兩個子菜單項。對應的生成方法如下:

         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,此外,菜單項可能需要與特定用戶權限相結合(相關權限系統正在開發,暫時還沒有說明文檔)。
        InavigationProviderContext方法能夠獲取現有的菜單項、添加菜單或菜單項。因此,不同的模塊可以添加各自的菜單。
        創建完成導航后,還需要在對應模塊預初始化時注冊到Abp配置文件中:
        Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>();

        顯示菜單
        IuserNavigationManager可以注入、獲取和顯示菜單。可以在服務器端創建菜單。
        Abp自動生成的javascript API使得用戶能夠在客戶端獲取菜單,對應的方法和對象在命名空間abp.nav中。例如,在客戶端使用abp.nav.menus.MainMenu可以用來獲取主菜單。
        下面我們就來看一下JavaScript的相關方面。

        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);
        });
        

         

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法

        ABP框架中導航菜單的使用及JavaScript API獲取菜單的方法:每一個WEB應用程序都有導航菜單,Abp也為用戶提供了通用的創建和顯示菜單方式。 創建菜單 一個應用程序可能包含不同的模塊,而每個模塊都可能有它自己的菜單項。在Abp中,需要創建一個派生自NavigationProvider的類來定義一個菜單項。 假設我們有一個這樣的
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 青青青国产在线观看免费网站| 中文字幕久无码免费久久 | 国产av无码专区亚洲av毛片搜 | 亚洲成av人片天堂网无码】| 成人免费毛片内射美女APP| 亚洲毛片在线免费观看| 1000部夫妻午夜免费| 亚洲一级毛片免费看| 韩国免费一级成人毛片| 亚洲av日韩综合一区二区三区| 日本免费网站在线观看| 日韩免费高清一级毛片| 国产亚洲色婷婷久久99精品91| 久久性生大片免费观看性| 亚洲人精品午夜射精日韩 | 亚洲AV成人片无码网站| 国产成人综合久久精品免费 | 亚洲6080yy久久无码产自国产| 国产三级免费观看| 三根一起会坏掉的好痛免费三级全黄的视频在线观看 | 久久久久国产精品免费看| 亚洲美女自拍视频| 思思99re66在线精品免费观看| 国产成人亚洲精品播放器下载| 亚洲五月午夜免费在线视频| 欧洲人免费视频网站在线| 亚洲美国产亚洲AV| 2048亚洲精品国产| 久爱免费观看在线网站| 亚洲色偷偷色噜噜狠狠99网| 在线亚洲午夜理论AV大片| 五月亭亭免费高清在线| 黄色毛片免费观看| 婷婷精品国产亚洲AV麻豆不片| 青春禁区视频在线观看直播免费| 欧洲亚洲综合一区二区三区| 在线亚洲午夜理论AV大片| 免费无码又黄又爽又刺激 | 女人裸身j部免费视频无遮挡| 亚洲国产精品成人久久| 好吊妞在线成人免费|